vue3插槽:el-table表头插入tooltip及更换表格背景色方式
作者：acheding
这篇文章主要介绍了vue3插槽:el-table表头插入tooltip及更换表格背景色方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3插槽:el-table表头插入tooltip及更换表格背景色
vue3中，以前 vue2 使用的 slot="xxx" 改成了 v-slot:xxx 或 #xxx ，slot-scope="xxx" 改成了 v-slot="xxx" 的形式，所以在 element-ui 中使用的 slot-scope="scope" 可以写为 v-slot="scope" 或者 #default="scope"，如果不需要使用 scope 参数的话，写成 #default 也没问题，slot="header"、slot="footer" 可以写为 #header、#footer。表头插入 tooltip 就用到了插槽的方法。
更换表格背景色需要用到 el-table 的 cell-class-name 参数，它是单元格 className 的回调方法，可以自由选择行和列，为某一行或列添加一个带有特殊样式的 class 类。
效果：
代码：
<script setup>
import { reactive } from "vue";
const state = reactive({
tableData: [
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
});
const addColor = ({ rowIndex, columnIndex }) => {
if (columnIndex === 0) {
if (rowIndex === 0) {
return "orange";
}
if (rowIndex === 1) {
return "yellow";
}
if (rowIndex === 2) {
return "blue";
}
}
};
</script><template>
<el-table
:data="state.tableData"
:cell-class-name="addColor"
style="width: 640px; margin: auto"
>
<el-table-column
label="#"
type="index"
align="center"
width="60"
></el-table-column>
<el-table-column prop="date">
<template v-slot:header>
<el-tooltip content="我是一个日期" placement="top-start" effect="light">
<i class="el-icon-warning-outline"></i>
</el-tooltip>
<span>日期</span>
</template>
</el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="地址" prop="address" width="220"> </el-table-column>
<el-table-column label="操作" width="160">
<template v-slot="scope">
<el-button type="text" size="small">查看</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">{{ scope.row.date }}</el-button>
</template>
</el-table-column>
</el-table>
</template><style lang="scss" scoped>
span {
float: left;
font-size: 14px;
font-weight: bold;
margin-right: 3px;
}
:deep(.orange) {
padding: 0 8px !important;
.cell {
div {
background: #ff7f31;
color: #fff;
}
}
}
:deep(.yellow) {
padding: 0 8px !important;
.cell {
div {
background: #ffba32;
color: #fff;
}
}
}
:deep(.blue) {
padding: 0 8px !important;
.cell {
div {
background: #3288ff;
color: #fff;
}
}
}
</style>vue3 Element-Plus El-Table Fixed列修改背景色问题
需求
带有checkbox的el-table，选中行变色 ，鼠标经过的行变色
阻碍
fixed列不是以单元格为单位是以列为单位
解决方法
大概思路是在fixed列单元格中加一个div 顶满显示,然后这个div是否发挥作用的依据是选中checkbox会把该行的一个flag更新，通过判断这个flag是否使div发挥作用，hover也是一样 把fixed列单元格内的
div在hover的css中写一份 鼠标经过hover发挥作用 相关hover内的css也发挥作用
刚开始写，条理不是很清晰，请见谅 ！
以下是相关代码：
html：
<el-table
:data="mrMessTableDatas"
:row-style="rowStyleDisplay">
<el-table-column prop="soCode" fixed width="200" label="大副收据" sortable>
<template #default="scope">
<div
:class="scope.row.selectChecked == true ? 'selectCheckedHover' : ''"
>
<el-popover
placement="top-start"
:width="150"
trigger="hover"
:content="scope.row.soCode"
effect="dark"
>
<template #reference>
<span class="inputnum-style">{{ scope.row.soCode }}</span>
</template>
</el-popover>
</div>
</template>
</el-table-column>
</el-table>js：
const rowStyleDisplay = ({
row,
rowIndex,
}: {
row: mrMessTable;
rowIndex: number;
}) => {
const checkIdList = multipleSelection.value.map((item: any) => item.id);
if (checkIdList.includes(row.id)) {
row.selectChecked = true;
return {
"background-color": "#d9ecff",
};
} else {
row.selectChecked = false;
}
};css：
:deep(.el-table__body tr:hover > td) {
background-color: #3dc7ab !important;
.selectCheckedHover {
background-color: #3dc7ab !important;
height: 45px;
width: 200px;
padding-top: 11px;
}
}
:deep(.el-checkbox) {
--el-checkbox-bg-color: #cfefa0b0;
}
.selectCheckedHover {
background-color: #d9ecff;
height: 45px;
width: 200px;
padding-top: 11px;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。