一、效果图
二、封装两个组件,分别为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'
}
],