动态表头设计方案

场景

在B端业务中，存在大量数据表格的展示。有时候数据表格里的表头，展示的列是动态的，即前端需要根据后台的自定义配置进行动态渲染

后端

SQL

CREATE TABLE `table_config` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `code` varchar(128) DEFAULT '' COMMENT '编码标识',
  `column_field` varchar(128) DEFAULT '' COMMENT '列字段',
  `column_name` varchar(128) DEFAULT '' COMMENT '列名',
  `is_show` int(4) DEFAULT 1 COMMENT '是否展示 1-是 0-否',
  `sort` int(4) DEFAULT 0 COMMENT '排序',
  `create_by` varchar(32) DEFAULT '' COMMENT '创建人',
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  `update_by` varchar(32) DEFAULT '' COMMENT '更新人',
  `update_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间',
  `remark` varchar(64) DEFAULT '' COMMENT '备注',
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='表格配置';

接口返回

接口正常返回分页的数据集合，再加上一个表头字段集合

{
    "code": 200,
    "message": "SUCCESS",
    "isSuccess": true,
    "data": {
        "tableHeadList": [
            {
                "columnField": "id",
                "columnName": "ID",
            },
            {
                "columnField": "name",
                "columnName": "姓名",
            }
        ],
        "dataList": [
            {
                "id": "123456",
                "name": "kai",
                "education": "",
                "school": ""
            }
        ],
        "total": 3
    }
}

前端

template

<el-table border :data="tableData">
  <template v-for="(item,index) in tableHead">
    <el-table-column :prop="item.columnField" :label="item.columnName" :key="index">
  </template>
</el-table>

javascript

//表头数据
tableHeadList:[
    {
      columnField: "id", columName:"ID"
    },
    {
      columnField: "name", columnName:"姓名"
    }
],

//表格数据
dataList: [{
    id: '123456',
    name: 'kai'
  },
  {
    workCode: '789456',
    name: 'xxx'
  }
}]