element ui 穿梭框_改造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(){