element+vue之 表头字段设置组件拖拽排序重置显示隐藏（vue2+js）

1.el-checkbox实现表格拖拽排序功能用的awe-dnd

         ①安装  npm install awe-dnd --save
         ②在main.js中引入
         import VueDND from 'awe-dnd'
         Vue.use(VueDND)
         主要是v-dragging="{ item: item, list: tableHeadsSon, group: 'item' }"实现拖拽排序

2.在components文件下建立tableHeades.vue文件

<template>
  <div style="display: inline-block; margin-right: 10px">
    <el-popover
      placement="bottom"
      width="179"
      trigger="click"
      v-model="visible"
    >
      <div>
        <div class="flex-between" style="height: 30px">
          <div><p>展示字段</p></div>
          <div>
            <el-button type="text" @click="defineFieldReset()">重置</el-button>
          </div>
        </div>
        <el-checkbox-group
          v-model="checkedCities"
          v-show="renderComponent"
          style="height: 300px"
        >
          <el-scrollbar>
            <el-checkbox
              style="line-height: 26px"
              v-for="(item, index) in tableHeadsSon"
              :label="item.label"
              :key="index"
               @mouseover.native="CheckBoxClick(index)"
              :class="[{ ActiveDashed: index == activeIndex }]"
              v-dragging="{ item: item, list: tableHeadsSon, group: 'item' }"
              >{{ item.label }}
            </el-checkbox>
          </el-scrollbar>
        </el-checkbox-group>
        <div style="text-align: right; margin-top: 4px">
          <el-link
            :underline="false"
            @click="visible = false"
            style="margin-right: 6px"
          >
            取消
          </el-link>
          <el-link type="primary" :underline="false" @click="confirm()"
            >确定</el-link
          >
        </div>
      </div>
      <el-button
        icon="el-icon-setting"
        size="small"
        type="primary"
        plain
        slot="reference"
        >字段设置</el-button
      >
    </el-popover>
  </div>
</template>

export default {
  name: 'tableheades',
  props: {
    // 每个页面设置的字段所有属性
    tableHeads: {
      type: Array,
      default: null
    },
    // 每个页面设置的默认展示字段的lable名称
    rowspanLabels: {
      type: Array,
      default: null
    },
    // 缓存中记录每个页面的key
    tableId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      activeIndex: 0,
      checkedCities: [], // rowspanLabels
      renderComponent: true,
      visible: false,
      tableHeadsSon: [] // tableHeads
    }
  },
  mounted() {
    this.tableHeadsSon = this.tableHeads;
    this.getRowspanLabe();
    this.saveRowspanLabe();
    //拖拽中
    this.$dragging.$on("dragged", ({ value }) => {
      // console.log(value.list); //排序后的数组
    });
    //拖拽完成
    this.$dragging.$on("dragend", (res) => {
      this.saveRowspanLabe();
      localStorage.setItem(
        this.tableId + 'A',
        JSON.stringify(this.tableHeadsSon)
      )
    })
  },
  watch: {
    $route (to, from) {
      this.getRowspanLabe()
      this.saveRowspanLabe()
      this.tableHeadsSon = this.tableHeadsSon.includes(undefined)
        ? JSON.parse(localStorage.getItem(this.tableId + "A"))
        : this.tableHeadsSon;
      this.$forceUpdate();
    },
  },
  computed: {
    computedTableHead: function () {
      localStorage.setItem(this.tableId, JSON.stringify(this.checkedCities))
      // 默认项 以及 选中项
      this.tableHeadsSon = this.tableHeadsSon.includes(undefined)
        ? JSON.parse(localStorage.getItem(this.tableId + "A"))
        : this.tableHeadsSon;
      //console.log(this.tableHeadsSon);
      return this.tableHeadsSon.filter(
        (item) => this.checkedCities.includes(item.label) || item.visible
      )
    },
    checkboxData: function () {
      // 可配置项
      return this.tableHeadsSon.filter((item) => item.setting)
    }
  },
  methods: {
    CheckBoxClick (i) {
      this.activeIndex = i
    },
    // 重置
    defineFieldReset () {
      this.checkedCities = this.rowspanLabels
      this.saveRowspanLabe()
    },
    // 查询Labe
    getRowspanLabe (done) {
      this.checkedCities =
        JSON.parse(localStorage.getItem(this.tableId)) || this.rowspanLabels
      done && done()
      if (localStorage.getItem(this.tableId + 'A')) {
        this.tableHeadsSon = JSON.parse(
          localStorage.getItem(this.tableId + 'A')
        )
        done && done()
      }
    },
    // 保存Labe
    saveRowspanLabe () {
      this.renderComponent = false
      this.$emit('handelrender', this.renderComponent)
      this.$nextTick(() => {
        this.renderComponent = true
        this.$emit('handelrender', this.renderComponent)
      })
      this.$emit('handelconfirmHead', this.computedTableHead)
    },
    // 确定
    confirm () {
      this.renderComponent = false
      this.$emit('handelrender', this.renderComponent)
      this.$nextTick(() => {
        this.renderComponent = true
        this.$emit('handelrender', this.renderComponent)
      })
      this.$emit('handelconfirmHead', this.computedTableHead)
      this.visible = false
    }
  },
  beforeDestroy () {}
}
</script>

<style scoped>
.t_body {
  padding-left: 5px;
}

.cardContainer {
  height: 34px;
  line-height: 34px;
  padding-top: 10px;
}

.cardContainer:hover {
  background-color: #eeeeee;
  color: #409eff;
}
.juzhong {
  vertical-align: middle;
  cursor: pointer;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}
.icon-left {
  /* padding-right: 10px; */
}
.ActiveDashed {
  width: 100%;
  border: 1px dashed #ccc;
  margin: 0 auto;
}
</style>

页面调用组件

<template>
      <table-heads
          :tableId="tableId"
          :tableHeads="tableHeads"
          :rowspanLabels="rowspanLabels"
          @handelconfirmHead="confirmdata"
          @handelrender="renderHide"
          ></table-heads>
</template>
//引入组件
<script>
import tableHeads from "@/components/tableHeades";
//注册
export default {
  name: "Packing",
  components: {
    tableHeads,
  },
   data() {
    return {
      tableId: "Packing",
      confirmHead: [],
      handelrender: true,
      rowspanLabels: [
        "包材编号",
        "包材名称",
      ],
      tableHeads: [
        {
          label: "包材编号",
          prop: "pmCode",
          visible: false,
          setting: true,
          width: "auto",
          arry: false,
          width: "140",
        },
        {
          label: "包材名称",
          prop: "pmName",
          visible: false,
          setting: true,
          width: "auto",
          arry: false,
          width: "140",
        },
      ]
    };
  },
  methods:{
   confirmdata(val) {
      this.confirmHead = val;
      //console.log(val);
    },
    renderHide(val) {
      this.handelrender = val;
    },
  }
  }
  </script>

最后效果