vue 之 element-ui 实现全选和复选框

<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="选择">
                <template slot-scope="scope">
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox :label="scope.row.gameId">选中</el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </div>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            checkAll: false,
            isIndeterminate: false,
            checkedCities: [],
            tableData: [],
            multipleSelection: [],
            checkedGameId: []
        }
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.checkedGameId : []
            this.isIndeterminate = false
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length
            this.checkAll = checkedCount === this.checkedGameId.length
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedGameId.length
        }
    },
    created() {
        let res = {
            'data': {
                'list': [
                    {
                        gameId: '11111',
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        gameId: '22222',
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        gameId: '33333',
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        gameId: '44444',
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }
                ]
            }
        }
        this.tableData = res.data.list
        for (let i = 0; i < this.tableData.length; i++) {
            this.checkedGameId.push(this.tableData[i].gameId)
            this.multipleSelection = this.checkedGameId
        }
    }
}
</script>