vue2 elementUI vuedraggable实现表格栏位设置可拖拽

效果

1，安装    "vuedraggable": "^2.23.2",

2，在src/components/SetTableHeader下新建NewSetTableHeader

<template>
  <div style="display: inline-block;">
    <span
      ref="popBtn"
      class="fliters"
      style="width: 20px;height:16px"
      title="筛选"
      @click="handlerClick"
    ><i class="iconfont icon-fliter"></i>
    </span>
    <el-dialog
      title="栏位设置"
      :visible.sync="visible"
      width="900px"
      v-dialogDrag
      :modal-append-to-body="false"
      :before-close="handleClose"
    >
    <div slot="title" class="dialog-title">
      <i class="iconfont icon-apply"></i>
      <span class="title-text">栏位设置</span>
    </div>
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <el-checkbox-group v-model="checkList" @change="handleChecked">
        <el-row>
          <vuedraggable
            class="wrapper"
            v-model="showList"
            :options="{ animation: 500 }"
          >
            <transition-group>
              <el-col :span="6" v-for="item in showList" :key="item.prop || item.name">
                <el-checkbox :label="item.prop || item.name" :title="item.label || item.displayName">
                  {{ item.label || item.displayName}}
                </el-checkbox>
              </el-col>
            </transition-group>
          </vuedraggable>
        </el-row>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="defaultBtn"
          style="margin-right:8px"
          @click="handleOk"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import vuedraggable from 'vuedraggable'
  export default {
    components: { vuedraggable },
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data () {
      return {
        visible: false,
        checkList: [],
        showList: [],
        top: 0,
        checkAll: false,
      }
    },
    watch: {
    },
    mounted() {
      this.showList = this.list.filter(ele => {
        return ele.name !== 'CHECKBOX' && (ele.visible || !ele.hasOwnProperty('visible'))
      })
      this.showList.forEach(ele => {
        if (ele.checked) {
          this.checkList.push(ele.prop || ele.name);
        }
      });
      if (this.checkList.length === this.showList.length) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
    },
    methods: {
      handlerClick() {
        this.visible = true
      },
      handleChecked() {
      },
      handleOk() {
        this.showList.forEach(col => {
          col.checked = this.checkList.includes(col.prop || col.name)
        })
        const arr = this.showList.filter(ele => {
          return this.checkList.includes(ele.prop || ele.name)
        })
        this.$emit('on-change', arr, this.showList)
        this.visible = false;
      },
      handleCheckAllChange() {
        console.log(this.checkAll, 'this.checkAll')
        this.showList.forEach(ele => {
          ele.checked == this.checkAll;
          if (this.checkAll) {
            this.checkList.push(ele.prop || ele.name);
          } else {
            this.checkList = [];
          }
        });
      },
      handleClose() {
        this.visible = false;
      }
    }
  }
</script>
<style scoped lang="less">
  .table-header-dialog{
    position: relative;

    .el-checkbox-group{
      position: absolute;
      top: 10px;
      right: -10px;
      z-index: 9;
      width: 135px;
      max-height: 300px;
      border-radius: 4px;
      overflow-y: scroll;
      background: #fff;
      border: 1px solid #e4e4e4;
      padding: 10px;
      box-sizing: border-box;
      /deep/ .el-checkbox{
        margin-right: 0;
        display: flex;
        align-items: center;
        .el-checkbox__label{
          width: 99px;
          white-space: nowrap;
          overflow:hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .el-checkbox-group::-webkit-scrollbar {
      display: none;/*隐藏滚动条*/
    }
  }

</style>

3，使用

    import NewSetTableHeader from '@/components/SetTableHeader/NewSetTableHeader'
    components: {
      NewSetTableHeader
    },

          <NewSetTableHeader
            data-intro="筛选:过滤列"
            data-step="2"
            :list="headerColumn"
            @on-change="handClick"
          />

  const tableColumn = [
     {
      prop: 'itemCode',
      label: '物料编码',
      checked: true,  //checked必须有，否则无法生效
      width: 130
    },
    {
      prop: 'importTime',
      label: '导入时间',
      checked: true,
      width: 130
    },
    {
      prop: 'projectName',
      label: '项目名称',
      checked: true,
      width: 150
    },
    {
      prop: 'projectManage',
      label: '项目经理',
      checked: true,
      width: 80
    },
    {
      prop: 'orderNo',
      label: '单据编号',
      checked: true
    },
    {
      prop: 'orderType',
      label: '单据类型',
      checked: true
    },
    {
      prop: 'orderCon',
      label: '单据内容',
      checked: true
    },
    {
      prop: 'level',
      label: '等级',
      checked: true
    },
    {
      prop: 'number',
      label: '数字',
      checked: true
    }
  ]
 data() {
    return {
      tableColumn, // 列表头字段
      headerColumn: this.$copy(tableColumn),
   }
  }

      handClick(data) {
        this.tableColumn = this.$copy(data)
      },