el-table selection默认选中
时间: 2023-09-25 08:08:37 浏览: 84
el-table的selection默认选中功能需要结合Vue的特殊属性ref和toggleRowSelection方法来实现。首先,在el-table标签中添加ref属性,例如ref="table"。然后,在Vue实例的methods中定义一个方法,例如handleSelectionChange,该方法使用this.$refs.table.toggleRowSelection方法来实现默认选中。具体代码如下所示:
```html
<template>
<div>
<el-table :data="tableData" border ref="table" style="width: 100%" @selection-change="handleSelectionChange">
<!-- 表格列 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
// 表格数据
]
}
},
methods: {
handleSelectionChange(selection) {
// 默认选中
selection.forEach(row => {
this.$refs.table.toggleRowSelection(row, true)
})
}
}
}
</script>
```
在上述代码中,handleSelectionChange方法接收一个参数selection,表示当前选中的数据。我们可以遍历selection数组,然后使用this.$refs.table.toggleRowSelection方法来将每一行数据设为选中状态。通过传递第二个参数true,我们可以实现默认选中的效果。