vue + element table 组件 实现 动态展示表格列 + 实现拖拽 + 实现排序

效果图：

实现效果：点击选择显示列，通过是否勾选 展示对应的每一列数据是否展示。

第二张图可以拖拽改变顺序，第一张图级别 点击可以后端发请求排序，可以增加多个

代码：

   <div style="margin: 0; height: calc(100% - 140px)">
        <el-table
          class="znv-table"
          :data="tableData"
          border
          stripe
          highlight-current-row
          ref="table"
          height="100%"
          @header-dragend="headerDrag"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
            第一列默认展示的是选择框
          </el-table-column>
          <el-table-column v-for="column in showCol"
                           :key="column.key"
                           :prop="column.key"
                           :label="column.label"
                           resizable
                           :width="showCol.length < 10 ? '' : column.width"
                           align="center"
                           :show-overflow-tooltip="true">
            <template slot="header" slot-scope="scope">
              <span>{{column.label}}</span> 展示的是表头
                展示的是 两个按钮 对应排序    动态class 展示的是 具体点击那个展示高亮，点击的显示高亮 其他的的不显示
              <span class="caret-wrapper" :class="{ highlightAsc: column.highlight === 'asc', highlightDesc: column.highlight === 'desc' }" v-if="column.key === 'alarm_level_name'">
                <i class="sort-caret ascending"  @click="sortTableData('asc', 'alarm_level', column)"></i>
                <i class="sort-caret descending" @click="sortTableData('desc', 'alarm_level', column)"></i>
              </span>
              <span class="caret-wrapper" :class="{ highlightAsc: column.highlight === 'asc', highlightDesc: column.highlight === 'desc' }" v-if="column.key === 'alarm_time'">
                <i class="sort-caret ascending" @click="sortTableData('asc', 'alarm_time', column)"></i>
                <i class="sort-caret descending" @click="sortTableData('desc', 'alarm_time', column)"></i>
              </span>
            </template>
            展示的是 不同的内容 根据column的数据展示 （具体自己根据实际情况去改）
            <template slot-scope="scope">
              
            </template>
          </el-table-column>
        最后一列默认展示的是操作按钮  根据具体情况去写按钮 我这个是滑动之后 展示更多按钮
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="107">
            <template slot-scope="scope">
              <el-dropdown placement="left"
                           @command="(val) => clickMenu(val, scope.row)"
                           @visible-change="(visible) => visibleChange(visible, scope.row)">
                <span class="iconfont iconicon-gengduo"></span>
                <el-dropdown-menu slot="dropdown" class="white is-left">
                  <el-dropdown-item v-for="(item, index) in operator" :key="index" :command="item.key" v-show="!(item.label=='次告警详情'&&(only_major=='0'||$store.state.alarm.alarmType=='0'))">
                    {{item.label}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
// 展示弹出窗 也就是图2
<select-col ref="selectCol" v-show='selectColVisible'
                :modal_title="$t('alarm.view.right[0]')"
                :list="newTableList"
                flag="alarm"
                @search="changeCol"
                @closeDialog="closeBox">
    </select-col>

data () {
      return {
//这个是为了读取本地的文件 因为新的用户可能没有后端返回的参数 所有默认读取本地的文件 展示所有
     colList: this.$store.state.view.lang === 'en' ? alarmDataEn.list : alarmData.list
        }
},
methods:{
//与上面的 sortTableData  排序有关
sortTableData (rule, type, col) {
//传给后端的公共参数
        this.queryObjStr.order_rule = rule
        this.queryObjStr.order_colname = type
        // 设置高亮状态  走一个循环 让每一个对象 加一个key highlight 和value ''
        this.showCol.forEach(item => {
          this.$set(item, 'highlight', '')
        })
//之后让 传入的值覆盖这个value  之后上面html根据动态class 展示样式
        col.highlight = rule
        let params = {
          startIndex: 0,
          pageSize: 50,
          draw: ++this.draw,
          page: 1,
          queryObjStr: JSON.stringify(this.queryObjStr)
        }
        this.loading = true
        this.queryAlarm(params)
    },
//勾选框
    handleSelectionChange (val) {
        this.selectColData = val
        this.idListStr = ''
        for (let i in val) {
          this.idListStr += val[i].alarm_no
          if (i < val.length - 1) this.idListStr += ','
        }
      },
      headerDrag (newWidth, oldWidth, column, event) {
        let currentCol = this.showCol.filter(item => item.key === column.property)
        if (newWidth < currentCol[0].defaultWidth) {
          this.$message.warning(this.$t('alarm.view.right[17]') + currentCol[0].defaultWidth)
          column.width = oldWidth
          return
        }
        let index = this.colList.findIndex(item => item.key === column.property)
        this.colList[index].width = newWidth
      },
//主要方法
      queryAlarmViewColumn (update) {
        this.showCol = []
        this.newTableList = []
//展示后端返回的数据 判断是否展示数据
        alarmApi.queryAlarmViewColumn({ tableType: 'mergeAlarm' }).then(res => {
          let info = res.data.info
          for (let i in info) {
            if (info[i] === '0') {
              this.colList.find(v => {
                if (v.key === i) {
                  this.showCol.push({
                    widget: v.widget,
                    label: v.label,
                    key: i,
                    width: v.width,
                    defaultWidth: v.defaultWidth
                  })
                  return v
                }
              })
            }
          }
// 是为了传到弹出的组件中 展示的顺序 以及个数不会变
          for (let i in info) {
              this.colList.find(v => {
                if (v.key === i) {
                  this.newTableList.push({
                    widget: v.widget,
                    label: v.label,
                    key: i,
                    width: v.width,
                    defaultWidth: v.defaultWidth
                  })
                  return v
                }
              })
          }
//如果后端返回的是空 或者是新的用户 就默认展示本地的json文件 默认展示所有
          if (this.showCol.length === 0) {
            this.showCol = this.colList
            this.newTableList = this.colList
          }
          if (update === 'update') {
            this.$nextTick(function () {
              this.pageCurrentChange(1)
            })
          }
        }).catch(err => {
          console.log(err)
          this.$message.error(this.$t('alarm.view.message[1]'))
          if (update === 'update') {
            this.$nextTick(function () {
              this.pageCurrentChange(1)
            })
          }
        })
      },
}

本地的json 文件部分展示

<style lang="scss">
.highlightAsc{
  .ascending{
    border-bottom-color:#249bff !important
  }
}
.highlightDesc{
  .descending{
    border-top-color:#249bff !important
  }
}
</style>

上面为列表文件

弹出窗部分：

插件：yarn add awe-dnd  或者 npm install awe-dnd  --save

main.js文件

import VueDND from 'awe-dnd'  //引入

Vue.use(VueDND) // 使用

 <modal ref="modal"
         :title="modal_title"
         @doCancelThings="doCancelThings"
         extraClass="select-col-dialog"
         class="select-col dark-tree">
    <div class="select-col-container">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('alarm.view.selectCol[0]')}}</el-checkbox>
<!-- 实现拖动 -->
      <el-checkbox-group v-model="selectCol" @change="handleCheckedChange">
            <el-checkbox
              class="checkSonClass"
              v-for="(item, index) in list" <!-- 数据是父传子传递的 -->
              :label="item.key"
              :key="index"
               @mouseover.native="CheckBoxClick(index)"
               v-dragging="{ item: item, list: list, group: 'item' }" <!-- 拖拽插件 -->
              >{{ item.label }}
              <span class="widthVal">
<!-- 里面展示的列的宽度 -->
            <el-input-number  v-model="newList[index].width" controls-position="right" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input-number>
            px
             </span>
            </el-checkbox>
      </el-checkbox-group>
    </div>
<!-- 确认取消按钮 -->
    <div class="btn-div">
      <el-button type="text" @click="reset">{{cancel_btn_tip}}</el-button>
      <el-button type="primary" @click="save">{{sure_btn_tip}}</el-button>
    </div>
  </modal>

//接收参数
props: {
      'modal_title': {
        required: true
      },
      'list': {
      },
      'flag': {
        default: 'alarm'
      }
    },
//监听 父传过来的参数
watch: {
      list: {
        deep: true,
        immediate: true,
        handler (val) {
          this.newList = JSON.parse(JSON.stringify(val))
        }
      }
    },
mounted () {
//拖拽
this.$dragging.$on('dragged', ({ value }) => {
        this.valData = value.list
      })
}
methods: {
      CheckBoxClick (i) {
        this.activeIndex = i
      },
save () {
        if (this.selectCol.length === 0) {
          this.$message.warning(this.$t('alarm.view.message[16]'))
          return
        }
        let columnDef = {}
        let colunmWidth = {}
       //把拖拽之后的数据 发给后端
        if (this.valData.length !== 0) {
          this.arr = []
          for (let k = 0; k < this.valData.length; k++) {
          this.arr.push(this.valData[k].key)
        }
        this.allCol = this.arr
        } else {
          if (localStorage.getItem('sortArray') == null) {
            let newData = []
            for (let z = 0; z < this.newList.length; z++) {
              newData.push(this.newList[z].key)
            }
            this.allCol = newData
          } else {
             this.allCol = JSON.parse(localStorage.getItem('sortArray'))
          }
        }
        for (let i in this.allCol) {
          if (!this.newList[i].width || parseInt(this.newList[i].width) < this.list[i].defaultWidth || parseInt(this.newList[i].width) > 1300) {
            this.$message.warning(this.list[i].label + this.$t('alarm.msg[0]') + this.list[i].defaultWidth + ', ' + this.$t('alarm.msg[1]') + 1300)
            return
          }
          colunmWidth[this.allCol[i]] = this.newList[i].width
          let index = this.selectCol.findIndex(v => v === this.allCol[i])
          if (index === -1) columnDef[this.allCol[i]] = '1'
          else columnDef[this.allCol[i]] = '0'
        }
        let tableType = ''
        if (this.flag === 'alarm') {
          tableType = 'mergeAlarm'
        } else if (this.flag === 'secondary') {
          tableType = 'minorTable'
        }
        let params = {
          tableType: tableType,
          columnDef: JSON.stringify(columnDef),
          colunmWidth: JSON.stringify(colunmWidth)
        }
        this.saveAlarmViewColumn(params)
//存在本地 防止刷新消失
        localStorage.setItem('sortArray', JSON.stringify(this.allCol))
      }
}