需求:进入页面时默认选中表格第一行
<el-table
ref="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: string
name: string
address: 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 = val
console.log('选中行数据', currentRow.value)
}
onMounted(() => {
setCurrent(tableData.value[0])
})
</script>
注意 在 onMounted 生命周期钩子 DOM 元素才被创建和渲染,所以 通过 ref 获取 DOM 元素时需要在 onMounted 里。