如何在vxe-table checkbox 列勾选
时间: 2024-02-19 14:56:23 浏览: 367
在vxe-table中,可以通过以下步骤来实现checkbox列的勾选:
1. 首先,在表格的列定义中,需要设置对应列的type为"checkbox",并且设置prop属性为一个唯一的标识符,用于区分不同的数据行。
2. 在数据源中,为每一行数据添加一个属性,用于表示该行是否被选中。可以使用v-model指令将该属性与checkbox列进行双向绑定。
3. 在表格的checkbox列中,可以使用slot-scope来自定义列的内容。可以通过判断当前行的选中状态,来显示不同的勾选状态。
下面是一个示例代码:
```html
<template>
<vxe-table :data="tableData">
<vxe-table-column type="checkbox" prop="selected"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, selected: false },
{ name: '李四', age: 25, selected: true },
{ name: '王五', age: 30, selected: false }
]
};
}
};
</script>
```
在上述代码中,tableData数组中的每个对象都有一个selected属性,用于表示该行是否被选中。通过设置type为"checkbox"的列,并将prop属性设置为"selected",实现了checkbox列的勾选功能。
阅读全文