vue el-checkbox-group表格外部的全选/反选

多选框组

• el-checkbox 的 label属性是label标签对应的值
• 如果标签没有值label属性也必须要写否则点击一个复选框会选中所有的
• 再将label标签用css样式隐藏掉 table .el-checkbox__label { display: none; }

<template>
    <div>
        <div class="checkbox">
            <el-checkbox v-model="checkAllFlag" @change="handleCheckAllChange">
                全选
            </el-checkbox>
        </div>
        <!--数据列表-->
        <el-checkbox-group v-model="checkArr" @change="handleCheckedChange">
            <table>
                <tbody>
                    <tr>
                        <th></th>
                        <th>名称</th>
                        <th>日期</th>
                    </tr>
                    <tr v-for="(item, index) in sharedList" :key="index">
                        <td>
                            <el-checkbox :label="item.Id"></el-checkbox>
                        </td>
                        <td>{{ item.Name }}</td>
                        <td>{{ item.Time }}</td>
                    </tr>
                </tbody>
            </table>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checkAllFlag: false,
            checkArr: [],
            sharedList: [
                { Id: "1", Name: "a", Time: "2020-01-02" },
                { Id: "2", Name: "b", Time: "2020-11-02" },
                { Id: "3", Name: "c", Time: "2020-09-02" },
            ],
        };
    },
    methods: {
        //全选操作
        handleCheckAllChange(flag) {
            if (flag) {
                this.sharedList.forEach((item) => {
                    this.checkArr.push(item.Id);
                });
            } else {
                this.checkArr = [];
            }
        },
        //单选操作
        handleCheckedChange(value) {
            let checkedCount = value.length;
            this.checkAllFlag = checkedCount === this.sharedList.length;
        },
    },
};
</script>

<style>
.checkbox { line-height: 30px; }
table {
    font-size: 14px;
    border: 1px solid #333;
    border-collapse: collapse;
    line-height: 30px;
}
table tr { border-top: 1px solid #333; }
table tr td { padding: 0px 10px; }
table .el-checkbox__label { display: none; }
</style>