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-columnlabel="#"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——插槽：el-table表头插入tooltip及更换表格背景色相关推荐

table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动下面是代码原文是查看 <!DOCTYPE html> <html> <head> &l ...
element UI 封装后的table表头（tooltip）文字提示
前提:table组件被封装了,且不想引入其他组件的情况下截图: 实现: 代码: html: <el-table stripe :data="table.data" styl ...
el table怎么获取最后一行_elementUi表格插入额外一行怎么操作
<el-table :data="tableData" style="width: 100%"><template><div> ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
Bootstrap Table 表头和表格内容不对齐
Bootstrap Table 表头和表格内容不对齐前言原因解决方式思路一思路二思路三前言之前的一次开发中使用到了Bootstrap Table的组件,在使用过程中出现了表头与表格内容 ...
【学习总结】关于vue中table表头加粗与遮挡问题
table表头的修改遇到的问题解决方法详细解释遇到的问题我想实现的效果但是我实际出现的效果仔细观察,发现存在以下问题: 1.表头的背景与遮挡 2.加上边界在项目中找到了对应的界面代码, ...
Table表头与数据列对齐问题解决方案
Table表头与数据列对齐问题解决方案参考文章: (1)Table表头与数据列对齐问题解决方案 (2)https://www.cnblogs.com/peter1/p/8888714.html 备忘 ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...

vue3——插槽：el-table表头插入tooltip及更换表格背景色

vue3——插槽：el-table表头插入tooltip及更换表格背景色相关推荐

最新文章

热门文章