vue.js前端代码:

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      show-checkbox
      ref="tree"
      @check-change="handleCheckChange"
    />
    <el-button @click="getSelectedNodes">获取选中的节点</el-button>
    <el-button @click="getSelectedLabels">获取选中的标签</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点',
          children: [
            { id: 2, label: '二级节点1' },
            { id: 3, label: '二级节点2' }
          ]
        },
        {
          id: 4,
          label: '一级节点',
          children: [
            { id: 5, label: '二级节点1' },
            { id: 6, label: '二级节点2' }
          ]
        }
      ],
      selectedNodes: [],
      selectedLabels: []
    };
  },
  methods: {
    handleCheckChange(node, checked) {
      console.log('节点:', node, '选中状态:', checked);
    },
    getSelectedNodes() {
      const checkedNodes = this.$refs.tree.getCheckedNodes(false, true); // 只返回完全选中的节点
      this.selectedNodes = checkedNodes;
      console.log('选中的节点:', checkedNodes);
    },
    getSelectedLabels() {
      const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
      const labels = checkedNodes.map(node => node.label);
      this.selectedLabels = labels;
      console.log('选中的标签:', labels);
    }
  }
};
</script>

运行的界面:
在这里插入图片描述
点击获取选中的节点:
在这里插入图片描述

点击“获取选择的标签”:
在这里插入图片描述

更多推荐