代碼實現功能如下：
1、通過勾選列名，實現列的顯示與隱藏。
2、通過拖動表格，改變列寬度。
3、通過一套界面，對不同用戶進行個性化設置（需自行擴展）。
一、數據庫
CREATE TABLE `fields` ( `id` int(10) NOT NULL AUTO_INCREMENT, `action_name` varchar(255) DEFAULT NULL COMMENT '控制器名稱', `show_name` varchar(255) DEFAULT NULL COMMENT '顯示名稱', `field_name` varchar(255) DEFAULT NULL COMMENT '字段名稱', `is_show` tinyint(4) DEFAULT '0' COMMENT '是否顯示:0關閉,1顯示', `sort` smallint(6) DEFAULT '0' COMMENT '排序', `width` varchar(255) DEFAULT NULL COMMENT '寬度', `created_at` datetime DEFAULT NULL COMMENT '創建時間', `updated_at` datetime DEFAULT NULL COMMENT '更新時間', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='自定義字段';
基礎數據庫設計如上，可以根據系統需求，增加user_id,對每個用戶控制。
二、提供api，json格式如下
{ "code": 200, "msg": "操作成功", "data": [{ "id": 158, "member_id": 3, "action_name": "data_details", "show_name": "是否合格", "field_name": "approve", "is_show": 1, "sort": 1, "width": "70" }, { "id": 159, "member_id": 3, "action_name": "data_details", "show_name": "ID", "field_name": "screening_id", "is_show": 1, "sort": 2, "width": "230" }, { "id": 160, "member_id": 3, "action_name": "data_details", "show_name": "所屬機構", "field_name": "institution_name", "is_show": 1, "sort": 3, "width": "135" }, { "id": 161, "member_id": 3, "action_name": "data_details", "show_name": "姓名", "field_name": "name", "is_show": 1, "sort": 4, "width": "77" }, { "id": 162, "member_id": 3, "action_name": "data_details", "show_name": "性別", "field_name": "sex", "is_show": 0, "sort": 5, "width": null }, { "id": 163, "member_id": 3, "action_name": "data_details", "show_name": "年齡", "field_name": "age", "is_show": 0, "sort": 6, "width": null }, { "id": 164, "member_id": 3, "action_name": "data_details", "show_name": "身份證", "field_name": "sfz", "is_show": 0, "sort": 7, "width": "119" }, { "id": 165, "member_id": 3, "action_name": "data_details", "show_name": "地址", "field_name": "addr", "is_show": 0, "sort": 8, "width": null }, { "id": 166, "member_id": 3, "action_name": "data_details", "show_name": "聯系電話", "field_name": "phone", "is_show": 0, "sort": 9, "width": null }, { "id": 167, "member_id": 3, "action_name": "data_details", "show_name": "門診號", "field_name": "mzh", "is_show": 0, "sort": 10, "width": null }, { "id": 168, "member_id": 3, "action_name": "data_details", "show_name": "住院號", "field_name": "zyh", "is_show": 0, "sort": 11, "width": null }, { "id": 169, "member_id": 3, "action_name": "data_details", "show_name": "內鏡診療日期", "field_name": "blsy_time", "is_show": 1, "sort": 12, "width": null }, { "id": 170, "member_id": 3, "action_name": "data_details", "show_name": "對象來源", "field_name": "scdx_ly", "is_show": 0, "sort": 13, "width": null }, { "id": 171, "member_id": 3, "action_name": "data_details", "show_name": "內鏡號", "field_name": "nj_num", "is_show": 0, "sort": 14, "width": null }, { "id": 172, "member_id": 3, "action_name": "data_details", "show_name": "是否無痛", "field_name": "ache", "is_show": 0, "sort": 15, "width": null }, { "id": 173, "member_id": 3, "action_name": "data_details", "show_name": "染色類別", "field_name": "dye", "is_show": 0, "sort": 16, "width": null }, { "id": 174, "member_id": 3, "action_name": "data_details", "show_name": "圖像數量", "field_name": "pic_nums", "is_show": 0, "sort": 17, "width": null }, { "id": 175, "member_id": 3, "action_name": "data_details", "show_name": "是否活檢", "field_name": "is_hj", "is_show": 1, "sort": 18, "width": null }, { "id": 176, "member_id": 3, "action_name": "data_details", "show_name": "Hp檢測結果", "field_name": "hp", "is_show": 0, "sort": 19, "width": null }, { "id": 177, "member_id": 3, "action_name": "data_details", "show_name": "Hp檢測方法", "field_name": "hpjcff", "is_show": 0, "sort": 20, "width": null }, { "id": 178, "member_id": 3, "action_name": "data_details", "show_name": "內鏡診斷", "field_name": "njzd", "is_show": 1, "sort": 21, "width": "136" }, { "id": 179, "member_id": 3, "action_name": "data_details", "show_name": "內鏡診斷醫師", "field_name": "nj_staff", "is_show": 0, "sort": 22, "width": null }, { "id": 180, "member_id": 3, "action_name": "data_details", "show_name": "內鏡審核醫師", "field_name": "verify_staff", "is_show": 0, "sort": 23, "width": null }, { "id": 181, "member_id": 3, "action_name": "data_details", "show_name": "病理號", "field_name": "bl_num", "is_show": 0, "sort": 24, "width": null }, { "id": 182, "member_id": 3, "action_name": "data_details", "show_name": "病理診斷", "field_name": "blzd", "is_show": 0, "sort": 25, "width": null }, { "id": 183, "member_id": 3, "action_name": "data_details", "show_name": "最高診斷代碼", "field_name": "sbw", "is_show": 1, "sort": 26, "width": null }, { "id": 184, "member_id": 3, "action_name": "data_details", "show_name": "病理診斷醫師", "field_name": "blzd_staff", "is_show": 0, "sort": 27, "width": null }, { "id": 185, "member_id": 3, "action_name": "data_details", "show_name": "病理審核醫師", "field_name": "blsh_staff", "is_show": 0, "sort": 28, "width": null }, { "id": 186, "member_id": 3, "action_name": "data_details", "show_name": "病理報告日期", "field_name": "blbg_time", "is_show": 1, "sort": 29, "width": null }] }
api返回數據格式如上，根據自己使用的語言實現即可。
三、前端element代碼實現
<el-table :data="tableData" :height="tableHeight" @selection-change="handleSelectionChange" @header-dragend="handleHeaderDragend" border min-height="400" ref="container" style="width: 100%" > <el-table-column type="selection" width="50"></el-table-column> <el-table-column :key="index" v-for="(item, index) in field_data" :prop="item.field_name" :label="item.show_name" :width="item.width" v-if="item.is_show" > <template slot-scope="scope"> <template v-if="item.field_name == 'approve'"> <div v-if="scope.row.approve == '1'"> <el-popover placement="top-start" trigger="hover" width="100"> <p :key="errindex" style="font-size: 12px" v-for="(error, errindex) in scope.row.errors"> <span v-if="error != undefined">{{ error }}</span> </p> <div slot="reference"> <span class="is_show">不合格</span> <i class="el-icon-warning" style="padding-left: 5px; color: red"></i> </div> </el-popover> </div> <span class="is_show_n" v-if="scope.row.approve == '2'">合格</span> </template> <template v-else-if="item.field_name == 'njzd'"> <p :key="nameindex" v-for="(name, nameindex) in JSON.parse(scope.row.njzd)">{{ name }}</p> </template> <template v-else-if="item.field_name == 'is_hj'"> <span v-if="scope.row.is_hj == '否'">否</span> <span v-if="scope.row.is_hj == '是'">是</span> </template> <template v-else>{{ scope.row[item.field_name] }}</template> </template> </el-table-column> <el-table-column label="操作" width="220"> <template slot="header" slot-scope="scope"> <span>操作</span> <el-popover class="upload-demo" trigger="click" width="100"> <div :key="index" v-for="(item, index) in field_data"> <el-checkbox @change="checked=>checkBoxStatus(checked, item)" v-if="item.is_show == 1" :checked="true">{{item.show_name}} </el-checkbox> <el-checkbox @change="checked=>checkBoxStatus(checked, item)" v-else> {{item.show_name}} </el-checkbox> </div> <i class="el-icon-setting" slot="reference" style="padding-left: 10px"></i> </el-popover> </template> <template #default="scope"> <PersButton @click="handleDetails(scope.row)" label="修改" perms="muster:reporting:button:modify" size="mini" type="warning" ></PersButton> <PersButton @click="handleDel(scope.row)" label="刪除" perms="muster:reporting:button:delete" size="mini" type="danger" ></PersButton> </template> </el-table-column> </el-table>
通過循環field_data字段，將每列展示出來，如果特殊處理的列，通過if判斷進行改寫。
四、前端js代碼
export default { data() { return { field_data: [], ls: { "width": "120px", "word-break": "keep-all" }, cs: { "width": "300px", "word-break": "break-all" }, tableHeight: 400, //計算表格高度 }; }, created() { }, activated() { this.getFieldList(); this.getList(); }, mounted() { this.calHeight(); }, methods: { //獲取字段列表 getFieldList() { } , // 當拖動表頭改變了列的寬度的時候會觸發該事件 handleHeaderDragend(newWidth, oldWidth, column, event) { if (column.property) { } }, // 當點擊checkbox時改變字段顯示和隱藏 checkBoxStatus(checked, row) { }, //設置table高度 calHeight() { }, //獲取列表 getList() { }, //刪除 handleDel: function (data) { }, //全選反選 handleSelectionChange: function (e) { } } , }