美文网首页
elementui table 树形 勾选父节点时勾选全部子节点

elementui table 树形 勾选父节点时勾选全部子节点

作者: 6659a0f02826 | 来源:发表于2021-03-11 13:10 被阅读0次

    需要加以下三个方法
    @select="selectChange"
    @select-all="selectAllChange"
    @selection-change="selectionChangeHandler"

    <el-table
          ref="multiTable"
          v-loading="crud.loading"
          lazy
          :load="getMenus"
          :data="list"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          row-key="id"
          @select="selectChange"
          @select-all="selectAllChange"
          @selection-change="selectionChangeHandler"
        >
    
         /**
         * 用于树形表格多选,单选的封装
         * @param selection
         * @param row
         */
        selectChange(selection, row) {
          // 如果selection中存在row代表是选中,否则是取消选中
          if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) {
            if (row.children) {//注意这里的children是后台返回数据的children字段
              row.children.forEach(val => {
                this.$refs.multiTable.toggleRowSelection(val, true)
                selection.push(val)
                if (val.children) {
                  this.selectChange(selection, val)
                }
              })
            }
          } else {
            this.toggleRowSelection(selection, row)
          }
        },
    
        /**
         * 用于树形表格多选, 选中所有
         * @param selection
         */
        selectAllChange(selection) {
          // 如果选中的数目与请求到的数目相同就选中子节点,否则就清空选中
          if (selection && selection.length === this.list.length) {
            selection.forEach(val => {
              this.selectChange(selection, val)
            })
          } else {
            this.$refs.multiTable.clearSelection()
          }
        },
    
        // 选择改变
        selectionChangeHandler(val) {
          this.selections = val
          this.unique(this.selections,'id')//这里有一个问题就是这样点选完之后,数据有重复,所以根据id手动去重,期待优化
        },
    
        /**
         * 切换选中状态
         * @param selection
         * @param data
         */
        toggleRowSelection(selection, data) {
          if (data.children) {//注意这里的children也是后台返回数据的children字段
            data.children.forEach(val => {
              this.$refs.multiTable.toggleRowSelection(val, false)
              if (val.children) {
                this.toggleRowSelection(selection, val)
              }
            })
          }
        },  
    
        getDataId(data) {
          return data['id']
        },
        
        //数组去重
      unique(arr,i){
            for(let i=0;i<arr.length;i++){
                for(let j=i+1;j<arr.length;j++){
                  if(arr[i].id == arr[j].id){
                        arr.splice(j,1)
                        j--
                  }
                }
            }
       },
      //列表树懒加载
      getMenus(tree, treeNode, resolve) {
          const params = { pid: tree.id }
          setTimeout(() => {
            crudMenu.getMenus(params).then(res => {
              resolve(res.content)
            })
          }, 100)
        },
    
    

    相关文章

      网友评论

          本文标题:elementui table 树形 勾选父节点时勾选全部子节点

          本文链接:https://www.haomeiwen.com/subject/uqwnqltx.html