vue3中用highlight-current-row实现饿了吗table表格单行点击高亮
vue3表格中使表格单行点击高亮切第一行默认高亮
·
在饿了吗的官网上我们可以看到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]);
})
更多推荐
已为社区贡献1条内容
所有评论(0)