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,
	            },
	          ],
	        },
	      ],
	}
}