1、为了实现需求表头的一个单元格划分分割线如下图
2、vue中应用elementui的table实现（自己用elementui比拟多）
话不多说，效果图如下：
代码如下：
<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column :resizable="false" class-name="elChgTbeClmn" prop="date" label="日期" width="120"> <template slot="header" slot-scope="scope"> <div class="elHeadCon"> <div class="headerCon1">区域</div> <div class="headerCon2">类型</div> <div class="headerLine"></div> </div> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div></template><script>export default { name: 'sysIndex', components: {}, data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] }; }, mounted() {}, methods: {}};</script><style>/* 如果单元格的padding */.elChgTbeClmn .cell { padding: 0px !important;}.elHeadCon { height: 50px; position: relative;}.headerCon1 { position: absolute; left: 0; bottom: 0;}.headerCon2 { position: absolute; right: 0; top: 0;}.headerLine { width: 1px; height: 150px; transform: rotate(-68deg); /*这里须要本人调整，依据线的地位*/ transform-origin: top; background-color: red;}</style>