el-tree结合checkbox实现数据回显

原创已于 2025-05-13 16:12:57 修改 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2025-05-13 16:12:31 首次发布

组件代码

<el-tree
   :data="vertiList"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    ref="treeRefx"
    class="custom-tree"
    @check-change="handleCheckChange"
    >
</el-tree>

获取选择的节点

handleCheckChange(a,b,c){
          const selectedItems = this.$refs.treeRefx.getCheckedNodes(true);
          this.selectedValuex=selectedItems;
        },

初始值

data(){
  return{
  		defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectedValuex:[],
        vertiList:[{
          id: 1,
          label: '一级 1',
          children: [{
            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'
          }]
        }],
  }
}

checkbox数据回显方法

reSetTree(){
    var xids=[];
    for(var i=0;i<this.selectedValuex.length;i++){
       xids.push(this.selectedValuex[i].id);
    }
    this.$nextTick(() => {
       this.$refs.treeRefx.setCheckedKeys(xids);
    });
 }