最近吮炕，在做公司項(xiàng)目過程中，遇到了一個(gè)小需求醉锄，就是給客戶選擇套餐的某一種屬性的時(shí)候乏悄，有些屬性是有數(shù)值的，開始想用table去做但是太low恳不，因?yàn)轫?xiàng)目是用vuejs作為前端技術(shù)檩小，element作為輔助ui，所以就想用element-ui的穿梭框來完成這樣一件事情烟勋。
image
但是规求，穿梭框的功能有限，所以想到自己來改造一下他卵惦。先去github上看一下element的源碼：https://github.com/ElemeFE/element
進(jìn)入目錄 element/packages/transfer/src阻肿，把里面的兩個(gè)文件拷貝出來，先解讀一下源碼沮尿，其實(shí)穿梭框中可定制的地方可以很多丛塌，看你的腦洞有多大，我根據(jù)需求，給每一項(xiàng)添加一個(gè)計(jì)數(shù)器赴邻，首先什么樣的數(shù)據(jù)需要計(jì)數(shù)器印衔，
改造 transfer-panel
在transfer-panel.vue設(shè)定來幾個(gè)屬性：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
| 屬性 | 描述 |
|---|---|
| isNumber | 是否為數(shù)值類型 |
| Number | 數(shù)值，v-model綁定 |
| minNumber | 最小值 |
| maxNumber | 最大值 |
| tooltip | 提示框內(nèi)容 |
| isShowInput | 是否顯示計(jì)數(shù)器input |
| panelWidht | 寬度 |
改造 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>
屬性描述
| 屬性 | 類型 | 描述 |
|---|---|---|
| panelWidht | Number | 寬度 |
| isShowLeftInput | Boolean | 是否顯示左側(cè)計(jì)數(shù)器 |
| isShowRightInput | Boolean | 是否顯示右側(cè)計(jì)數(shù)器 |
使用
import CusTransfer from "@/components/customer/Transfer/index"
<cus-transfer
v-model="selectedElements"
:data="elements"
:titles="['備選', '已選']"
:panelWidth="300"
:isShowLeftInput="false"
:isShowRightInput="true">
</cus-transfer>
效果
image.png
image.png
好了揍拆，大概就這么一個(gè)思路渠概，希望能幫到你們，第一次寫博文嫂拴，不喜勿噴啊
