el-transfer穿梭框改造重复选择

Enno.Z

已于 2024-02-22 10:48:56 修改

阅读量2.1k

点赞数 1

分类专栏： element 文章标签： windows Transfers elementui el-transfers

于 2020-03-10 14:14:28 首次发布

本文链接：https://blog.csdn.net/weixin_42717027/article/details/104773344

版权

针对项目特殊需求，本文档详细介绍了如何改造element-ui的el-transfer组件以允许重复选择。通过阅读并理解el-transfer源码，作者进行了组件的封装，并在main.vue文件中进行相关调整，以满足业务逻辑的奇葩要求。

摘要由CSDN通过智能技术生成

根据项目业务要求，实现穿梭框重复选，要求有点奇葩，但是根据业务逻辑也算合理，在查了element-ui的transfer组件之后，硬着头皮下了源码，对transfer组件进行重新封装。。并将文件夹放入项目中
在这里插入图片描述

组件文件main.vue
在Transfer组件文件夹中的main.vue的基础上进行改动

<template>
  <div class="el-transfer">
    <transfer-panel
      v-bind="$props"
      ref="leftPanel"
      :data="sourceData"
      :title="titles[0] || t('el.transfer.titles.0')"
      :default-checked="leftDefaultChecked"
      :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
      @checked-change="onSourceCheckedChange">
      <slot name="left-footer"></slot>
    </transfer-panel>
    <div class="el-transfer__buttons">
      <el-button
        type="primary"
        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
        @click.native="addToLeft"
        :disabled="rightChecked.length === 0">
        <i class="el-icon-arrow-left"></i>
        <span v-if="buttonTexts[0] !== undefined">{
   {
    buttonTexts[0] }}</span>
      </el-button>
      <el-button
        type="primary"
        :class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
        @click.native="addToRight"
        :disabled="leftChecked.length === 0">
        <span v-if="buttonTexts[1] !== undefined">{
   {
    buttonTexts[1] }}</span>
        <i class="el-icon-arrow-right"></i>
      </el-button>
    </div>
    <transfer-panel
      v-bind="$props"
      ref="rightPanel"
      :data="targetData"
      :title="titles[1] || t('el.transfer.titles.1')"
      :default-checked="rightDefaultChecked"
      :placeholder="filterPlaceholder || t('el.transfer.filterPlaceholder')"
      @checked-change="onTargetCheckedChange">
      <slot name="right-footer"></slot>
    </transfer-panel>
  </div>
</template>

<script>
  import ElButton from 'element-ui/packages/