实现后的效果图
- 先安装 jsx 的依赖包
npm install postcss-loader autoprefixer babel-loader babel-core
- 配置 babel.config.js 文件中添加
module.exports = {
"presets": [...],
"plugins": [...],
'env': {
"text": {
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
}
}
- 创建一个新的vue文件 mergeHeaderTable.vue
<script>
import {
Table, TableColumn } from 'element-ui'
export default {
name: 'MergeHeaderTable',
components: {
[Table.name]: Table,
[TableColumn.name]: TableColumn,
},
props: {
},
data() {
return {
options: [
{
label: '日期', prop: 'date' },
{
label: '配送信息',
prop: '',
children: [
{
label: '姓名', prop: 'name' },
{
label: '地址',
prop: '',
children: [
{
label: '省份', prop: 'province' },
{
label: '市区', prop: 'city' },
{
label: '地址', prop: 'address' },
{
label: '邮编', prop: 'zip' },
],
},
],
},
],
tableValues: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路',
zip: 200333,
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路',
zip: 200333,
},
],
}
},
methods: {
recursion(arrs) {
return arrs.map((item) => {
if (!!item.children) {
return (
<el-table-column label={
item.label}>
{
this.recursion(item.children)}
</el-table-column>
)
} else {
return this.createElTableColumn(item.prop, item.label)
}
})
},
createElTableColumn(prop, label) {
return <el-table-column prop={
prop} label={
label}></el-table-column>
},
},
render(h) {
return (
<el-table
border
data={
this.tableValues}
style="width: 100%"
style="width: 100%;margin: 20px 0;"
class="merge-header-table"
header-cell-style={
() => {
return {
background: '#f9f9f9' }
}}
>
{
this.recursion(this.options)}
</el-table>
)
},
}
</script>
<style lang="scss">
.merge-header-table {
th,
td {
color: #767676;
padding: 5px 0 !important;
}
}
</style>
