【el-table嵌套父子勾选 并实现数据携带勾选的到另一张表中 】复制即可用

本文以参与[新人创作礼]活动，一起开启掘金创作之路。

看效果图gif代码 以及json数据都贴上了 有问题私信

<template xmlns="http://www.w3.org/1999/html">
    <div class="app-container">
        <div class="divMain mgTop_20 middle">
            <el-table ref="table" :data="tableData" style="width: 100%" @select="selectFather" @select-all="selectAllFather">
                <el-table-column type="selection" width="50" />
                <el-table-column prop="items" type="expand">
                    <template slot-scope="scope">
                        <el-table :ref="`childTable${scope.$index}`" :data="scope.row.subList" style="width: 100%" stripe @select="selectChild" @select-all="selectAllChild($event,scope.$index)">
                            <el-table-column type="selection" width="50" />
                            <el-table-column prop="customerOrderNo" label="采购单号" width="150" />
                            <el-table-column prop="productCode" label="商品编码" />
                            <el-table-column prop="productName" label="商品名称" />
                            <el-table-column prop="brandName" label="品牌" />
                            <el-table-column prop="model" label="型号" />
                            <el-table-column prop="specification" label="规格" />
                            <el-table-column prop="colorNo" label="色号" />
                            <el-table-column prop="batchNo" label="批号" />
                            <el-table-column prop="purchaseQuantity" label="采购数量" width="90" />
                            <el-table-column prop="appointmentDeliveryQuantity" label="预约提货数量" width="110" />
                            <el-table-column prop="unit" label="单位" width="100" />
                            <el-table-column prop="settlementPrice" label="单价(元)" width="90" />
                            <el-table-column prop="totalPrice" label="合计(元)" width="90" />
                            <el-table-column prop="isException" label="是否异常" width="100" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="门店" prop="storeName" />
                <el-table-column label="业务单号" prop="businessNo" />
                <el-table-column label="收货人" prop="receiverName" />
                <el-table-column label="收货地址" prop="receiverAddress" />
            </el-table>
        </div>
        <div class="divMain mgTop_20">
            <p>发起配送单</p>
            <el-table :data="ruleForm.items" style="width: 100%" class="mgTop_20">
                <el-table-column prop="productCode" label="商品编码" />
                <el-table-column prop="productName" label="商品名称" />
                <el-table-column prop="brandName" label="品牌" />
                <el-table-column prop="model" label="型号" />
                <el-table-column prop="specification" label="规格" />
                <el-table-column prop="purchaseQuantity" label="采购数量" />
                <el-table-column prop="appointmentDeliveryQuantity" label="预约提货数量" width="110" />
                <el-table-column prop="unit" label="单位" />
                <el-table-column prop="settlementPrice" label="单价(元)" />
                <el-table-column prop="totalPrice" label="合计(元)" />
            </el-table>
        </div>
    </div>
</template>

<script>
const mock = require('./data.json')
export default {
    name: 'PriceList',
    data () {
        return {
            ruleForm: {
                items: []
            },
            selectAllChildMap: new Map(),
            tableData: [],
        }
    },

    created () {
        this.tableData = mock.list
    },
    methods: {
        selectFather (selection, row) {
            const isCheck = selection.includes(row)
            this.tableData.forEach((item, index) => {
                if (item.id === row.id) {
                    this.$refs.table.toggleRowExpansion(item, true)
                    const tempList = row.subList
                    this.$nextTick(() => {
                        if (tempList.length !== 0) {
                            tempList.forEach((childItem) => {
                                this.selectAllChildMap.set(index, item)
                                this.$refs[`childTable${index}`].toggleRowSelection(childItem, isCheck)
                            })
                        }
                    })
                }
            })
            if (isCheck) {
                this.validIs(row.subList)
            } else {
                this.cleanIs(null, row)
            }
        },
        selectAllFather (selection) {
            this.tableData.forEach(async (item, index) => {
                await this.$refs['table'].toggleRowExpansion(item, true)
                if (selection.length !== 0) {
                    this.selectFather([item], item)
                    this.selectAllChild(item.subList, index)
                } else {
                    this.cleanIs(null, item)
                }
                this.$refs[`childTable${index}`].clearSelection()
            })
        },
        selectAllChild (selection, clickIndex) {
            if (selection.length > 0) {
                const fatherRow = this.tableData.find(item => {
                    return item.id === selection[0].parentId
                })
                this.selectAllChildMap.set(clickIndex, fatherRow)
                this.$refs.table.toggleRowSelection(this.selectAllChildMap.get(clickIndex), true)
                // 非空时候 检验明细是否存在
                this.validIs(selection)
            } else {
                this.cleanIs(clickIndex)
                this.$refs.table.toggleRowSelection(this.selectAllChildMap.get(clickIndex), false)
                this.selectAllChildMap.delete(clickIndex)
            }
        },
        selectChild (selection, row) {
            //校验明细中是否存在  存在则删除 否则添加
            if (this.ruleForm.items.length === 0) {
                this.ruleForm.items.push(row)
            } else {
                const ids = this.ruleForm.items.map(f => f.customerOrderItemId)
                ids.includes(row.customerOrderItemId) ?
                    this.ruleForm.items = this.ruleForm.items.filter(f => f.customerOrderItemId !== row.customerOrderItemId) :
                    this.ruleForm.items.push(row)
            }
            // --
            const isCheck = selection.length > 0
            this.tableData.forEach((item, index) => {
                if (item.id === row.parentId) {
                    this.selectAllChildMap.set(index, item)
                    this.$refs.table.toggleRowSelection(item, isCheck)
                }
            })
        },
        //一级勾选框和子级头部勾选框检验
        validIs (selection) {
            // 非空时候 检验明细是否存在
            if (this.ruleForm.items.length === 0) {
                this.ruleForm.items.push(...selection)
            } else {
                let ids = this.ruleForm.items.map(f => f.customerOrderItemId)
                selection.forEach(f => {
                    if (ids.indexOf(f.customerOrderItemId) !== -1) {
                        delete this.ruleForm.items[ids.indexOf(f.customerOrderItemId)]
                    }
                })
                this.ruleForm.items = this.ruleForm.items.filter(f => f.customerOrderItemId)
                ids = this.ruleForm.items.map(f => f.customerOrderItemId)
                this.ruleForm.items.push(...selection)
            }
        },
        //一级勾选框和子级头部勾选清空方法
        cleanIs (clickIndex, fatherRow) {
            const childIdList = clickIndex || clickIndex === 0 ?
                this.tableData[clickIndex].childIdList
                : fatherRow.childIdList
            let ids = this.ruleForm.items.map(f => f.customerOrderItemId)
            childIdList.forEach(f => {
                if (ids.indexOf(f) !== -1) {
                    delete this.ruleForm.items[ids.indexOf(f)]
                }
            })
            this.ruleForm.items = this.ruleForm.items.filter(f => f.customerOrderItemId)
            ids = this.ruleForm.items.map(f => f.customerOrderItemId)
        }
    }
}
</script>

<style lang="scss" scoped>
.mgTop_20 {
    margin-top: 20px;
}
.app-container {
    padding: 30px;
    background: #ccc;
}
.middle {
    ::v-deep .el-table .el-table__expanded-cell {
        padding-top: 10px;
        padding-left: 35px;
        padding-bottom: 10px;
    }

    ::v-deep .el-table .el-table__expanded-cell .el-table {
        margin: 0;
    }
}
</style>


```json
{
        "list": [
            {
                "receiverAddress": "",
                "businessNo": "HYXXcc911",
                "customerOrderType": "",
                "subList": [
                    {
                        "batchNo": "",
                        "brandName": "",
                        "customerOrderType": "N",
                        "customerOrderItemId": 1361,
                        "productId": 83,
                        "totalPrice": 2136.712,
                        "customerOrderId": 246,
                        "isException": true,
                        "specification": "",
                        "customerOrderStatus": 60,
                        "warehouseStockId": 75,
                        "parentId": "HYXXcc911",
                        "productName": "",
                        "unit": "",
                        "productCode": "",
                        "appointmentDeliveryQuantity": 2,
                        "purchaseQuantity": 3,
                        "model": "",
                        "settlementPrice": 1068.356,
                        "colorNo": "",
                        "customerOrderNo": "CG202208310002-1"
                    }
                ],
                "address": "金尚路99号",
                "receiverName": "高慧的",
                "childIdList": [
                    1361
                ],
                "storeName": "包头店（摘牌）",
                "id": "HYXXcc911",
                "storeId": 512,
                "warehouseName": "",
                "warehouseCode": "1010"
            },
            {
                "receiverAddress": "",
                "businessNo": "HY长安",
                "customerOrderType": "",
                "subList": [

                  {
                        "batchNo": "歌",
                        "brandName": "测试1",
                        "customerOrderType": "N",
                        "customerOrderItemId": 1400,
                        "productId": 83,
                        "totalPrice": 1536.512,
                        "customerOrderId": 285,
                        "isException": true,
                        "specification": "花洒110",
                        "customerOrderStatus": 59,
                        "warehouseStockId": 82,
                        "parentId": "HY长安",
                        "productName": "测试花洒",
                        "unit": "2",
                        "productCode": "013200300600002",
                        "appointmentDeliveryQuantity": 2,
                        "purchaseQuantity": 6,
                        "model": "花洒110",
                        "settlementPrice": 768.256,
                        "colorNo": "歌",
                        "customerOrderNo": "CG202209190011-1"
                    },
                    {
                        "batchNo": "VB",
                        "brandName": "测试1",
                        "customerOrderType": "N",
                        "customerOrderItemId": 1404,
                        "productId": 83,
                        "totalPrice": 4609.536,
                        "customerOrderId": 289,
                        "isException": false,
                        "specification": "花洒110",
                        "customerOrderStatus": 60,
                        "warehouseStockId": 97,
                        "parentId": "HY长安",
                        "productName": "测试花洒",
                        "unit": "2",
                        "productCode": "013200300600002",
                        "appointmentDeliveryQuantity": 6,
                        "purchaseQuantity": 6,
                        "model": "花洒110",
                        "settlementPrice": 768.256,
                        "colorNo": "A",
                        "customerOrderNo": "CG202209200001-1"
                    },
                    {
                        "batchNo": "PO202209200002-1",
                        "brandName": "西南非",
                        "customerOrderType": "C",
                        "customerOrderItemId": 1405,
                        "productId": 85,
                        "totalPrice": -126196.7296,
                        "customerOrderId": 290,
                        "isException": false,
                        "specification": "门套0001",
                        "customerOrderStatus": 60,
                        "warehouseStockId": 99,
                        "parentId": "HY长安",
                        "productName": "门套0001",
                        "unit": "6",
                        "productCode": "039000190700002",
                        "appointmentDeliveryQuantity": 1,
                        "purchaseQuantity": 1,
                        "model": "门套-紫檀-0001",
                        "settlementPrice": -126196.7296,
                        "colorNo": "-",
                        "customerOrderNo": "CG202209200004-1"
                    }
                ],
                "address": "金尚路99号",
                "receiverName": "荔枝",
                "childIdList": [
                    1400,
                    1404,
                    1405
                ],
                "storeName": "包头店（摘牌）",
                "id": "HY长安",
                "storeId": 512,
                "warehouseName": "",
                "warehouseCode": "1010"
            }
        ]
}