ELement中的table表格中实现懒加载和多选框的并用

目的

ELement中的table表格中实现懒加载和多选框的并用

效果图

操作前

操作后

思路

note：图中的红色勾选框命名为父节点，黄色勾选框命名为子节点，方便后续简称描述。

1.点击父节未进行懒加载时点自动展开子节点并勾选子节点

点击勾选框，判断点击的是否是父节点。
true：判断是有子节点
	false：赋予children值，并打开下拉框
		判断select数组中是否存在该行数据
			fasle：循环子节点列表
				继续判select中是否存在子节点
					true：用splice删掉select中的该数据
					false：该行数据push进select
刷新懒加载
false 说明该行数据为子节点

2.点击的是子节点

点单个勾选框获取箱数默认值
找到此子条目的父条目
计算子数据行有多少已经被选中
得到父行数据对象
如果已选条目中已经有了所有子条目，则目录应被选中
如果没有子条目，则目录应不选

代码

html

     <el-table @select="selectRow" ref="multipleTable" :height="heightData"
                          :data="receiptList" style="width: 100%" 
                          @selection-change="handleSelectionChange" 
                          row-key="id" lazy :load="load" 
                          :tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
                          @select-all="selectAll"
      ></el-table>

运用到的参数说明：

`:height`：根据页面高度动态设置该table的高度，以展示纵向下拉框
`@select`:选择按钮（该出在本次中主要用来做单选父节点的逻辑操作）
`@selection-change`：列表数据的选择，返回所勾选的数组
`row-key`：该key不可重复，否则就会出现数据出错问题
`:load`：懒加载函数
`:tree-props`：映射懒加载中的`children`、`hasChildren`在table数据中的参数
`:expand-row-keys`：
`@select-all`：列表全选，该需求暂时不需要这个操作，就未写。思路是循环所有的父节点查找到相应的子节点，并给予勾选状态

node:只展示el-tabel，表格中的数据就不一一展示了

js

	 selectRow: function (selection, row) {
            // multipleTable
            var states = this.$refs.multipleTable.store.states;
            var children = states.lazyTreeNodeMap[row.id];
            var select = states.selection;

            //如果被点击的是标题行
            //因为表中存在标题行，所以设置一个type参数，0为标题行
            if (row && row.type === 0) {
                if (row.hasChildren) {
                    request({
                        url: IntransitSupplierBillItemList,
                        params: {
                            supplierID: row.supplierID
                        },
                    }).then(function (childrenRes) {
                        //如果选择数组中没有此行数据，则将其子数据都加入选择数组

                        if (row.children.length !== childrenRes.data.length) {
                            row.children = childrenRes.data
                            vm.$set(
                                vm.$refs.multipleTable.store.states.lazyTreeNodeMap,
                                row.supplierID,  //父节点id
                                row.children  //新数组
                            );
                        }
                        vm.$refs['multipleTable'].toggleRowExpansion(row, true);

                        if (select.indexOf(row) !== -1) {

                            row.children.forEach(function (nodeListItem) {
                                console.log(nodeListItem)
                                if(nodeListItem.receiveBoxCount === 0) {
                                    // console.log(nodeListItem.receiveBoxCount )
                                    nodeListItem.receiveBoxCount = nodeListItem.qty
                                }

                                if (select.indexOf(nodeListItem) === -1) {
                                    select.push(nodeListItem);
                                    vm.ReceiveShipBillData.list.push(nodeListItem)
                                } else {
                                    select.splice(select.indexOf(nodeListItem), 1)
                                    vm.ReceiveShipBillData.list.splice(vm.ReceiveShipBillData.indexOf(nodeListItem), 1)
                                }
                            })
                        } else {
                            row.children.forEach(function (nodeListItem) {
                                select.splice(select.indexOf(nodeListItem), 1)
                                vm.ReceiveShipBillData.list.splice(vm.ReceiveShipBillData.list.indexOf(nodeListItem), 1)
                            })
                        }


                    })
                }
            }
            // return
            //如果被点击的是子行
            if (row && row.type != 0) {
                //点单个勾选框获取箱数默认值
                if(selection.indexOf(row) !== -1 && row.receiveBoxCount === 0) {
                    row.receiveBoxCount = row.qty
                }
                //找到此子条目的父条目
                var parentId = '';
                for (var id in states.lazyTreeNodeMap) {
                    states.lazyTreeNodeMap[id].forEach(function (d, i) {
                        if (d == row) {
                            parentId = id;
                        }
                    });
                }
                let sum = 0;
                //计算子数据行有多少已经被选中
                states.lazyTreeNodeMap[parentId].forEach(function (d, i) {
                    if (selection.indexOf(d) >= 0) {
                        sum++;
                    }
                });
                //得到父行数据对象
                var parentObj = states.data.filter(function (d, i, arr) {
                    return d.supplierID == parentId;    //子节点的父属性
                });
                var parentNode = parentObj[0];
                // 如果已选条目中已经有了所有子条目，则目录应被选中
                if (sum === states.lazyTreeNodeMap[parentId].length) {
                    if (select.indexOf(parentNode) == -1 && parentNode) {
                        select.push(parentNode);
                    }
                } else if (sum > 0) {
                    if (this.ReceiveShipBillData.list.indexOf(parentNode) === -1) {
                        this.ReceiveShipBillData.list.push(parentNode)
                    }
                } else {
                    // 如果没有子条目，则目录应不选
                    var key = select.indexOf(parentNode);
                    if (key >= 0) {
                        select.splice(key, 1);
                        this.ReceiveShipBillData.list.splice(this.ReceiveShipBillData.list.indexOf(parentNode), 1)
                    }
                }
            }


        },