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);
    },
  1. 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 // 添加这个
      });

废话:
唉,刚好今年毕业还遇上今年疫情,身为一个破应届生是真的难啊!
如果你有什么更好的方法,请不吝啬在评论中指教。
加油,加油,加油!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章