css画表格多级表头,element UI实现动态生成多级表头

一、效果图

二、封装两个组件，分别为DynamicTable.vue和TableColumn.vue，TableColumn.vue主要是使用递归来对表头进行循环生成

DynamicTable.vue

import TableColumn from './TableColumn'

export default {

props: {

// 表格的数据

tableData: {

type: Array,

required: true

},

// 多级表头的数据

tableHeader: {

type: Array,

required: true

},

// 表格的高度

height: {

type: String,

default: '300'

}

},

components: {

TableColumn

}

}

TableColumn.vue

export default {

name: 'tableColumn',

props: {

coloumnHeader: {

type: Object,

required: true

}

}

}

三、使用

HTML代码

JS代码

import DynamicTable from './components/DynamicTable'

export default {

components: {

DynamicTable

},

data () {

return {

searchForm: {

month: getMonth(),

serviceCategory: '1'

},

dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量

// 表数据

tableData: [

{

districtName: '1',

timeDimension: '2',

residentPopNum: '3',

residentPopDst: '4',

liveLandArea: '5',

liveLandDst: '6',

employmentLandArea: '7',

employmentLandDst: '8'

}

],