el-tree实现全选/反选、默认全选

最新推荐文章于 2024-07-30 17:32:18 发布

原创最新推荐文章于 2024-07-30 17:32:18 发布 · 4.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue项目开发同时被 3 个专栏收录

31 篇文章

订阅专栏

vue学习笔记

10 篇文章

订阅专栏

elementui

5 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中利用Element UI组件库的el-tree元素，实现字段选择的全选和反选功能。通过监听弹框的可见性来触发全选操作，并在checkAllChange方法中处理全选和反选的逻辑，确保数据同步。文章还展示了相关的watch和methods代码片段。

<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([])
        })
      }
    },
}