el-table默认选中某一行
时间: 2024-09-26 13:09:26 浏览: 124
在Element UI库中的el-table组件中,如果你想要让表格的某一行默认被选中,你可以通过设置`row-key`属性来唯一标识每一行,并在数据渲染时指定你想默认选中的那行的值。同时,需要启用`select-on-indeterminate`和`selection-multiple`属性,以便支持多选或者单选模式。
下面是一个示例:
```html
<template>
<el-table
:data="tableData"
row-key="id"
select-on-indeterminate
selection-mode="single" <!-- 或者 "multiple" for multiple selection -->
@selection-change="handleSelectionChange"
>
<el-table-column type="index"></el-table-column>
<!-- 其他列... -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-checkbox v-model="scope.$selected">选择</el-checkbox>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', selected: true }, // 这行会被默认选中
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
handleSelectionChange(selection) {
console.log('当前选中的行:', selection);
}
};
}
};
</script>
```
在这个例子中,第一行的数据里的`selected`字段被设为了true,所以它会在表格加载时被默认选中。当用户点击选择框时,会触发`handleSelectionChange`方法更新选中的行。
阅读全文