记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法

因为项目需要出现了这么一个问题，场景是这样，点击按钮弹出 一个 多选 table 数据列表页面,选中商品点击确定需要默认选中，但是每次点击都会重新加载数据导致把之前的默认选中会覆盖掉，以下是这次问题的一个解决办法，如果有更好的建议欢迎留言

//页面弹窗多选 table 页面
<el-dialog @open="getGoods" title="选择商品" :visible.sync="goodsDialog.visible" :close-on-click-modal="false" center>
        <el-form size="small" :inline="true" :model="search" @submit.native.prevent>
            <el-form-item>
                <div class="input-item">
                    <el-input @clear="toSearch" clearable @keyup.enter.native="toSearch" size="small" placeholder="请输入商品ID/名称搜索" v-model="search.keyword">
                        <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
                    </el-input>
                </div>
            </el-form-item>
        </el-form>
        <el-table :data="goodsDialog.list" v-loading="goodsDialog.loading" @selection-change="goodsSelectionChange">
            <el-table-column label="选择" type="selection"></el-table-column>
            <el-table-column label="ID" prop="id" width="100px"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
        </el-table>
        <div style="text-align: center; margin-top: 15px;">
            <el-pagination v-if="goodsDialog.pagination" style="display: inline-block" background @current-change="goodsDialogPageChange" layout="prev, pager, next, jumper" :page-size.sync="goodsDialog.pagination.pageSize" :total="goodsDialog.pagination.totalCount">
            </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="goodsDialog.visible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="addGoods" size="small">确 定</el-button>
        </div>
    </el-dialog>

//js 实现
methods: {
        showGoodsDialog(index) {
            this.goodsDialog.visible = true;
            this.goodsDialog.index = index;
        },
        goodsSelectionChange(val) {
            this.goodsDialog.selected = val;
        },
        getGoods() {
            let self = this;
            self.goodsDialog.loading = true;
            request({
                params: {
                    r: 'xxx/zzz/ccc',
                },
                method: 'get',
            }).then(e => {
                self.goodsDialog.loading = false;
                self.goodsDialog.list = e.data.data.list;
            }).catch(e => {
                console.log(e);
            });
        },
        //这里是重点
       toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                //关键代码 tips：网上给出的解释是：需要使用tableData 原有的数据，不可以使用传入的参数所以一直选不中
                    this.nextTick(()=>{
                        this.$refs.multipleTable.toggleRowSelection(this.goodsDialog.list.find(item=>{
                            return row.id === item.id;
                        }),true);
                    })
                });
            }
        },
	}