改造ElementUI穿梭框

最近，在做公司项目过程中，遇到了一个小需求，就是给客户选择套餐的某一种属性的时候，有些属性是有数值的，开始想用table去做但是太low，因为项目是用vuejs作为前端技术，element作为辅助ui，所以就想用element-ui的穿梭框来完成这样一件事情。

但是，穿梭框的功能有限，所以想到自己来改造一下他。先去github上看一下element的源码：https://github.com/ElemeFE/element

进入目录 element/packages/transfer/src，把里面的两个文件拷贝出来，先解读一下源码，其实穿梭框中可定制的地方可以很多，看你的脑洞有多大，我根据需求，给每一项添加一个计数器，首先什么样的数据需要计数器，

改造 transfer-panel

在transfer-panel.vue设定来几个属性：isNumber，Number，minNumber，maxNumber，tooltip，isShowInput，panelWidth。

Script

props: {
      data: {
        type: Array,
        default() {
          return [];
        }
      },
      isShowInput:false,
      panelWidth:{
          type:Number,
          default(){
              return 200
          }
      },
      renderContent: Function,
      placeholder: String,
      title: String,
      filterable: Boolean,
      format: Object,
      filterMethod: Function,
      defaultChecked: Array,
      props: Object
    }

computed:{

      isNumberProp(){

        return this.props.isNumber || 'isNumber';

      },

      NumberProp(){

        return this.props.Number || 'Number';

      },

      MinNumberProp(){

        return this.props.usedMin || 'usedMin'

      },

      MaxNumberProp(){

        return this.props.usedMax || 'usedMax'

      },

      tooltipProp(){

        return this.props.tooltip || 'tooltip';

      },

}

Template

<el-checkbox-group
        v-model="checked"
        v-show="!hasNoMatch && data.length > 0"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list">
        <el-checkbox
          class="el-transfer-panel__item"
          :label="item[keyProp]"
          :disabled="item[disabledProp]"
          :key="item[keyProp]"
          v-for="item in filteredData">
          <option-content :option="item"></option-content>
          <el-tooltip v-if="item[isNumberProp] && isShowInput"  class="item" effect="dark" :content="item[labelProp]+'('+item[tooltipProp]+')'" placement="top">
           <el-input-number class="fr m-r-5" v-model="item[NumberProp]" size="small" style="width:100px!important" controls-position="right" :min="item[MinNumberProp]" :max="item[MaxNumberProp]" :label="item[tooltipProp]"></el-input-number>
          </el-tooltip>
        </el-checkbox>
      </el-checkbox-group>

属性描述，其余属性继承ElmentUI的穿梭框

http://element-cn.eleme.io/#/zh-CN/component/transfer

改造 Index.vue

Script

props:{
      panelWidth: Number,
      isShowLeftInput: Boolean,
      isShowRightInput: Boolean,
}

Template

<div class="el-transfer">
    <transfer-panel
      v-bind="$props"
      :data="sourceData"
      :title="titles[0]"
      :panelWidth="panelWidth"
      :isShowInput="isShowLeftInput"
      :default-checked="leftDefaultChecked"
      :placeholder="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"
      :data="targetData"
      :title="titles[1]"
      :panelWidth="panelWidth"
      :isShowInput="isShowRightInput"
      :default-checked="rightDefaultChecked"
      :placeholder="filterPlaceholder"
      @checked-change="onTargetCheckedChange">
      <slot name="right-footer"></slot>
    </transfer-panel>

属性描述

使用

import CusTransfer from "@/components/customer/Transfer/index"

<cus-transfer 
        v-model="selectedElements" 
        :data="elements" 
        :titles="['备选', '已选']" 
        :panelWidth="300" 
        :isShowLeftInput="false" 
        :isShowRightInput="true">
</cus-transfer>

效果

好了，大概就这么一个思路，希望能帮到你们，第一次写博文，不喜勿喷啊