摘月亮的小船儿

切换模式

el-table 表格选中行高亮 ​

给 el-table 组件添加高亮属性 ​

highlight-current-row 属性可以用来设置表格是否要高亮当前行。将其设置为 true 即可启用高亮功能。

html
<el-table :data="typeData" :highlight-current-row="true" >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="操作" width="110px" align="center">
        <template #default="{row}">
            <el-button type="text" class="link_color" @click="openDelDrug(row)">编辑</el-button>
            <el-button type="text" class="link_color" @click="openDelDrug(row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>
<el-table :data="typeData" :highlight-current-row="true" >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="操作" width="110px" align="center">
        <template #default="{row}">
            <el-button type="text" class="link_color" @click="openDelDrug(row)">编辑</el-button>
            <el-button type="text" class="link_color" @click="openDelDrug(row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

设置表格行样式，实现高亮效果 ​

更改表格行的背景颜色，当行被选中时，背景颜色应该发生变化。

css
:deep(.el-table__body tr.current-row>td.el-table__cell){
	background-color:#e3f2fc !important;
}
:deep(.el-table__body tr.current-row>td.el-table__cell){
	background-color:#e3f2fc !important;
}

默认选中第一行数据 ​

在表格加载完成后，默认选中第一行数据。可以通过 ref 中的 setCurrentRow() 方法来实现。

给表格组件添加 ref 属性，然后在 onMounted 生命周期钩子中调用 setCurrentRow() 方法。

javascript
onMounted(() => {
    nextTick(()=>{
        data.typeDataRef.setCurrentRow(data.typeData[0])
    })
})
onMounted(() => {
    nextTick(()=>{
        data.typeDataRef.setCurrentRow(data.typeData[0])
    })
})

img