element Table循环表格、跨表格全选按钮功能实现

---

前言

提示：遇到产品提到需求，根据批量查询条件搜索，渲染N个表格子数据，父级数据在表格上边显示，表格子数据循环，并且实现跨表格选中提交功能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、跨表格全选按钮功能

示例：@selection-change选中方法众所周知，一般情况都是对单个表格实现，很少循环操作表格，这里关键是方法明($event,index)就能识别是哪一条数据点击的表格了。

二、具体代码

1.表格循环

直接上代码（示例）：

<div>
    <el-tooltip effect="dark" content="全选" placement="top">
        <el-button type="primary" @click="checkAll">全选</el-button>
    </el-tooltip>
    <el-tooltip effect="dark" content="取消全选" placement="top">
        <el-button type="primary" @click="notCheckAll">取消全选</el-button>
    </el-tooltip>
</div>
<div v-for="(item,index) in dataList" :key="index" style="padding-bottom: 10px;">
    <div style="padding: 5px 0px;background: #fff;">
        <el-row>
            <el-col :span="6">
                <el-tag>商品信息</el-tag>
                <span>{{item.sapNo}}</span>
            </el-col>
            <el-col :span="6">
                <el-tag>金额</el-tag>
                <span>{{item.deliverMoney}}</span>
            </el-col>
            <el-col :span="6">
                <el-tag>发票抬头</el-tag>
                <span>{{item.invoiceHand}}</span>
            </el-col>
            <el-col :span="6">
                <el-tag>主单号</el-tag>
                <span>{{item.masterId}}</span>
            </el-col>
        </el-row>
    </div>
    <el-table :data="item.List" ref="multipleTable" style="width: 100%"
        @selection-change="handleSelectionChange($event,index)" row-key="id">
        <el-table-column type="selection" width="55" :reserve-selection="true">
        </el-table-column>
        <el-table-column prop="lineItem" label="行号">
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" show-overflow-tooltip
            min-width="180px">
        </el-table-column>
        <el-table-column prop="totalMoney" label="金额">
        </el-table-column>
        <el-table-column prop="skuNum" label="数量">
        </el-table-column>
    </el-table>
</div>

2.data数据格式

数据格式如下（示例）：

dataList: [{
    "sapNo": '123',
    "deliverMoney": '99',
    "invoiceHand": '你猜',
    "masterId": '321',
    "List": [{
        "lineItem": '1',
        "productName": '我的天',
        "totalMoney": '666',
        "skuNum": '857',
    }, {
        "lineItem": '3',
        "productName": '不知道',
        "totalMoney": '888',
        "skuNum": '564',
    }],
}, {
    "sapNo": '456',
    "deliverMoney": '100',
    "invoiceHand": '你不猜',
    "masterId": '654',
    "List": [{
        "lineItem": '2',
        "productName": '不清楚',
        "totalMoney": '999',
        "skuNum": '789',
    }],
}],
multipleSelection: [],

3.方法定义

代码如下（示例）：

handleSelectionChange(e, index) {
	//（这里是对于取子集每一行携带父级字段进行批量提交）
    let data = JSON.parse(JSON.stringify(this.dataList))
    data[index].List = e;
    this.multipleSelection[index] = data[index];
    // console.log(JSON.stringify(this.multipleSelection))

	//this.multipleSelection[index] = e;（这行代码针对以下操作）
    //es5遍历取值（这里和下边的方法是对于取子集每一行进行合并操作，批量提交）
    // let arry = []
    // this.multipleSelection.forEach(ele => {
    //     ele.forEach(item => {
    //         arry.push(item)
    //     });
    // });
    
    //es6flat铺平数组方法
    // let arry = this.multipleSelection.flat();
    // console.log(JSON.stringify(arry))
},
//全部选中状态true
checkAll() {
    let dataList = this.dataList;
    for (var i in dataList) {
        for (var j in dataList[i].List) {
            this.$refs.multipleTable[i].toggleRowSelection(dataList[i].List[j],
                true);
        }
    }
},
//全部选中状态false
notCheckAll() {
    let dataList = this.dataList;
    for (var i in dataList) {
        for (var j in dataList[i].List) {
            this.$refs.multipleTable[i].clearSelection();
        }
    }
},

4.实例

提示：以下是子集每一行携带父级字段进行批量提交实例

[{"sapNo":"123","deliverMoney":"99","invoiceHand":"你猜","masterId":"321","List":[{"lineItem":"1","productName":"我的天","totalMoney":"666","skuNum":"857"},{"lineItem":"3","productName":"不知道","totalMoney":"888","skuNum":"564"}]},{"sapNo":"456","deliverMoney":"100","invoiceHand":"你不猜","masterId":"654","List":[{"lineItem":"2","productName":"不清楚","totalMoney":"999","skuNum":"789"}]}]

提示：以下是子集合并成一个数组进行批量提交实例，注意要更改代码，如下：
（具体代码有解释）

this.multipleSelection[index] = e;

[{"lineItem":"1","productName":"我的天","totalMoney":"666","skuNum":"857"},{"lineItem":"3","productName":"不知道","totalMoney":"888","skuNum":"564"},{"lineItem":"2","productName":"不清楚","totalMoney":"999","skuNum":"789"}]

5.全选操作后提交判断

提示：这里点击全选再点击不全选，只会对第一种携带父级参数存在问题，父级参数不会清空，所以再提交的时候要判断一下子集的List是否为空，如下：

if (this.multipleSelection.length == 0) {
    this.$message({
        type: 'warning',
        message: '请选中数据再进行操作!'
    });
} else {
    let newArry = [];
    this.multipleSelection.forEach(item => {
        if (item.List.length != 0) {
            newArry.push(item)
        }
    });
    if (newArry.length == 0) {
        this.$message({
            type: 'warning',
            message: '请选中数据再进行操作!'
        });
        return
    }
}

---

总结

慢慢积累，慢慢成长，慢慢蜕变。