vue2+element封装列表，显示、隐藏列

代码实现功能如下：

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) {
            
        }
    }
    ,
}