el-tree 复选框回显问题

最新推荐文章于 2024-08-01 15:37:23 发布

心向阳光，便是晴天

最新推荐文章于 2024-08-01 15:37:23 发布

阅读量1.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_43173924/article/details/107911561

版权

<el-tree class="filter-tree" :data="dataTree" :props="defaultProps" :filter-node-method="filterNode" show-checkbox node-key="id" ref="tree" style="height: 50vh;overflow-y: auto;"></el-tree>

watch: {
  filterText(val) {
     this.$refs.tree.filter(val);
  }
},
methods：{
  filterNode(value, data) {
    if (!value) return true;
       return data.label.indexOf(value) !== -1;
    }
}
//编辑回显
showEdit(row) {
   vm.$nextTick(function(){
       this.visibleDia = true;
       this.getTreeList().then(res => {
         if (res && res.length !== 0) {
            this.$refs.tree.setCheckedKeys("返回的子节点id的数组");  //注意，不要带父节点id
          } else {
            this.dataTree = [];
          }
       })
   })
},
// 获取树列表
getTreeList () {
  return new Promise(resolve => {
    this.$http.post({}).then(res => {
      this.dataTree = res.data.treeList;
      resolve(this.dataTree);
    })
  })
},
//提交
submit() {
  console.log(this.$refs.tree.getCheckedKeys()) //当前选中的节点id
  console.log(this.$refs.tree.getHalfCheckedKeys()) //当前半选中状态也就是父节点的id
  var idList =(this.$refs.tree.getCheckedKeys()).concat(this.$refs.tree.getHalfCheckedKeys())
  // 提交接口，分开传选中节点id数组，和选中加半选中状态数组
},
//关闭
close () {
  this.defaultCheckedKeys = this.$refs.tree.setCheckedKeys([]);
  this.visibleDia = false;
},