Vue该怎么通过复选框 进行批量删除

第一次学Vue 对 复选框不是很懂，主要是有点思路，但是不知道从哪一步开始，也不知道该怎么定义，所以想问问各位有没有什么好的意见。

给list数组项增加checked状态，删除选中记录的时候通过checked状态来是否splice，大概写了个vue2的示例

<div id="app">
    <table border="1">
        <tr>
            <td><input type="checkbox" @click="checkAll($event)" v-model="checked" /></td>
            <td>ID</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
        <tr v-for="(emp,index) in list" :key="emp.id">
            <td><input type="checkbox" @change="setState($event,index)" :value="emp.id" :checked="emp.checked" /></td>
            <td>{{emp.id}}</td>
            <td>{{emp.name}}</td>
            <td><span @click="delete1(emp.id)">删除</span></td>
        </tr>
    </table>
    <input type="button" @click="delAll" value="删除选中记录" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            states: [],
            checked: false,
            list: [{ id: 1, name: 'name1' }, { id: 2, name: 'name2' }, { id: 3, name: 'name3' }, { id: 4, name: 'name4' }]
        },
        methods: {
            checkAll(e) {
                this.checked = e.target.checked;
                for (var i = 0; i < this.list.length; i++) {
                    this.list[i].checked = e.target.checked;
                }
                
                console.log(this.list)
            },
            setState(e, index) {
                this.list[index].checked = e.target.checked;
                this.checked = this.list.findIndex(i=>!i.checked)==-1
            },
            delAll() {
                for (var i = this.list.length - 1; i >= 0; i--)
                    if (this.list[i].checked) this.list.splice(i, 1);
            },
            delete1(id) {
                var index = this.list.findIndex(i => i.id == id);
                this.list.splice(index, 1);
            }
        }
    })
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~

监听复选框事件，在监听方法里面将数组赋值为空数组。

O King 永远的神