element tree-table 子选项选中父选项默认选中与全选

tree-table

1、将原数据添加isCheck（是否被选择）的属性，默认isCheck为false(未选择)
2、handleSelection事件是当用户手动勾选数据行的 Checkbox 时触发的事件；根据参数row来区分父选择项与子选择项；
如果是父选择项则只用考虑当被选择时子选项是否全选。
如果是子选择项则考虑，当子选择项被选择前，父选择项是否已被选择；当子选项全被取消时父选择项也默认取消选择
3、handleSeletionAll事件是全选事件，设置checkAll来判断是否全选

      
      
     
    

  data() {
    return {
      checkAll: false, //是否全选
      addformLabelWidth: "50px",
      tableData2: [
        {
          id: 1,
          name: "menu1",
          parent: 0
        },
        {
          id: 2,
          name: "menu2",
          parent: 0
        },
        {
          id: 3,
          remarks: "一级菜单",
          name: "menu3",
          parent: 0,
          children: [
            {
              id: 31,
              name: "menu31",
              parent: 3
            },
            {
              id: 32,
              name: "menu32",
              parent: 3
            }
          ]
        }  ],
      rightCheckList: [],//绑定tree-table数据
      rightobj: {}//数据对象
    };
  },
methods:{
  //初始化选择项
    initCheckedBox() {
      let initList = function(data) {
        data.forEach(function(item) { //created使用箭头函数报错，所以用function(){}
          item.isCheck = false; //未选中
          if (item.children) {
            initList(item.children);
          }
        });
        return data;
      };
      this.rightCheckList = initList(this.tableData2);
      console.log(this.rightCheckList);
    },
    //当用户手动勾选全选 Checkbox 时触发的事件
    handleSeletionAll(selection) {
      if (!this.checkAll) {
        console.log("全选");
        this.checkAll = true;
        this.isAllChecked(this.rightCheckList, true);
      } else {
        console.log("全取消");
        this.checkAll = false;
        this.isAllChecked(this.rightCheckList, false);
      }
    },
    //当用户手动勾选数据行的 Checkbox 时触发的事件
    handleSelection(selection, row) {
      let selectionlist = selection;

      //转化成{'1':{...}}的形式
      this.getRightListObj(this.rightCheckList);

      //获取当前选中的row
      let checkrow = [];
      checkrow.push(row);
      let goalid = checkrow[0];
      //父节点
      if (goalid.parent === 0) {
        console.log(goalid.isCheck);
        if (goalid.isCheck) {
          //父节点全选中
          this.isRowsChecked(goalid, false); //取消
        } else {
          this.isRowsChecked(goalid, true);
        }
      }
      //子节点
      if (goalid.parent !== 0) {
        if (goalid.isCheck) {
          this.clearParentRow(goalid, this.rightCheckList, this.rightobj);
        } else {
          this.checkedParentRow(goalid, this.rightCheckList, this.rightobj);
        }
      }
    },
    //是否全选中
      //是否全选中
    isAllChecked(data, status) {
      //data(array)  status =true or false
      if (data.length === undefined) {
        let imitData = [];
        imitData.push(data);
        this.isAllChecked(imitData, status);
      } else {
        data.forEach(item => {
          item.isCheck = status;
          this.$refs.rightTable.toggleRowSelection(item, status);
          if (item.children) {
            this.isAllChecked(item.children, status);
          }
        });
      }
    },
    //选中子节点默认选中父节点
    checkedParentRow(data, list, obj) {
      data.isCheck = true;
      let parent = data.parent; //父节点
      obj[data.parent].isCheck = true;
      this.$refs.rightTable.toggleRowSelection(list[parent - 1], true);
    },
    //子节点都未被选中，父节点默认取消选中
    clearParentRow(data, list, obj) {
      let falselist = [];
      let parent = data.parent; //父节点
      // let parentIsCheck = obj[data.parent].isCheck; //父节点选中状态
      data.isCheck = false;
      this.$refs.rightTable.toggleRowSelection(data, false);
      //检测所有子节点的选中状态
      obj[parent].children.forEach(item => {
        let status = obj[item.id].isCheck;
        if (!status) {
          falselist.push(status);
        }
      });
      //当所有子节点未被选中
      if (falselist.length === obj[parent].children.length) {
        obj[data.parent].isCheck = false;
        this.$refs.rightTable.toggleRowSelection(list[parent - 1], false);
      }
    },
    getRightListObj(data) {
      data.forEach(item => {
        this.rightobj[item.id] = item;
        if (item.children) {
          this.getRightListObj(item.children);
        }
      });
    }
}