前言

修改elementui的表格合并行和表格表头边框需要注意的地方

一、为什么有时候修改了样式却没有生效？

当我们在修改elementui的样式的时候发现样式不生效的时候，需要查看是否给需要的元素添加上了样式，如果添加上了还是没有生效的时候就是样式的层级不够或者没有穿透，使用 >>> 或者 /deep/ 进行穿透，或者!important提高层级。

如图：

代码如下（示例）：
html:

<template><div class="table-box"><el-table:data="tableData":span-method="objectSpanMethod"empty-textborderheader-align="center"style="width: 100%; margin-top: 20px"><el-table-column prop="id" label="班次" align="center" width="80"></el-table-column><el-table-column prop="name" label="工程师" align="center" width="80"></el-table-column><el-table-column prop="amount1" label="时间" align="center" width="280"></el-table-column><el-table-column prop="amount2" label="备注" align="left"></el-table-column></el-table></div>
</template>

css:

<style lang="scss" scoped>
.table-box {/deep/.has-gutter {.is-center,.is-leaf,.el-table__cell {border-left: none !important;border-right: none !important;&:nth-last-child(2){border-right: 1px solid #ccc !important;text-align: center !important;}}}
}
</style>

js:

export default {data() {return {tableData: [{id: "白班",name: "前端",amount1: "2022-4-15 12:12:12",amount2: "3.2",amount3: 10,},{id: "白班",name: "前端",amount1: "2022-4-15 12:12:12",amount2: "3.2",amount3: 10,},{id: "夜班",name: "后端",amount1: "2022-4-15 08:12:12",amount2: "1.9",amount3: 9,},{id: "夜班",name: "后端",amount1: "2022-4-15 09:12:12",amount2: "2.2",amount3: 17,},],};},created(){this.datafunc()},methods: {// 合并行函数objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1) {return {rowspan: row.rowspan,colspan: 1,};}},datafunc() {let baiShfitArrary = [];let yeShfitArrary = [];let bainum = 0;let yenum = 0;this.tableData.forEach((item) => {if (item.id == "白班") {baiShfitArrary.push(item);bainum += 1;} else {yeShfitArrary.push(item);yenum += 1;}});if (baiShfitArrary.length > 0) baiShfitArrary[0].rowspan = bainum;if (yeShfitArrary.length > 0) yeShfitArrary[0].rowspan = yenum;this.tableData = [...baiShfitArrary, ...yeShfitArrary];},},
};
</script>

修改elementui的表格合并行和表格表头边框相关推荐

element table表格合并行和列
element-ui 官网案例: table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当前行号row ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
phpoffice/phpword 表格合并和表格绝对居中
本文默认你已经知道如何使用phpword插入表格. phpoffice的表格合并是通过修改表格样式来实现的,假如我们有如图表格: 我们要把1234合并起来: 那么我们就要修改1234表格的vMerge ...
如何修改element-ui中输入框点击之后的边框高亮
做项目根据ui图设计需要修改输入框的点击之后边框的高亮颜色后来不停的点在F12中终于找到 .nm-skin-pretty .el-input.is-active .el-input__inner, ...
HTML 表格合并（表格合并行属性 rowspan 将多行合并成一行）
<table border="1"> <tr> <td colspan="3" >用户信 ...
wps合并所有sheet页_表格高级筛选、表格合并，让表格处理事半功倍
今天给大家介绍WPS最受欢迎的2个表格功能,表格合并和表格高级筛选. 这都是能够切实让工作事半功倍的功能,一定要掌握哦! 一.表格合并当我们有多个表格的内容需要合并到一个表格中,很多人会采取复制粘贴 ...
element table 表格合并及如何默认选中合并后的第一行
1. 合并效果及代码如下: 1.表格头 2.js 合并前的每一个小行都会执行一此下面这个代码,如上图所示,执行第一行时合并,执行到第二行设置合并行数为0 就可以了 objectSpanMethod({ ...
html5 li表格纵向合并,vue elementui 表格合并/纵向表头
使用 elementui 做项目的时候大家应该会遇到很多关于表格的需求下面是总结的两个项目中遇到的问题. 查看文档的话是很简单, 但是很多需求还是需要大家自己去写的. 第一个 --- 表格合并 1. ...
VUE Table复杂表格生成带格式的excel（多表头、合并单元格、边框、居中、背景）
VUE Table复杂表格生成带格式的excel(多表头.合并单元格.边框.居中.背景) 因为工作需要,在网上找了很多都不太行无意之间看到一个大佬的打码拿过来改了改居然可以用! 原文链接:https: ...

修改elementui的表格合并行和表格表头边框

前言

一、为什么有时候修改了样式却没有生效？

修改elementui的表格合并行和表格表头边框相关推荐

最新文章

热门文章