(element-ui) table表格通过多选框控制列表项显隐 table表格列拖拽排序

<template>
  <div class="container">
    <el-card>
      <div class="btn">
        <el-popover placement="right" title="列筛选" trigger="click" width="130">
          <el-checkbox-group v-model="checkedColumns" size="mini">
            <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
          </el-checkbox-group>
          <el-button slot="reference" type="primary" size="small" plain><i class="el-icon-arrow-down el-icon-menu" /> 列表项展示筛选</el-button>
        </el-popover>
      </div>
      <el-table :data="tableData" stripe border row-key="id" align="left" style="width: 100%;text-align:center">
        <el-table-column v-for="(item, index) in dropCol" :key="`col_${index}`" v-if="dropCol[index].istrue" :prop="dropCol[index].prop" :label="item.label" :width="item.width"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
// 安装并引入sortablejs 排序用的
import Sortable from 'sortablejs'
export default {
  data() {
    return {
　　　//表格表头
      dropCol: [
        {
          width: '160',
          label: '订单编号',
          istrue: true,
          prop: 'num1'
        },
        {
          width: '180',
          label: '退款单号',
          istrue: true,
          prop: 'num2'
        },
        {
          label: '订单归属',
          istrue: true,
          prop: 'num3'
        },
        {
          label: '销售渠道',
          istrue: true,
          prop: 'num4'
        },
        {
          label: '退款渠道',
          istrue: true,
          prop: 'num5'
        },
        {
          label: '退款时间',
          istrue: true,
          prop: 'num6'
        },
        {
          width: '160',
          label: '订单数量',
          istrue: true,
          prop: 'num7'
        },
        {
          label: '订单金额',
          istrue: true,
          prop: 'num8'
        }
      ],
　　//表格表头
      col: [
        {
          width: '160',
          label: '订单编号',
          istrue: true,
          prop: 'num1'
        },
        {
          width: '180',
          label: '退款单号',
          istrue: true,
          prop: 'num2'
        },
        {
          label: '订单归属',
          istrue: true,
          prop: 'num3'
        },
        {
          label: '销售渠道',
          istrue: true,
          prop: 'num4'
        },
        {
          label: '退款渠道',
          istrue: true,
          prop: 'num5'
        },
        {
          label: '退款时间',
          istrue: true,
          prop: 'num6'
        },
        {
          width: '160',
          label: '订单数量',
          istrue: true,
          prop: 'num7'
        },
        {
          label: '订单金额',
          istrue: true,
          prop: 'num8'
        }
      ],
      checkBoxGroup: [],
      checkedColumns: [],
　　　　//表格 行 数据
      tableData: [
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00',
          num14: '5.00'
        },
        {
          id: '1',
          num1: '8975972309-84085',
          num2: 'TK_8475970984099',
          num3: '荣誉小区',
          num4: '线上',
          num5: '线上',
          num6: '2021-09-09 12:34:13',
          num7: '50',
          num8: '32.00'
        }
      ]
    }
  },
  created() {
    // 列筛选
    this.dropCol.forEach((item, index) => {
      this.checkBoxGroup.push(item.label)
      this.checkedColumns.push(item.label)
    })
    this.checkedColumns = this.checkedColumns
    let UnData = localStorage.getItem(this.colTable)
    UnData = JSON.parse(UnData)
    if (UnData != null) {
      this.checkedColumns = this.checkedColumns.filter(item => {
        return !UnData.includes(item)
      })
    }
  },
  // 监听列隐藏
  watch: {
    checkedColumns(val, value) {
      let arr = this.checkBoxGroup.filter(i => !val.includes(i)) // 未选中
      localStorage.setItem(this.colTable, JSON.stringify(arr))
      this.dropCol.filter(i => {
        if (arr.indexOf(i.label) != -1) {
          i.istrue = false
        } else {
          i.istrue = true
        }
      })
    }
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.columnDrop()
  },
  methods: {
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        // onEnd拖拽结束后的回调
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>