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生成表格

 <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="index" align="center" width="50">
      </el-table-column>
      <el-table-column v-for="(item, index) in col"
                       v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
                       align="center"
                       show-overflow-tooltip
                       width="200px"
                       :key="`col_${index}`"
                       :prop="dropCol[index].prop"
                       :label="item.label">
        <template slot-scope="scope">
          <span>{
  { !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-dropdown trigger="hover">
            <span class="el-dropdown-link">
              操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息</el-dropdown-item>
              <!--              <el-dropdown-item class="el-dropdown-link" @click.native="memoryInfo(scope.row)">内存信息</el-dropdown-item>-->
              <!--              <el-dropdown-item class="el-dropdown-link" @click.native="nicInfo(scope.row)">网卡信息</el-dropdown-item>-->
              <!--              <el-dropdown-item class="el-dropdown-link" @click.native="diskInfo(scope.row)">硬盘信息</el-dropdown-item>-->
              <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更</el-dropdown-item>
              <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产</el-dropdown-item>
              <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

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

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

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.cluster" clearable placeholder="请输入所属集群" style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.outIp" clearable placeholder="请输入存储外网IP" style="width: 200px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-button type="primary" plain @click="handleFilter" class="filter-item">搜索</el-button>
      <el-button type="primary" plain @click="createDevice" class="filter-item">创建资产</el-button>
      <el-button type="primary" plain @click="changeCols" class="filter-item">修改显示列</el-button>
      <el-button type="primary" plain @click="add