element-plus el-table表格默认选中某一行
需求：进入页面时默认选中表格第一行
<el-tableref="singleTableRef":data="tableData"highlight-current-row@row-click="handleCurrentChange"
><el-table-column property="date" label="日期" /><el-table-column property="name" label="姓名"/><el-table-column property="address" label="地址"/>
</el-table>三个注意点：
- ref="singleTableRef" ——> 用于调用 table 组件的方法 setCurrentRow（setCurrentRow 用于单选表格，设定某一行为选中行）
- highlight-current-row ——> 用于高亮当前行
- @row-click="handleCurrentChange" ——> 当某一行被点击时会触发该事件
<script setup lang="ts">
import { firstPageAPI } from '@/utils/api'
import { ref } from 'vue'
import { ElTable } from 'element-plus'interface User {date: stringname: stringaddress: string
}let currentRow = ref()
let tableData = ref([]) // 表格数据
const singleTableRef = ref<InstanceType<typeof ElTable>>()
//
const setCurrent = (row?: User) => {singleTableRef.value!.setCurrentRow(row)
}
// 接口请求
await firstPageAPI().then((res: any) => {currentRow.value = res.data[0]tableData.value = res.data// 选中表格第一行数据setTimeout(() => {setCurrent(tableData.value[0])},200)
})
// 点击行事件
const handleCurrentChange = (val: User | undefined) => {currentRow.value = valconsole.log('选中行数据', currentRow.value)
}onMounted(() => {setCurrent(tableData.value[0])
})</script>注意 在 onMounted 生命周期钩子 DOM 元素才被创建和渲染，所以 通过 ref 获取 DOM 元素时需要在 onMounted 里。