基于element-ui穿梭框来控制元素显示隐藏，以及通过拖拽来实现元素位置的变动，以及恢复元素初始状态功能

基于element-ui穿梭框来控制元素显示隐藏，以及通过拖拽来实现元素位置的变动，以及恢复元素初始状态功能

（此块功能逻辑为本人在项目中使用（写法low,请见谅），安全可靠（本人项目实现的是列表表头的列的显示隐藏以及拖拽排序） tableHead为表头数据）
一、创建公共子组件Transfer.vue

<template>
  <div class="demo">
    <el-transfer
      v-model="value"
      filterable
      :data="datalist"
      :filter-method="filterMethod"
      :target-order="'push'"
      :titles="['不显示', '自定义排序/显示']"
      :props="{ key: 'id', label: 'label' }"
      :left-default-checked="hasCheckedWHLeftData"
      :right-default-checked="hasCheckedWHRightData"
    ></el-transfer>
    <el-button type="primary" @click="callFather" size="small" class="btnzj">确定</el-button>
    <el-button type="primary" @click="godefault" size="small" class="btnhf">恢复默认</el-button>
  </div>
</template>
<script>
import Sortable from "sortablejs";
// console.log(this.tableHead)
export default {
  name: "DragSortMultiSelect",
  data() {
    return {
      filterMethod(query, item) {
        let regStr = query.replace(/\*/g, ".*");
        let reg = new RegExp(regStr);
        return reg.test(item.label);
      },
      datalist: [],
      value: [],
      shiftKey: false,
      firstWHLeftLocation: -1, //数据左边起始值
      lastWHLeftLocation: -1, //数据左边终止值
      hasCheckedWHLeftData: [], //数据左边选中的数据
      firstWHRightLocation: -1, //数据右边起始值
      lastWHRightLocation: -1, //数据右边终止值
      hasCheckedWHRightData: [] //数据右边选中的数据
    };
  },
  props: ["tableHead", "tableHeadBF"],
  mounted() {
    var _this = this;
    setTimeout(function() {
      for (let i = 0; i < _this.tableHeadBF.length; i++) {
        _this.datalist.push({
          id: _this.tableHeadBF[i].id,
          label: _this.tableHeadBF[i].label,
          disabled: _this.tableHeadBF[i].disabled
        });
      }
      for (let i = 0; i < _this.tableHead.length; i++) {
        _this.value.push(_this.tableHead[i].id);
      }
    }, 500);
    window.addEventListener("keydown", e => {
      if (e.keyCode === 16 && e.shiftKey) {
        this.shiftKey = true;
      }
    });
    window.addEventListener("keyup", e => {
      this.shiftKey = false;
    });
    let el = document
      .querySelector(".el-transfer")
      .querySelectorAll(".el-checkbox-group")[1];
    new Sortable(el, {
      forceFallback: false,
      onUpdate: event => {
        let box = this.$el
          .querySelector(".el-transfer")
          .querySelectorAll(".el-checkbox-group")[1];
        let nums = this.$el
          .querySelector(".el-transfer")
          .querySelectorAll(".el-checkbox-group")[1].childNodes.length;
        console.log(nums, event.newIndex);
        if (event.newIndex >= nums) {
          return;
        }
        let newIndex = event.newIndex;
        let oldIndex = event.oldIndex;
        let $label = box.children[newIndex];
        let $oldLabel = box.children[oldIndex];
        box.removeChild($label);
        if (newIndex < oldIndex) {
          box.insertBefore($label, $oldLabel);
        } else {
          box.insertBefore($label, $oldLabel.nextSibling);
        }
        let item = this.value.splice(oldIndex, 1);
        this.value.splice(newIndex, 0, item[0]);
      }
    });
  },
  methods: {
    callFather() {
      var _this = this;
      if (_this.value.length == 0) {
        _this.$message({
          type: "error",
          message: "至少选择一列！"
        });
        return false;
      }
      _this.$emit("valueChange", _this.value);
    },
    godefault() {
      this.datalist = [];
      this.value = [];
      for (let i = 0; i < this.tableHeadBF.length; i++) {
        this.datalist.push({
          id: this.tableHeadBF[i].id,
          label: this.tableHeadBF[i].label,
          disabled: this.tableHeadBF[i].disabled
        });
      }
      for (let i = 0; i < this.tableHeadBF.length; i++) {
        this.value.push(this.tableHeadBF[i].id);
      }
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
/deep/ .el-transfer__buttons {
  /deep/ button {
    display: block;
    margin: 0;
    &:first-child {
      margin-bottom: 12px;
    }
  }
}

.demo {
  text-align: left;
  width: 540px;
  position: relative;
  margin: 0 auto;
  margin-top: 30px;
}
.btnzj {
  margin-top: 20px;
  float: right;
}
.btnhf {
  margin-top: 20px;
  float: right;
  margin-right: 20px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
  text-align: left;
  width: 300px;
  height: 300px;
  background-color: #42b983;
  overflow: scroll;
}
li {
  display: block;
  margin: 20px 10px;
  border: 1px solid #444;
}
a {
  color: #42b983;
}
</style>

二、在父组件中

 <Transfer
	 @valueChange="valueChange"
	 :tableHead="tableHead"
	 :tableHeadBF="JSON.parse(tableHeadBF)"
 ></Transfer>
import Transfer from "../../components/Transfer";
export default {
  data() {
    return {
      tableHeadBF: [],//恢复元素初始状态时使用
      removeheadlist : [],
      tableHead: [
        {
          label: "汽车",
          id: 0,
          disabled: true//不可穿梭
        },

        {
          label: "自行车",
          id: 1,
          disabled: true//不可穿梭
        },
        {
          label: "轮船",
          id: 2,
          disabled: false//可穿梭
        },
        {
          label: "大卡车",
          id: 3,
          disabled: false
        },
        {
          label: "火车",
          id: 4,
          disabled: false
        },
        {
          label: "飞机",
          id: 5,
          disabled: false
        },
        {
          label: "摩托车",
          id: 6,
          disabled: false
        }
      ]
    };
  },
  // 注册组件
 components: { Transfer },
  methods: {
     valueChange(parm) {
      this.removeheadlist = [];
      for (var i = 0; i < parm.length; i++) {
        for (var j = 0; j < JSON.parse(this.tableHeadBF).length; j++) {
          if (parm[i] == JSON.parse(this.tableHeadBF)[j].id) {
            this.removeheadlist.push(JSON.parse(this.tableHeadBF)[j]);
          }
        }
      }
      this.tableHead = this.removeheadlist;
    },

完！