el-table怎么让他默认选中第一行
时间: 2023-10-18 07:32:45 浏览: 296
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
如果你使用的是 Element UI 的 el-table,你可以通过设置 `highlight-row` 属性来实现默认选中第一行。将 `highlight-row` 属性设置为一个变量,通过该变量来控制表格的选中行。在表格数据加载完成后,通过 `this.$refs.table.setCurrentRow(this.tableData[0])` 将第一行设为选中状态。
以下是示例代码:
```html
<template>
<el-table
ref="table"
:data="tableData"
:highlight-row="currentRow"
@current-change="handleCurrentChange"
>
<!-- 表格列配置 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
currentRow: 0 // 当前选中的行
}
},
mounted() {
// 加载表格数据
this.fetchTableData()
},
methods: {
// 获取表格数据
fetchTableData() {
// 数据加载完成后选中第一行
this.$nextTick(() => {
this.$refs.table.setCurrentRow(this.tableData[0])
})
},
// 处理表格选中行变化事件
handleCurrentChange(row) {
this.currentRow = row
}
}
}
</script>
```
在上面的示例代码中,我们通过 `setCurrentRow` 方法将表格的第一行设为选中状态,然后在 `@current-change` 事件中更新 `currentRow` 变量,以便在表格中保持选中状态。
阅读全文