[element-ui] el-tree实现全选/反选、默认全选

最新推荐文章于 2024-09-05 20:10:43 发布

533_

最新推荐文章于 2024-09-05 20:10:43 发布

阅读量6k

点赞数 1

分类专栏： element-ui 文章标签： javascript

本文链接：https://blog.csdn.net/qq_14993591/article/details/123396331

版权

element-ui 专栏收录该内容

112 篇文章 2 订阅

订阅专栏

<el-form-item label="字段选择" :label-width="formLabelWidth">
        <div class="propLists">
          <div class="propListHeader">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">全部选择</el-checkbox>
          </div>
          <div class="propListBody">
            <el-tree ref="channelTree" :data="props" :props="defaultProps" node-key="id" show-checkbox @check-change="handleCheckChange"></el-tree>
          </div>
 
        </div>
</el-form-item>

watch:{
  visibleExcel(newVal) {  //在弹框打开时默认执行全选方法，
      if (newVal) {
        this.checkAllChange()
      }
    },
} 
 
methods: {   
// 全选或反选
    checkAllChange() {
      if (this.checkAll) { // 全选
        this.$nextTick(() => {    //这个如果要默认全选就必须加，否则会报错“setCheckedNodes”未定义
          this.$refs.channelTree.setCheckedNodes(this.props)
        })
        // this.
      } else { // 取消选中
        this.$nextTick(() => {
          this.$refs.channelTree.setCheckedKeys([])
        })
      }
    },
}