vue3中用highlight-current-row实现饿了吗table表格单行点击高亮

老是写Bug

已于 2023-04-11 14:30:43 修改

阅读量2.8k

点赞数

文章标签： vue.js javascript 前端

于 2023-04-11 14:23:03 首次发布

本文链接：https://blog.csdn.net/heimaqianduan/article/details/130079724

版权

在饿了吗的官网上我们可以看到table的属性里面highlight-current-row

在vue中的使用方法如下


 <el-table :data="tableData"
                @row-click="rowClick"
                ref='inRuTabRef'
                highlight-current-row>
        <el-table-column label="设备名称"
                         align="center">
          <template #default="scope">
            {{scope.row.devicePointVo.deviceName}}
          </template>
        </el-table-column>
 </el-table>

可以通过样式穿透修改他的高亮显示样式

::v-deep .ep-table__body tr.current-row > td.ep-table__cell {
  background-color: #0887bd !important;
}

通过上面的代就可以实现表格的单行点击高亮

★但是可能还有这样的一个需求，默认第一行高亮，我们就需要用table的一个方法setCurrentRow，他的使用方法是用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。

首先给el-table绑定ref的值，通过$ref获取到表格的一个实例，但是在vue3中使用了 setup的语法糖，是没有this的，需要导入getCurrentInstance来使用$refs设置默认第一行高亮，

import { getCurrentInstance } from '@vue/runtime-core';
const currentInstance = getCurrentInstance()
//获取厚道返回的数据后执行nextTick函数
nextTick(() => {
   currentInstance.ctx.$refs.inRuTabRef.setCurrentRow(tableData.value[0]);

})