vue el-table加选择框
时间: 2024-10-29 16:05:30 浏览: 28
vue3企业级项目二次封装el-table、分页
在Vue中,如果你想要在`el-table`(Element UI的表格组件)中添加选中功能,通常会配合`el-checkbox`(复选框)一起使用。你可以通过动态数据驱动来实现这个功能。首先,在数据模型中定义一个数组,每个元素都有一个布尔值表示是否被选中:
```js
data() {
return {
tableData: [
{ id: 1, name: 'Row 1', checked: false },
{ id: 2, name: 'Row 2', checked: false },
// 更多行...
]
};
},
```
然后在`el-table`组件模板中,为每一行添加一个`el-checkbox`:
```html
<template>
<el-table
:data="tableData"
border
>
<el-table-column type="index"></el-table-column>
<el-table-column property="name" label="Name"></el-table-column>
<el-table-column prop="checked" label="Select">
<template slot-scope="{ $index, row }">
<el-checkbox v-model="row.checked"></el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
```
现在,当你点击复选框,对应的`row.checked`状态就会改变。
阅读全文