vue el-tree树表

全选 反选 取消选中等操作

<template>
  <div class="app-container">
    <!-- 授权对话框 -->
    <el-dialog
        title="授权"
        :visible.sync="dialogVisibleSetRoot"
        width="40%"
        :before-close="handleClose"
        >
        <div class="rootDiv">
          <!-- <el-tag size="medium" effect="dark" close="blue">{{this.verNm}}</el-tag> -->
        </div>
        <el-button type="success" @click="selectAll">全选</el-button>
         <el-button type="warning" @click="invertSelection">反选</el-button>
         <el-button type="info" @click="toggleSelection">取消</el-button>
        <div class="down-tree">
          <el-tree
          ref="channelTree"
          :check-strictly="nodeFlag"
          default-expand-all
          :data="authList"
          :props="props"
          show-checkbox
          node-key="id"
          @check="clickDeal"
          :highlight-current="true"
          :default-checked-keys="defaultTree"
          >
        </el-tree>
        </div>
      <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitPacketsAuth">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAuth } from "@/api/zk/auth";
import { listCombopack, getCombopack, delCombopack, addCombopack, updateCombopack } from "@/api/zk/combopack";
import { listCombopackAuth, getCombopackAuth, delCombopackAuth, addCombopackAuth, updateCombopackAuth } from "@/api/zk/combopackAuth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Combopack",
  components: {
    Treeselect
  },
  data() {
    return {
      //选中的数据
      selectCheck:{
        //用来保存当前点击的id
        comboPackId:''
      },
      // 树表显示数据
      props:{
        children: 'children', 
        label: 'name'
      },
      //父子节点默认关联
      nodeFlag:true,
      //默认选中
      defaultTree:[],
      // 权限管理表格数据
      authList: [],
      // 权限管理树选项
      authOptions: [],
      //授权对话框
      dialogVisibleSetRoot:false,   
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 套餐表格数据
      combopackList: [],
     
     
    };
  },
  created() {
    this.getList();
    this.getRootList();
  },
  methods: {
    /** 查询权限管理列表 */
    getRootList() {
      listAuth(this.queryRootParams).then(response => {
        this.authList = this.handleTree(response.data, "id", "pid");
      });
    },
    /** 转换权限管理数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /**确认设置权限弹框 */
    handleCombopackAuthEdit(row){
      this.selectCheck.comboPackId =  row.id;
      this.nodeFlag = true;//关闭父子联动
      const comboPackId = row.id
      this.defaultTree = []; //每次点击清空多选框
      // setTimeout(() => {
      getCombopackAuth(comboPackId).then(response => {
        console.log(response)
        response.data.forEach((item) => {
        this.defaultTree.push(item.authId)
        })
        this.$nextTick(() => {
          this.nodeFlag = false;//关闭父子联动
          this.$refs.channelTree.setCheckedKeys(this.defaultTree); 
        })
      });
      // },10)
      this.dialogVisibleSetRoot = true;
    },
    //取消选中
    toggleSelection() {
       this.$refs.channelTree.setCheckedNodes([]);
       this.selectCheck.authId = []
    },
    // 全选处理方法
    batchSelect (nodes, refs, flag, seleteds) {
      if (typeof nodes !== 'undefined') {
        nodes.forEach(element => {
          refs.setChecked(element, flag, true)
        })
      }
 
      if (typeof seleteds !== 'undefined') {
        seleteds.forEach(node => {
          refs.setChecked(node, !flag, true)
        })
      }
      //获得选中数据
      let checkdate  = this.$refs.channelTree.getCheckedKeys().concat(this.$refs.channelTree.getHalfCheckedKeys())
      this.selectCheck.authId = checkdate
    },
    // 反选
    invertSelection () {
      let res = this.$refs.channelTree
      let nodes = res.getCheckedNodes(true, true)
      this.batchSelect(this.authList, res, true, nodes)
    },
    // 选择全部
    selectAll() {
      this.$nextTick(() => {    //这个如果要默认全选就必须加，否则会报错“setCheckedNodes”未定义
          this.$refs.channelTree.setCheckedNodes(this.authList); // 这是利用el-tree的数据源设置全选 视觉上，并没有获取到数据
          let checkdate  =this.$refs.channelTree.getCheckedKeys() // 还要再次获取一下已被选中节点的id数组
          this.selectCheck.authId = checkdate
      })
    },
    /**获得当前选中的数据 */
    clickDeal(){
        let checkdate  = this.$refs.channelTree.getCheckedKeys().concat(this.$refs.channelTree.getHalfCheckedKeys())
        this.selectCheck.authId = checkdate
    },
    /**授权框提交按钮 */
    submitPacketsAuth(){
      const newData = JSON.parse(JSON.stringify(this.selectCheck))
      addCombopackAuth(newData).then(response => {
        this.$modal.msgSuccess("授权成功");
        this.dialogVisibleSetRoot = false;
        this.getList();
      }); 
    },
    /** 关闭弹窗操作 */
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.reset();
          })
          .catch(_ => {});
      },
  }
};
</script>

<style lang="scss" scope>
.down-tree{
    height: 300px;
    display: block;
    overflow-y: scroll;
}
</style>