el-table合并表头,表头第一个添加斜线

斜线 主要添加css

html 复制代码
  <div class="table other-table">
     <el-table border stripe :data="crossTableData" max-height="400">
         <!-- 谢谢的表头-->
         <el-table-column prop="name" :label="总价段" width="90" align="center"
             :fixed="true">
             <el-table-column prop="name" label="面积段" align="center" width="90"></el-table-column>
         </el-table-column>
         
         <el-table-column :label="item.label" :prop="item.prop" v-for="(item, key) of crossTableHeader"
             align="center" :key="key" :min-width="$global.pxFitScreen(item.width) || 'auto'"
             :fixed="item.fixed">
             <template slot-scope="scope">
                 <template v-if="item.label == '占比'">{{ scope.row[item.prop] ? scope.row[item.prop] + '%'
                     : '-'
                     }}</template>
                 <template v-else>
                     <span v-if="scope.row.name == '合计'">{{ scope.row[item.label +
                         CJmoneyCountListCheck.propTo] |
                         tableFormatter }}</span>
                     <span v-else-if="scope.row.name == '占比'">{{ scope.row[item.label +
                         CJmoneyCountListCheck.propZb] ? scope.row[item.label +
                         CJmoneyCountListCheck.propZb] + '%' : '-'
                         }}</span>
                     <span v-else>{{ scope.row[item.prop] | tableFormatter }}</span>
                 </template>
             </template>
         </el-table-column>
     </el-table>
 </div>
css 复制代码
.other-table {

        /* 这里主要的作用就是用来强制修改element默认的样式*/
        ::v-deep .el-table thead.is-group th {
            padding: 0px !important;
            height: 25px !important;
        }

        ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
            border-bottom: none !important;
            /*中间的横线去掉*/
        }

        ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
            text-align: right !important;
            /*上边文字靠右*/
        }

        ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
            text-align: left !important;
            /*下边文字靠左*/
        }

        /*核心代码*/
        ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 110px !important;
            /*斜线的长度*/
            top: 0;
            left: 0;
            background-color: grey;
            opacity: 0.2;
            display: block;
            transform: rotate(-60deg);
            /*调整斜线的角度*/
            transform-origin: top;
        }

        ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 110px !important;
            /*斜线的长度*/
            bottom: 0;
            right: 0;
            background-color: grey;
            opacity: 0.2;
            display: block;
            transform: rotate(-60deg) !important;
            /*调整斜线的角度*/
            transform-origin: bottom;
        }
    }

多级表头合并表头

html 复制代码
	<el-table border stripe :data="homeList">
        <el-table-column :label="item.label" :prop="item.prop" v-for="(item, key) of tableColumn1" align="center"
          :key="key" :width="$global.pxFitScreen(item.width) || 'auto'" :fixed="item.fixed" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="item.prop === 'competingAnomalyed'">{{ scope.row[item.prop] == 1 ? '是' : '否' }}</span>
            <span v-else>{{ scope.row[item.prop] || '-' }}</span>
          </template>
			<!-- 二级表头 children-->
          <template v-if="item.children">
            <el-table-column :label="item2.label" :prop="item2.prop" v-for="(item2, key2) of item.children"
              align="center" :key="key2" :width="$global.pxFitScreen(item2.width) || 'auto'">
              <template slot-scope="scope">
                <span v-if="item2.prop === 'competingAnomalyed'">
                  {{ scope.row.competingAnomalyed == 1 ? '是' : '否' }}
                </span>
                <span v-else>{{ scope.row[item2.prop] || '-' }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
javascript 复制代码
  data() {
    return {
    	homeList:[],
		tableColumn1: [
	        { label: '项目名称', prop: 'homeName', width: 120, fixed: true },
	        {
	          label: "是否异动",
	          prop: "competingAnomalyed",
	          width: 60,
	        },
	        {
	          label: 'PK自己(近四周)',
	          children: [
	            {
	              label: "来访",
	              prop: "visitDesc",
	              width: 70,
	            },
	            {
	              label: "认购",
	              prop: "subscribeDesc",
	              width: 70,
	            },
	            {
	              label: "价格",
	              prop: "priceDesc",
	              width: 70,
	            },
	          ],
	        },
	        {
	          label: 'PK竞品(近四周)',
	          children: [
	            {
	              label: "来访",
	              prop: "ovisitDesc",
	              width: 70,
	            },
	            {
	              label: "认购",
	              prop: "osubscribeDesc",
	              width: 70,
	            },
	            {
	              label: "价格",
	              prop: "opriceDesc",
	              width: 70,
	            },
	          ],
	        },
	      ],
	}
}
相关推荐
麦麦大数据5 小时前
F036 vue+flask中医热性药知识图谱可视化系统vue+flask+echarts+mysql
vue.js·python·mysql·flask·可视化·中医中药
技术钱6 小时前
vue3前端解析excel文件
前端·vue.js·excel
韩立学长7 小时前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
@PHARAOH7 小时前
HOW - localstorage 超时管理方案
前端·javascript·vue.js
DokiDoki之父7 小时前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
Crystal3289 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476689 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
我家媳妇儿萌哒哒10 小时前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
CptW11 小时前
Vue3 的“批量渲染”机制
vue.js·面试
计算机学姐11 小时前
基于SpringBoo+Vue的医院预约挂号管理系统【个性化推荐算法+可视化统计】
java·vue.js·spring boot·mysql·intellij-idea·mybatis·推荐算法