VUE表格、复选框

VUE的表格也是像列表一样的循环，直接上代码
HTML：

<table id="actionTable" class="layui-table" lay-even="" lay-skin="row" style="overflow:auto;display: block;height:590px;">
                                                <colgroup>
                                                    <col width="150">
                                                    <col width="650">
                                                    <col width="600">
                                                    <col>
                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <th style="text-align:center"><input type="checkbox" v-on:click="checkAll" v-model="checked"></th>
                                                        <th style="text-align:center">操作代号</th>
                                                        <th style="text-align:center">名称</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-for="action in actions">
                                                        <td style="text-align:center"><input type="checkbox" v-model="checkModel" :value="action.Id"></td>
                                                        <td style="text-align:center">{{action.ActionCode}}</td>
                                                        <td style="text-align:center">{{action.ActionName}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>

JS：引入相关layUI和VUE的文件

 var actionData = { actions: [], checked: false, checkModel: [] };
        var actionVue = new Vue({
            el: '#actionTable',
            data: actionData,
            methods: {
                checkAll() {
                    if (this.checked) {
                        this.checkModel = [];
                    } else {
                        this.actions.forEach((item) => {
                            if (this.checkModel.indexOf(item.Id) == -1) {
                                this.checkModel.push(item.Id)
                            }
                        })
                    }
                }
            },
            watch: {
                checkModel() {
                    if (this.checkModel.length == this.actions.length) {
                        this.checked = true;
                    } else {
                        this.checked = false;
                    }
                }
            }
        })