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,
	            },
	          ],
	        },
	      ],
	}
}
相关推荐
阳火锅18 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry2 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401614 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川4 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术5 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再6 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了6 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂6 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源