elementui表格的列拖拽及动态显示列实现

1. 安装Sortable

npm install sortablejs --save

2. 引入Sortable

import Sortable from 'sortablejs'

3. 添加列拖拽方法

//列拖拽
columnDrop() {
    const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
            const oldItem = this.dropCol[evt.oldIndex]
            this.dropCol.splice(evt.oldIndex, 1)
            this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
    })
}

4. 拼装表单列数据

getDropCol(){
              if(this.orders&&this.orders.hasOwnProperty('device')){
                  let data=JSON.parse(this.orders['device'])
                  return data
              }
              return this.getCol()
            },
            getCol() {
                let allCols = [
                    {prop: "select", label: "选择"},
                    {prop: "index", label: "序号"},
                    {prop: "name", label: "设备型号"},
                    {prop: "cluster.name", label: "集群",type:"cluster"},
                    {prop: "type", label: "服务器分类"},
                    {prop: "sn", label: "设备序列号"},
                    {prop: "manageIp", label: "管理网"},
                    {prop: "illoIp", label: "ILLO地址"},
                    {prop: "period", label: "期数"},
                    {prop: "position", label: "机架位置"},
                    {prop: "publicIp", label: "公网"},
                    {prop: "cn2Ip", label: "CN2"},
                    {prop: "outIp", label: "存储外网"},
                    {prop: "systemVersion", label: "系统版本"},
                    {prop: "osVersion", label: "内核版本"},
                    {prop: "use", label: "用途"},
                    {prop: "deliveryDate", label: "交付日期",type:"date"},
                    {prop: "useUser", label: "申请人"},
                    {prop: "tag", label: "项目名称"},
                    {prop: "remarks", label: "备注"},
                    {prop: "computerPosition", label: "机房位置"},
                ]
                if (this.cols && this.cols.hasOwnProperty('device')) {
                    if (this.cols['device'] === "") {
                        return allCols;
                    }
                    let str = this.cols['device'];
                    let data = this.utils.str2Arr(str);

                    let result=[]
                    result.push({prop: "select", label: "选择"})
                    result.push({prop: "index", label: "序号"})
                    data.forEach(function (item) {
                        allCols.forEach(function (col) {
                            if (col.prop === item) {
                                result.push(col);
                            }
                        })
                    })
                    return result;
                } else {
                    return allCols;
                }

            },

注：我这里因为配合后端保存了顺序而且支持了列是否显示的功能，所以需要检索this.orders，如果不需要可以直接使用this.gelCol()

4. 初始化页面时，初始化列数据

 mounted() {
            this.columnDrop()
            this.col=this.getDropCol();
            this.dropCol=this.getDropCol();
        },

5. v-for生成表格

我这里配合type来对特殊字段进行了处理，使用了getValue的方法实现的，好像也可以用v-if来做(毕竟不是专业前端，随便来了= =)

整页代码（非纯前端，有些粗糙见谅= =）：