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,
	            },
	          ],
	        },
	      ],
	}
}
相关推荐
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技11 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte11 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin11 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击12 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder12 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202613 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737413 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星14 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin14 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序