tree-table

1前塔、將原數(shù)據(jù)添加isCheck（是否被選擇）的屬性，默認(rèn)isCheck為false(未選擇)
2脚囊、handleSelection事件是當(dāng)用戶手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件搂誉；根據(jù)參數(shù)row來(lái)區(qū)分父選擇項(xiàng)與子選擇項(xiàng)；
如果是父選擇項(xiàng)則只用考慮當(dāng)被選擇時(shí)子選項(xiàng)是否全選谭确。
如果是子選擇項(xiàng)則考慮，當(dāng)子選擇項(xiàng)被選擇前菇夸，父選擇項(xiàng)是否已被選擇琼富；當(dāng)子選項(xiàng)全被取消時(shí)父選擇項(xiàng)也默認(rèn)取消選擇
3仪吧、handleSeletionAll事件是全選事件庄新，設(shè)置checkAll來(lái)判斷是否全選

<el-table
      ref="rightTable"
      :data="rightCheckList"
      stripe
      style="width:100%"
      height="260"
      max-height="380"
      :row-style="{height:'10px'}"
      :cell-style="{padding:'5px 0'}"
      row-key="id"
      :default-expand-all="true"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @select="handleSelection"  
      @selection-change="handleSelectionChange"
      @select-all="handleSeletionAll"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="名稱" width="150"></el-table-column>
     
    </el-table>

  data() {
    return {
      checkAll: false, //是否全選
      addformLabelWidth: "50px",
      tableData2: [
        {
          id: 1,
          name: "menu1",
          parent: 0
        },
        {
          id: 2,
          name: "menu2",
          parent: 0
        },
        {
          id: 3,
          remarks: "一級(jí)菜單",
          name: "menu3",
          parent: 0,
          children: [
            {
              id: 31,
              name: "menu31",
              parent: 3
            },
            {
              id: 32,
              name: "menu32",
              parent: 3
            }
          ]
        }  ],
      rightCheckList: [],//綁定tree-table數(shù)據(jù)
      rightobj: {}//數(shù)據(jù)對(duì)象
    };
  },
methods:{
  //初始化選擇項(xiàng)
    initCheckedBox() {
      let initList = function(data) {
        data.forEach(function(item) { //created使用箭頭函數(shù)報(bào)錯(cuò)，所以用function(){}
          item.isCheck = false; //未選中
          if (item.children) {
            initList(item.children);
          }
        });
        return data;
      };
      this.rightCheckList = initList(this.tableData2);
      console.log(this.rightCheckList);
    },
    //當(dāng)用戶手動(dòng)勾選全選 Checkbox 時(shí)觸發(fā)的事件
    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);
      }
    },
    //當(dāng)用戶手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件
    handleSelection(selection, row) {
      let selectionlist = selection;

      //轉(zhuǎn)化成{'1':{...}}的形式
      this.getRightListObj(this.rightCheckList);

      //獲取當(dāng)前選中的row
      let checkrow = [];
      checkrow.push(row);
      let goalid = checkrow[0];
      //父節(jié)點(diǎn)
      if (goalid.parent === 0) {
        console.log(goalid.isCheck);
        if (goalid.isCheck) {
          //父節(jié)點(diǎn)全選中
          this.isRowsChecked(goalid, false); //取消
        } else {
          this.isRowsChecked(goalid, true);
        }
      }
      //子節(jié)點(diǎn)
      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);
          }
        });
      }
    },
    //選中子節(jié)點(diǎn)默認(rèn)選中父節(jié)點(diǎn)
    checkedParentRow(data, list, obj) {
      data.isCheck = true;
      let parent = data.parent; //父節(jié)點(diǎn)
      obj[data.parent].isCheck = true;
      this.$refs.rightTable.toggleRowSelection(list[parent - 1], true);
    },
    //子節(jié)點(diǎn)都未被選中，父節(jié)點(diǎn)默認(rèn)取消選中
    clearParentRow(data, list, obj) {
      let falselist = [];
      let parent = data.parent; //父節(jié)點(diǎn)
      // let parentIsCheck = obj[data.parent].isCheck; //父節(jié)點(diǎn)選中狀態(tài)
      data.isCheck = false;
      this.$refs.rightTable.toggleRowSelection(data, false);
      //檢測(cè)所有子節(jié)點(diǎn)的選中狀態(tài)
      obj[parent].children.forEach(item => {
        let status = obj[item.id].isCheck;
        if (!status) {
          falselist.push(status);
        }
      });
      //當(dāng)所有子節(jié)點(diǎn)未被選中
      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);
        }
      });
    }
}