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

组件代码

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

获取选择的节点

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

初始值

javascript 复制代码
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数据回显方法

javascript 复制代码
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);
    });
 }
相关推荐
大猩猩X10 分钟前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
蓝天白云下遛狗24 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5