element-ui 樹形表格 多選框選不全

element-ui版本：2.13.0
在使用的樹形表格配合多選框的時候：

1. 勾選父節點菜單，不能聯動選擇到父節點
2. 勾選全選的時候，不能選全（子節點沒有選中）

百度一圈都沒有找到答案，谷歌又不能用。不過問題還是要解決的嘛，就去讀了一圈源碼，迷迷糊糊的，不過還是搞清楚了一些東西。

template：

<el-table
        ref="multipleTable"
        :data="deptData"
        tooltip-effect="dark"
        style="width: 100%"
        row-key="id"
        :treeCheckBox="false" // 改了源碼新加的
        border
        @select-all="selectDeptAll"
        @select="selectDeptCheck"
        :tree-props="{ children: 'children', hasChildren: !'hasChildren' }"
        default-expand-all
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="title" label="部門名稱" width="120">
        </el-table-column>
      </el-table>

當勾選全選按鈕的時候源碼會調用 _toggleAllSelection,而在_toggleAllSelection會調用select-all，也就是我們自己綁定的@select-all=“selectDeptAll”。然後我就把_toggleAllSelection內部的操作都給註釋了，實現自己的全選即可。（ :treeCheckBox=“false” 就是這個標識一下執不執行）

 _toggleAllSelection() {
		......
      this.table.$emit('select-all', selection);
    },

methods:

  methods: {
    selectDeptAll() { // 自定義的select-all方法
      this.deptCheckData = []; // data屬性
      if (this.$refs.multipleTable.selection.length === 0) {
        this.deptSelectItem(this.deptData, true);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    deptSelectItem(data, b) { // 遞歸選中與不選中
      data.map(item => {
        if (b) { // 選中
          if (item.children && item.children.length > 0) {
            if (this.$refs.multipleTable.selection.findIndex(se => se.id === item.id) === -1){
              this.$refs.multipleTable.selection.push(item);
            }
            this.deptSelectItem(item.children, b);
          } else {
            if (this.$refs.multipleTable.selection.findIndex(se => se.id === item.id) === -1){
              this.$refs.multipleTable.selection.push(item);
            }
          }
        } else { // 不選中
          if (item.children && item.children.length > 0) {
            this.$refs.multipleTable.toggleRowSelection(item, false);
            this.deptSelectItem(item.children, b);
          } else {
            this.$refs.multipleTable.toggleRowSelection(item, false);
          }
        }
      });
    },
    selectDeptCheck(val, row) { // 自定義select方法
      if (val.findIndex(item => item.id === row.id) === -1) {
        // 父節點取消選擇
        this.deptSelectItem([row], false);
      } else {
        // 選擇父節點
        this.deptSelectItem([row], true);
      }
   }

data數據：

[
	{
	"id": "1",
	"title": "開發部",
	"text": "開發部",
	"order": 1,
	"children": [
			{
			"id": "2",
			"title": "開發一部1",
			"text": "開發一部1",
			"order": 1,
			"children": [
					{
					"id": "7",
					"title": "dsad",
					"text": "dsad",
					"parentId": "2",
					"hasParent": true,
					"hasChildren": false,
					}
			],
			"parentId": "1",
			"hasParent": true,
			"hasChildren": true,
			},
			{
			"id": "3",
			"title": "開發二部",
			"text": "開發二部",
			"order": 2,
			"parentId": "1",
			"hasParent": true,
			"hasChildren": false,
			}
	],
	"parentId": "0",
	"hasParent": true,
	"hasChildren": true,
	},
	{
	"id": "4",
	"title": "市場部",
	"text": "市場部",
	"order": 2,
	"parentId": "0",
	"hasParent": false,
	"hasChildren": false
	},
	{
	"id": "5",
	"title": "人事部",
	"text": "人事部",
	"order": 3,
	"parentId": "0",
	"hasParent": false,
	"hasChildren": false,
	},
	{
	"id": "6",
	"title": "測試部",
	"text": "測試部",
	"order": 4,
	"parentId": "0",
	"hasParent": false,
	"hasChildren": false,
	}
]

還有一個很重重重要的事情：
因爲我修改了源碼，所以要替換lib文件
node_modules -> element-ui ->lib

修改後的源碼文件：這裏
如果你想自己動手，可以自己修改一下：傳送門
修改的地方：

1.table -> src -> store -> watcher

    _toggleAllSelection() {
      const states = this.states;
      const { data = [], selection } = states;
      // when only some rows are selected (but not all), select or deselect all of them
      // depending on the value of selectOnIndeterminate
      const value = states.selectOnIndeterminate ? !states.isAllSelected : !(states.isAllSelected || selection.length);
      states.isAllSelected = value;
      if (states.treeCheckBox) { // 這裏
        let selectionChanged = false;
        data.forEach((row, index) => {
          if (states.selectable) {
            if (states.selectable.call(null, row, index) && toggleRowStatus(selection, row, value)) {
              selectionChanged = true;
            }
          } else {
            if (toggleRowStatus(selection, row, value)) {
              selectionChanged = true;
            }
          }
        });
        if (selectionChanged) {
          this.table.$emit('selection-change', selection ? selection.slice() : []);
        }
      }
      this.table.$emit('select-all', selection);
    },

2. table -> src -> table.vue

在props裏面添加：

treeCheckBox: {
        type: Boolean,
        default: true
      }

在data()裏面添加 treeCheckBox: this.treeCheckBox：

 data() {
      const { hasChildren = 'hasChildren', children = 'children' } = this.treeProps;
      this.store = createStore(this, {
        rowKey: this.rowKey,
        defaultExpandAll: this.defaultExpandAll,
        selectOnIndeterminate: this.selectOnIndeterminate,
        // TreeTable 的相關配置
        indent: this.indent,
        lazy: this.lazy,
        lazyColumnIdentifier: hasChildren,
        childrenColumnName: children,
        treeCheckBox: this.treeCheckBox // 添加這個
      });

廢話：
唉，剛好今年畢業還遇上今年疫情，身爲一個破應屆生是真的難啊！
如果你有什麼更好的方法，請不吝嗇在評論中指教。
加油，加油，加油！！！