element-plus el-table表格默认选中某一行

需求:进入页面时默认选中表格第一行 

<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>

 三个注意点:

  1. ref="singleTableRef"      ——>  用于调用 table 组件的方法 setCurrentRow(setCurrentRow 用于单选表格,设定某一行为选中行)
  2. highlight-current-row      ——>   用于高亮当前行
  3. @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 里。

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值