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,
	            },
	          ],
	        },
	      ],
	}
}
相关推荐
博客zhu虎康3 小时前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui
长明3 小时前
Electron 的西天取经
vue.js·electron
九十一3 小时前
Reflect 在 Vue3 响应式中作用
前端·vue.js
岁月宁静3 小时前
前端添加防删除水印技术实现:从需求拆解到功能封装
前端·vue.js·人工智能
华仔啊4 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
云和数据.ChenGuang5 小时前
Component template requires a root element, rather than just错误
前端·javascript·vue.js
哲此一生9847 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After10 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
牧杉-惊蛰13 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木13 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js