element ui 的tree单选，控制setCheckedNodes传入data即可

小星星o

已于 2023-10-21 16:04:48 修改

阅读量622

点赞数

文章标签： vue.js

于 2023-10-21 15:55:45 首次发布

本文链接：https://blog.csdn.net/m0_74608954/article/details/133962530

版权

关键代码

handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
      if(checked){
        this.$refs.tree.setCheckedNodes([data]);
      }
    },

完整代码

<template>
  <div>
    <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        check-strictly
        ref="tree"
        highlight-current
        @check-change="handleCheckChange"
        :props="defaultProps">
    </el-tree>
    <el-button @click="resetChecked">清空</el-button>
  </div>
</template>

<script>
export default {
  name: "web测试",
  data() {
    return {
      data: [{
        disabled: 1,
        id: 1,
        label: '一级 1',
        children: [{
          disabled: 1,
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
      if (checked) {
        this.$refs.tree.setCheckedNodes([data]);
      }
    },
  }

}
</script>