el-table-column默认勾选
时间: 2023-10-14 21:23:59 浏览: 105
vue3 el-table多级表头收缩扩展的实现(JS原味版)
el-table-column没有默认勾选的功能,但可以通过设置表格的数据源中某一项的属性来实现默认勾选的效果。例如:
```html
<el-table :data="tableData">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
```javascript
data() {
return {
tableData: [
{
name: '小明',
age: 18,
selected: true // 默认勾选
},
{
name: '小红',
age: 20,
selected: false // 默认不勾选
},
{
name: '小刚',
age: 22,
selected: true // 默认勾选
}
]
}
}
```
在数据源中添加一个selected属性,设置为true或false即可控制默认勾选的状态。在表格中,使用type="selection"开启多选功能,表格中的勾选框会根据数据源中的selected属性来显示默认勾选或不勾选的状态。
阅读全文