vuetify v-data-table 复选框插槽的使用

概念：

v-data-table 中 item.data-table-select 是 vuetify 组件库为 v-data-table 封装的插槽，用来替换掉原本 v-data-table 组件的默认复选框的插槽，其插槽中默认使用的复选框是 v-simple-checkbox 组件

代码展示：

<template>
    <v-card flat height="100%">
        <v-data-table
        :headers="headers"
        :items="items"
        item-key="num"
        :show-select="show_select"
        v-model="selected"
        >
            <template v-slot:[`item.data-table-select`]="{ item , isSelected , select}">
                <v-simple-checkbox
                v-ripple="{ center: true }"
                :value="item.simle_checkbox"
                @input="select(!isSelected)"
                ></v-simple-checkbox>
            </template>
        </v-data-table>
    </v-card>
</template>
 
<script>
export default {
    data() {
        return {
            // 一个对象数组，每个对象描述一个表头列
            headers:[
                {
                    text: "序号",// 列表头标题
                    align: "center",// 对齐方式，start（居左），center（居中），end（居右）
                    sortable: false,// 是否可排序
                    value: "num",// 列表值，items 里对应的字段
                },
            ],
            
            // 列表数据
            items:[
                {
                    num:1,// 序号
                    simle_checkbox:false,// 复选框是否被选中
                },
                {
                    num:2,// 序号
                    simle_checkbox:false,// 复选框是否被选中
                },
            ],
            
            // 是否显示列表复选框
            show_select: true,
            
            // 列表复选框选中
            selected: [],
        }
    },
    watch:{
        selected(newVal,oldVal){
            console.log(newVal)

            // 重置复选框状态
            this.items.forEach((item,index)=>{
                item.simle_checkbox = false
            })

            // 将选中的复选框状态改为 true
            if(newVal.length && newVal.length!=0){
                newVal.forEach((item,index)=>{
                    item.simle_checkbox = true
                })
            }
        }
    },
}
</script>

插槽解构出的参数说明： 

<template v-slot:[`item.data-table-select`]="{ item , isSelected , select }">

1. item 对应的列表数据（本例中的 items 变量）
2. isSelected 对应复选框是否被选中，选中值为 true，反之值为 false
3. select 控制复选框切换选中/未选中【vuetify组件库内部封装的方法】

解决使用插槽控制台报错问题：

vuetify 组件库自定义指令，波纹指令：v-ripple="{ center: true }"

• center 属性强制波纹效果从目标中心开始，默认值为 false
• 使用 item.data-table-select 插槽控制台会出现报错，加上 v-ripple="{ center: true }" 指令可以解决控制台报错，报错图示如下：