vue3 element plus 表格单选，默认选中行、选中、清空

最新推荐文章于 2024-10-20 12:47:08 发布

.see you.

最新推荐文章于 2024-10-20 12:47:08 发布

阅读量490

点赞数 3

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_56119955/article/details/142876552

版权

<template>
  <el-table :data="tableData" ref="singleTableRef" style="width: 100%" highlight-current-row
    @current-change="handleCurrentChange">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(2)">选中第三行</el-button>
    <el-button @click="setCurrent()">清空</el-button>
  </div>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue'
const singleTableRef = ref(null)
const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const setCurrent = (index) => {
  singleTableRef.value.setCurrentRow(tableData[index])
}
nextTick(() => {
  if (tableData.length > 1) {
    // 默认选中第二行
    singleTableRef.value?.setCurrentRow(tableData[1])
  }
});  
</script>