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);
    });
 }
相关推荐
Amodoro12 分钟前
nuxt更改页面渲染的html,去除自定义属性、
前端·html·nuxt3·nuxt2·nuxtjs
Wcowin20 分钟前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说1 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4531 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2431 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋31 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA1 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你1 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2431 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴1 小时前
Tile Pattern
前端·webgl