element ui让表格的复选框默认选中
时间: 2023-07-11 08:52:38 浏览: 1030
详解element-ui表格中勾选checkbox,高亮当前行
5星 · 资源好评率100%
你可以通过在数据源中给对应的数据添加 `selected` 属性来设置默认选中状态,然后在表格的 `checkbox-change` 事件中监听选中状态的变化,例如:
```html
<template>
<el-table :data="tableData" @checkbox-change="handleCheckboxChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', selected: true },
{ name: 'Doe', selected: false },
{ name: 'Jane', selected: true }
]
};
},
methods: {
handleCheckboxChange(selection) {
console.log(selection);
}
}
};
</script>
```
在上述代码中,我们在数据源中为 John 和 Jane 添加了 `selected: true` 属性,这样它们在表格中就会默认选中。然后在 `checkbox-change` 事件中,我们可以监听选中状态的变化,对选中的行进行处理。
阅读全文