elementPlus table多选状态修改

<template>
    <div class="" v-loading="loading">
        <el-button @click="toggleSelection" type="primary">确定选择</el-button>
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="80vh"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ background: '#fafafa', color: '#222', 'font-weight': '500', 'border': 'none' }">
            <el-table-column type="selection" width="30" />
            <el-table-column property="name" label="福利名称" width="140" />
            <el-table-column property="con" label="福利属性" width="80" />
            <el-table-column property="num1" label="适用特权">
                <template #default="scope">
                    <div class="flex" style="width:100%;flex-wrap: wrap;" @click="privilegeChange(scope.row)">
                        <div class="color_green3 pd-rl-5"
                            v-for="ele in scope.row.num1.split(',').map(val => this.privilegeList[val])" :key="ele">
                            {{ ele }}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="status" label="次数" width="80" />
            <el-table-column property="status" label="张数" width="80" />
            <el-table-column property="" label="状态" width="60">
                <template #default="scope">
                    <div class="color_green3" v-if="scope.row.status == 0">开启</div>
                    <div class="color_red1" v-if="scope.row.status == 1">关闭</div>
                </template>
            </el-table-column>
            <el-table-column property="" width="100" fixed="right" label="操作">
                <template #default="scope">
                    <div class="flex-between ft_14">
                        <el-button type="primary" v-if="idList.findIndex(ele => ele == scope.row.id) == -1"
                            @click="seChange(scope.row)">
                            确定选择
                        </el-button>
                        <el-button type="warning" class="color_blue1" v-else @click="seChange(scope.row)">
                            取消选择
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end pd_top_30  pd_rl_30">
            <el-pagination v-model:currentPage="page.page" v-model:page-size="page.size" :page-sizes="page.sizes"
                layout="total, sizes,prev, pager, next" background :total="page.total" />
        </div>

    </div>
</template>

<script>


export default {
    props: {
        selectId: {
            default: null,
            type: String
        }
    },
    components: {},
    data() {
        return {
            idList: [],
            selectList: [],
            multipleSelection: [],
            privilegeList: ['每月券包', '免费等待', '待商榷', '周三会员日', '百元券包', '接驾慢必赔', '专属客服', '投诉速应'],
            tableData: [
                {
                    id: 1,
                    name: '福利名称很好用',
                    con: "体验券",
                    num1: "0,1,2",
                    date1: "2022-12-12 10:10:10",
                    date2: "2022-12-12 10:10:10",
                    status: '0',
                },
                {
                    id: 2,
                    name: '福利名称很好用的',
                    con: "福利券",
                    num1: "0,1,2,3,4,5,6,7",
                    date1: "2022-12-12 10:10:10",
                    date2: "2022-12-12 10:10:10",
                    status: '1',
                },
            ],
            page: {
                page: 1,
                size: 20,
                total: 60,
                sizes: [10, 20, 30, 50, 100]
            },
        }
    },
    computed: {},
    watch: {},
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val

        },
        async seChange(row) {
            const index = this.idList.findIndex(ele => ele == row.id)
            const selectIndex = this.selectList.findIndex(ele => ele.id == row.id)
            if (selectIndex == -1) {
                this.idList.push(row.id)
                this.selectList.push(row)
            } else {
                this.idList.splice(index, 1)
                this.selectList.splice(selectIndex, 1)

            }
            await this.$refs.multipleTableRef.clearSelection()
            this.$nextTick(() => {
                this.selectList.forEach((val) => {
                    this.$refs.multipleTableRef.toggleRowSelection(val, undefined)
                })
            })
        },
        toggleSelection() {
            this.selectList = [...this.multipleSelection]
            const ar = []
            this.selectList.map(ele => {
                ar.push(ele.id)
            })
            this.idList = ar
        },
        toggle() {
            this.idList = this.selectId.split(',').map(Number)
            this.selectList = this.tableData.filter(val => {
                for (let i = 0; i < this.idList.length; i++) {
                    if (val.id == this.idList[i]) {
                        return val
                    }
                }
            })
            if (this.selectList) {
                this.selectList.forEach((row) => {
                    this.$refs.multipleTableRef.toggleRowSelection(row, undefined)
                })
            }
            // else {
            //     this.$refs.multipleTableRef.clearSelection()
            // }
        }
    },
    created() {

    },
    mounted() {
        if (this.selectId) this.toggle()
    },
    beforeUnmount() { },
    activated() { }
}
</script>
<style lang='scss' scoped></style>

用法2

<template>
    <div class="member">
        <div class="member_top">
            <div class="member_top_c">
                <div style="float: right;" class="pd_top_10 pd_bot_10 mg_r_15">
                    <el-input class="width-200" placeholder="输入优惠券名称"></el-input>
                </div>
                <div class=" ">
                    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;height:350px" class="border"
                        @selection-change="handleSelectionChange"
                        :header-cell-style="{ background: '#F0F2F5', color: '#111', 'font-weight': '400', 'border': 'none' }">
                        <el-table-column type="selection" width="50" />
                        <el-table-column property="id" label="优惠券" align="center" />
                        <el-table-column property="name" label="备注名称" align="center" />
                        <el-table-column property="phone" label="适用产品" align="center" />
                        <el-table-column property="payment" label="优惠规则" align="center" />
                        <el-table-column property="payment" label="领取人限制" align="center">
                            <template #default="scope">
                                {{ list[scope.row.type] }}
                            </template>
                        </el-table-column>
                        <el-table-column property="payment" label="剩余券数" align="center" />
                        <el-table-column property="type" label="赠送券数" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.value"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="flex-end pd_top_30 pd_bot_50 pd_rl_30">
                        <el-pagination background layout="total, sizes,prev, pager, next" :total="50" />
                    </div>
                </div>
            </div>
            <div class="member_top_r">
                <div class="member_top_r_xz flex jst_c_bet pd_rl_10">
                    <div>已选择：{{ chooseList.length || 0 }}个</div>
                    <div @click="clearAllBtn">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </div>
                </div>
                <ul>
                    <li v-for="ele in chooseList" class="meb_li" :key="ele.id">
                        <div>{{ ele.name }}</div>
                        <div @click="clearBtn(ele)">
                            <el-icon class="cur_poi">
                                <CircleClose />
                            </el-icon>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            list: ['全部会员', 'VIP1(普通会员)', 'VIP1(黄金会员)', 'VIP1(白金会员)', 'VIP1(钻石会员)'],
            chooseList: [],
            active: 0,
            dialogVisible: false,
            form: {
                name: '',
                num: '1',
                desc: ''
            },
            tableData: [{
                id: 1,
                name: '店铺优惠1',
                phone: '13292452356',
                payment: '1',
                type: 1,
                value: 1
            }, {
                id: 2,
                name: '店铺优惠2',
                phone: '13292452356',
                payment: '1',
                type: 1,
                value: 1
            }, {
                id: 3,
                name: '店铺优惠3',
                phone: '13292452356',
                payment: '1',
                type: 1,
                value: 1
            }]
        }
    },
    computed: {},
    watch: {},
    methods: {
        clearAllBtn() {
            this.chooseList.length = 0
            this.$refs.multipleTableRef.clearSelection()
        },
        async clearBtn(row) {
            let selectList = [...this.chooseList]
            const selectIndex = this.chooseList.findIndex(ele => ele.id == row.id)
            selectList.splice(selectIndex, 1)
            await this.$refs.multipleTableRef.clearSelection()
            this.$nextTick(() => {
                selectList.forEach((val) => {
                    this.$refs.multipleTableRef.toggleRowSelection(val, undefined)
                })
            })
        },
        handleSelectionChange(val) {
            this.chooseList = val
        },
        handleClose() {
            this.dialogVisible = false
        }
    },
    created() {
    },
    mounted() {
    },
    beforeUnmount() { },
    activated() { }
}
</script>
<style lang='scss' scoped>
.member {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .member_top {
        width: 100%;
        height: 520px;
        display: flex;
        overflow: hidden;

        .member_top_l {
            border-right: 1px solid #e3e2e8;
            border-bottom: 1px solid #e3e2e8;
            overflow-y: auto;
        }

        .member_top_c {
            flex: 1;
            height: 100%;
            border-bottom: 1px solid #e3e2e8;
        }

        .member_top_r {
            width: 188px;
            height: 100%;
            border-left: 1px solid #e3e2e8;
            border-bottom: 1px solid #e3e2e8;

            >ul {
                height: 473px;
                overflow-y: auto;
                padding: 0px 10px;

                >li {
                    padding: 5px 0px;
                }
            }

        }

        .member_top_r_xz {
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #333;

            >div:nth-child(2) {
                cursor: pointer;
            }

            >div:nth-child(2):hover {
                color: #67b2ff;
            }
        }
    }

}

::v-deep .el-dialog__body {
    padding: 0px;
}

::v-deep .el-dialog__footer {
    text-align: center;
}

.border {
    border: 1xp solid;
}

ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.meb_li {
    display: flex;
    justify-content: space-between;
}

.meb_li:hover {

    color: red;
}

.cur_poi {
    cursor: pointer;
}

.jst_c_bet {
    justify-content: space-between;
}
</style>