el-Transfer 穿梭框重写左右拖拽排序及点击复选框组件

已于 2024-07-15 16:34:58 修改
阅读量277 收藏 2
点赞数 6
文章标签： 前端 vue
于 2024-06-06 17:07:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzq_828/article/details/139505101
版权

  1. 适用组件：

    导入，注册组件，然后使用

    <DragTransfer
          :checkedSearchList="checkedSearchList"
          leftTitle="未展示筛选项"
          rightTitle="常用筛选区"
          :data="checkedSearchLists"
          :props="transferProps"
          @chageRightData="updateSelectedItems"
        ></DragTransfer>

    参数解释：

    :checkedSearchList="checkedSearchList"  右边已选择的数据
 :data="data" 所有数据，左边和右边一起的数据
leftTitle="未选择字段"  左边标题
 rightTitle="已选择字段" 右边标题
:props="transferProps" 字段映射
@chageRightData="updateSelectedItems" 接受子组件传递的值

    vue  data中定义：

    transferProps: {
        value: "rfidSetId",
        label: "rfidSetName",
      },

  2. 左右拖拽加复选组件：

    src/components/DragTransfer.vue

<template>
  <div class="drag-transfer">
    <div class="drag-transfer-content">
      <div class="drag-transfer-left">
        <span class="tipSapn1"></span>
        <div class="drag-transfer-title">
          {{ leftTitle }}
          <span class="dragSpan">可拖拽字段进行配置</span>
        </div>
        <div
          id="left"
          class="drag-transfer-item"
          @drop="drop"
          @dragover="allowDrop"
        >
          <template v-for="(item, index) in leftData">
            <div
              :key="index"
              draggable="true"
              @dragstart="dragstart"
              :id="item.key"
              @click="checkLeftElement(item)"
              :class="[
                'drag-transfer-item-name',
                item.checked ? 'dragActive' : '',
              ]"
            >
              <input
                class="checkInput"
                type="checkbox"
                v-model="item.checked"
                @change="checkboxLeftChanged(item)"
              />
              <span class="checkSpan">{{ item.label }}</span>
            </div>
          </template>
        </div>
      </div>
      <div class="drag-transfer-center">
        <div class="twoImage">
          <img
            src="@/assets/img/toLeft.png"
            alt=""
            v-if="checkRight.length === 0"
          />
          <img
            src="@/assets/img/toLeftBG.png"
            alt=""
            v-if="checkRight.length !== 0"
            @click="turnLeft"
          />
          <img
            src="@/assets/img/toRight.png"
            alt=""
            v-if="checkLeft.length === 0"
          />
          <img
            src="@/assets/img/toRightBG.png"
            alt=""
            v-if="checkLeft.length !== 0"
            @click="turnRight"
          />
        </div>
      </div>

      <div class="drag-transfer-right">
        <span class="tipSapn1"></span>
        <div class="drag-transfer-title">{{ rightTitle }}</div>
        <div
          id="right"
          class="drag-transfer-item"
          @drop="drop"
          @dragover="allowDrop"
        >
          <template v-for="(item, index) in rightData">
            <div
              :key="index"
              draggable="true"
              @dragstart="dragstart"
              :id="item.key"
              :class="[
                'drag-transfer-item-name',
                item.checked ? 'dragActive' : '',
              ]"
            >
              <input
                class="checkInput"
                type="checkbox"
                v-model="item.checked"
                @change="checkboxRightChanged(item)"
              />
              <span class="checkSpan">{{ item.label }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "drag-transfer",
  model: {
    prop: "rightData",
    event: "chageRightData",
  },
  props: {
    rightData: {
      type: Array,
      default: () => [],
    },
    checkedSearchList: {
      type: Array,
      default: () => [],
    },
    leftTitle: {
      type: String,
      default: "未选择",
    },
    rightTitle: {
      type: String,
      default: "已选择",
    },
    props: {
      type: Object,
      default: () => ({
        value: "value",
        label: "label",
      }),
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      leftData: [],
      rightData: [],
      tableData: [],
      leftKey: "",
      checkLeft: [],
      checkRight: [],
    };
  },
  mounted() {
    this.rightData = this.checkedSearchList;
  },
  watch: {
    data: {
      handler(val) {
        const self = this;
        this.leftData = [];
        this.data.forEach(function (element) {
          const index = self.rightData.findIndex(
            (x) => x["key"] == element["key"]
          );
          if (index == -1) {
            self.leftData.push(element);
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    // 选中左侧元素
    checkLeftElement(val) {
      this.leftKey = val.key;
    },
    // 左侧选中的元素
    checkboxLeftChanged(value) {
      if (value.checked) {
        this.checkLeft.push(value);
      } else {
        const index = this.checkLeft.findIndex((obj) => obj.key === value.key);
        if (index !== -1) {
          this.checkLeft.splice(index, 1);
        }
      }
    },
    // 右侧选中的元素
    checkboxRightChanged(value) {
      if (value.checked) {
        this.checkRight.push(value);
      } else {
        const index = this.checkRight.findIndex((obj) => obj.key === value.key);
        if (index !== -1) {
          this.checkRight.splice(index, 1);
        }
      }
    },
    // 向右
    turnRight() {
      let pushRight = this.checkLeft.map((item) => {
        return { ...item, status: true };
      });
      pushRight.forEach((item) => {
        item.checked = false;
        if (!this.rightData.some((obj) => obj.key === item.key)) {
          this.rightData.push(item);
        }
      });
      this.checkLeft = [];
      this.leftData = this.leftData.filter((x) => x["checked"] !== true);
      this.$emit("chageRightData", this.rightData);
    },
    // 向左
    turnLeft() {
      let modifiedArray = this.checkRight.map((item) => {
        const { status, ...rest } = item;
        return { ...rest, checked: false };
      });
      modifiedArray.forEach((item) => {
        if (!this.leftData.some((obj) => obj.key === item.key)) {
          this.leftData.push(item);
        }
      });
      this.checkRight = [];
      this.rightData = this.rightData.filter((x) => x["checked"] !== true);
      this.$emit("chageRightData", this.rightData);
    },
    switchLeftNumber(sourceObj, targetObj) {
      const self = this;
      const sourceIndex = this.getLeftIndex(sourceObj["key"]);
      const targetIndex = this.getLeftIndex(targetObj["key"]);

      let arr = JSON.parse(JSON.stringify(this.leftData));
      arr[sourceIndex] = targetObj;
      arr[targetIndex] = sourceObj;
      this.leftData = arr;
    },
    switchRightNumber(sourceObj, targetObj) {
      const self = this;
      const sourceIndex = this.getRightIndex(sourceObj["key"]);
      const targetIndex = this.getRightIndex(targetObj["key"]);
      let arr = JSON.parse(JSON.stringify(this.rightData));
      arr[sourceIndex] = targetObj;
      arr[targetIndex] = sourceObj;
      this.rightData = arr;

      // for (const element of this.rightData) {
      //   if (element["key"] == sourceObj["key"]) {
      //     console.log("targetObj", element, targetObj);
      //     // element = targetObj;
      //   }
      //   if (element["key"] == targetObj["key"]) {
      //     console.log("sourceObj", element, sourceObj);
      //     // element = sourceObj;
      //   }
      // }
    },
    dragRightToLeft(sourceData, tagetId) {
      sourceData.status = false;
      if (tagetId & (tagetId != "left")) {
        //放到元素上，在此处插入
        const targetIndex = this.leftData.findIndex((x) => x["key"] == tagetId);
        this.leftData.splice(targetIndex, 0, sourceData);
      } else {
        //未放到元素上，追加尾部
        this.leftData.push(sourceData);
      }
      this.rightData = this.rightData.filter(
        (x) => x["key"] != sourceData["key"]
      );
    },
    dragLeftToRight(sourceData, tagetId) {
      sourceData.status = true;
      if (tagetId && tagetId != "right") {
        //放到元素上，在此处插入
        const targetIndex = this.rightData.findIndex(
          (x) => x["key"] == tagetId
        );
        this.rightData.splice(targetIndex, 0, sourceData);
      } else {
        //未放到元素上，追加尾部
        this.rightData.push(sourceData);
      }
      this.leftData = this.leftData.filter(
        (x) => x["key"] != sourceData["key"]
      );
    },
    getDataById(id) {
      const dataList = this.data.filter((x) => x["key"] == id);
      return dataList ? dataList[0] : {};
    },
    getRightDataById(id) {
      const dataList = this.rightData.filter((x) => x["key"] == id);
      return dataList ? dataList[0] : {};
    },
    getLeftIndex(id) {
      return this.leftData.findIndex((x) => x["key"] == id);
    },
    getRightIndex(id) {
      return this.rightData.findIndex((x) => x["key"] == id);
    },
    getLeftDataById(id) {
      const dataList = this.leftData.filter((x) => x["key"] == id);
      return dataList ? dataList[0] : {};
    },
    allowDrop(ev) {
      ev.preventDefault();
    },
    dragstart(ev) {
      ev.dataTransfer.setData("id", ev.target.id);
    },
    drop(ev) {
      ev.preventDefault();
      debugger;
      const source_id = ev.dataTransfer.getData("id");
      const targetElement = ev.target.closest("[id]");
      const target_id = targetElement ? targetElement.id : "";
      if (source_id && target_id) {
        const left_source_obj = this.getLeftDataById(source_id);
        const left_target_obj = this.getLeftDataById(target_id);
        const right_source_obj = this.getRightDataById(source_id);
        const right_target_obj = this.getRightDataById(target_id);
        if (left_source_obj && (right_target_obj || target_id == "right")) {
          //左边-右边
          this.dragLeftToRight(left_source_obj, target_id);
        } else if (
          right_source_obj &&
          (left_target_obj || target_id == "left")
        ) {
          //右边-左边
          this.dragRightToLeft(right_source_obj, target_id);
        } else if (
          left_source_obj &&
          (left_target_obj || target_id == "left")
        ) {
          //左边调换顺序
          this.switchLeftNumber(left_source_obj, left_target_obj);
        } else if (
          right_source_obj &&
          (right_target_obj || target_id == "right")
        ) {
          if (target_id == "right") {
            this.rightData = this.rightData.filter(
              (x) => x["key"] != right_source_obj["key"]
            );
            this.rightData.push(right_source_obj);
          } else {
            //右边调换顺序
            this.switchRightNumber(right_source_obj, right_target_obj);
          }
        }
      }
      this.$emit("chageRightData", this.rightData);
    },
  },
};
</script>
<style scoped lang="scss">
.drag-transfer {
  margin: 0;
  padding: 0;
  height: 450px;
}
.tipSapn1 {
  display: inline-block;
  width: 4px;
  height: 14px;
  background: #4353e2;
  float: left;
  margin-right: 6px;
  margin-top: 3px;
}
.drag-transfer-title {
  font-family: PingFangSC, PingFang SC;
  margin-bottom: 18px;
  font-weight: 500;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-style: normal;
}
.dragSpan {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #a6acbd;
  line-height: 14px;
  text-align: left;
  font-style: normal;
}
.drag-transfer-content {
}
.drag-transfer-item {
  width: 280px;
  height: 368px;
  /* width: 260px; */
  /* height: 100%; */
  background: #fafbfc;
  border-radius: 4px;
  border: 1px solid #d7e3ff;
  overflow-y: auto;
  overflow-x: hidden;
}
.drag-transfer-left {
  float: left;
  height: 400px;
}
.drag-transfer-center {
  float: left;
  height: 400px;
  width: 52px;
}
.drag-transfer-right {
  float: left;
  height: 400px;
}
.drag-transfer-item-name {
  width: 112px;
  height: 30px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #dce4f6;
  margin-left: 19px;
  margin-top: 19px;
  float: left;
}
input[type="checkbox"] {
  background: #ffffff;
  border-radius: 2px;
  margin-top: 6px;
  float: left;
  margin-left: 11px;
  margin-right: 7px;
  width: 16px;
  height: 16px;
}
.checkSpan {
  display: inline-block;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 30px;
  text-align: center;
  font-style: normal;
}

input[type="checkbox"]::after {
  color: #000;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 2px;
}
input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  background-color: #4a5de8;
  border-radius: 3px;
}
.dragActive {
  border-radius: 2px;
  border: 1px solid #4353e2;
}
.twoImage {
  height: 84px;
  margin-top: 168px;
  img {
    margin-bottom: 28px;
    margin-left: 12px;
    cursor: pointer;
  }
}
</style>

zzq_828
关注
php穿梭框多选,element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能
weixin_31368989的博客
03-12 1038
v-model="value"filterable:data="data":filter-method="filterMethod":target-order="'push'":titles="['左边数据', '右边数据']":props="{ key: 'id', label: 'label' }":left-default-checked="hasCheckedWHLeftData"@lef...
修改el-transfer穿梭框的默认按钮颜色
weixin_43817709的博客
11-16 2323
element的el-transfer穿梭框很好用，但是总有满足不了业务的需求的时候，
vue 穿梭框 组件
qq_40247562的博客
06-28 7575
前言：由于项目需要，element ui 里面的穿梭框不满足需求，所以自己封装了一个穿梭框，此穿梭框为三个，可以两两穿梭。 如下图： 代码如下：如有bug ,欢迎指出； 其实数据的传输，最好用vuex 来做；下面用的props ,监听来做的。 其中需要判断的几个点：大家参考下 1）：操作按钮什么情况下可以点，什么情况下致灰；利用:disabled 来判断的 2）：穿梭框里面的选项，什...
如何实现element-plus的transfer组件拖动排序？
最新发布
yyXieDaiMa的博客
07-02 551
自定义指令实现element-plus的transfer组件拖动排序
el-transfer穿梭框拖拽排序
X_iao_yun的博客
02-18 1025
【代码】el-transfer穿梭框拖拽排序。
element plus组件el-transfer拖拽排序功能实现
qq_40731891的博客
06-14 794
element plus 组件el-transfer拖拽排序功能
element el-transfer组件实现右侧列表可拖拉拽效果
.伊泽瑞尔
07-27 1243
需求是实现Transfer 穿梭框选中的数据列表，可以拖拉拽进行排序功能。主要是使用到了sortablejs插件。首先安装sortablejs。再使用的vue文件中引用插件。
element-ui el-transfer添加拖拽排序功能
weixin_43452622的博客
03-24 1914
【代码】element-ui el-transfer添加拖拽排序功能。
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
1、勾选左侧的功能资源，点击【添加】，可将内容添加到右侧，并且左侧勾选的数据删除；勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 3、保存后点击编辑，左侧显示未...
vue+element-ui实现穿梭框数据自定义排序
12-05
接下来，创建一个Vue组件，使用Element-UI的`el-transfer`组件。在模板中，我们可以这样设置： ```html <el-transfer :data="sourceData" :props="{ label: 'name' }" :titles="['左侧', '右侧']" v-model=...
bpo-elt-transfer:基于elementui 的表格穿梭框，参照了elt-transfer
04-16
更改了props 和表格的列定义方式，使其更贴合原生el-transfer 和el-table 的使用。提高了客制化能力，并且使用方式更符合直觉。 安装 npm install bpo-elt-transfer 使用 在main.js文件中引入插件并注册 import ...
vue/element穿梭框组件
03-08
vue/element穿梭框组件
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
树转移 简介 el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要的写成！不是在element-ui的穿梭框组件上的扩展，而明显参照了其外观样式和功能。 因为公司业务使用vue框架，ui库使用的element-ui。在城市表面找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外其他重量级插件，因此就有了el-tree-transfer。轻量，
Vue实现穿梭框效果
10-14
主要为大家详细介绍了Vue实现穿梭框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【JavaScript源代码】vue element el-transfer增加拖拽功能.docx
12-29
通过以上代码，我们就成功地为`el-transfer`组件增加了拖拽排序功能，用户现在可以在左右两个列表之间以及列表内部自由拖动选项，实现数据的动态排序。同时，我们也处理了在拖拽过程中可能出现的边界情况，如从右边...
ElEment el-transfer穿梭框实现拖拽功能(包含多选拖拽)
juvenile_Li的博客
09-16 1711
目前项目中需要实现一个可拖拽的穿梭框并且是要多选，看了网上很多资料只有单选拖拽, 自己动手丰衣足食吧！目前写出的效果勉强够用，但是多选拉取时的重影还未实现, 有想法的可以留言一块改进!首先在element组件库提供的穿梭框组件(el-transfer)的基础上去增加拖拽功能,
vue2 element el-transfer穿梭框组件支持拖拽及排序 已封装，随取随用
Taurus_666
11-23 2952
vue2项目中使用element 中的穿梭框组件时支持拖拽排序功能
vue—穿梭框组件
qq_45234274的博客
05-17 4175
一、语言：vue 二、实现效果：1、左侧框选择后在右侧有显示，右侧框内点击每一条后面的图标可以删除在右侧显示的，同时左侧的多选框取消选中。2、左侧有一个本地的模糊搜索框。3、完成组件效果，要求适配多处 三、HTML+css 样式 <div class="transfer-box"> //左边的部分 <div class="transfer-box-left"> <div class="box-title">
el-transfer穿梭框改造 重复选择
猫大人的博客
03-10 2158
根据项目业务要求，实现穿梭框重复选，要求有点奇葩，但是根据业务逻辑也算合理，在查了element-ui的transfer组件之后，硬着头皮下了源码，对transfer组件进行重新封装。。 组件文件main.vue 在Transfer组件文件夹中的main.vue的基础上进行改动 <template> <div class="el-transfer"> <t...
el-transfer穿梭框单选
06-09
要实现 el-transfer 穿梭框单选，可以通过设置 `:show-checkbox` 属性为 `true`，并将 `:check-position` 属性设置为 `left` 或 `right`，然后在 `:data` 属性中为每个选项添加一个 `checked` 属性，用于表示该选项是否已被选中。当用户点击某个选项时，可以在 `@change` 事件中处理选中状态的改变，例如： ```html <el-transfer v-model="selectedData" :data="data" :show-checkbox="true" :check-position="'left'" @change="handleChange" > </el-transfer> ``` ```javascript export default { data() { return { selectedData: [], data: [ { key: '1', label: '选项1', checked: false }, { key: '2', label: '选项2', checked: false }, { key: '3', label: '选项3', checked: false }, { key: '4', label: '选项4', checked: false } ] } }, methods: { handleChange() { // 在 @change 事件中处理选中状态的改变 this.data.forEach(item => { item.checked = this.selectedData.indexOf(item.key) !== -1 }) } } } ``` 这样，就可以实现 el-transfer 穿梭框单选的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值