需求:更改elementui中el-transfer樣式， 實現單擊左側選項即加入右邊選框，單擊右側選項即可回到左側選框，中間左右來回按鈕更改爲左側全選右側全選,最終修改後效果圖如下
下圖源碼可通過github下載：https://github.com/applebring/elementui
本以爲自己能夠不看elementui源碼實現這需求，在折騰了一天還沒實現後，還是迴歸到其源碼進行研究，自己通過純vue實現主要遇到了以下問題:
若是不需要進行模糊查詢可通過index進行增刪改查實現穿梭框功能，但是若是加入模糊查詢則問題百出，但進行filter過濾器過濾後，數組index發生了變化，通過index進行增刪改查行不通，當然，本人在同事指點下換了思路，通過給每個選項一個固定的識別id進行對象查找和增刪改，雖然增刪改查實現了，但是全選卻不知如何能實現，畢竟通過計算屬性得到數組，當把數組清空時，無法讓對象複製到右邊選框~
因此，值此星期六日之際，對elementui代碼進行研究，以解心中之慮
1、首先是上github拉取elementui源碼https://github.com/ElemeFE/element
2、本人在名爲elementui源碼文件夾下克隆github上element源碼，在拉取後的element文件夾中packages文件目錄下找到transfer文件夾，該文件即爲el-transfer源碼
3、將源碼複製到自己項目中，通過組件方式將其引入,本人將main.vue複製在transfermain.vue文件夾下，將transfer-panel.vue複製在transferPanel.vue文件下，如
通過觀察源代碼，可以看出el-transfer實際上是將穿梭框分成兩部分，左右邊選擇框分別爲重複引入transferPanel組件，即tranfermain.vue實際上可分解爲如下
因此，想要修改tranfer-panel樣式可在transferPanel.vue裏面更改，中間的按鈕組在tansfermain.vue裏更改，由上面可知，我們需要引入三個文件，內容分別如下：(以下文件爲範例)
transfer.vue
<template>
<div>
<el-card class="box-card">
<dir-transfer v-model="value2" filter-placeholder="請輸入城市拼音"
:data="data2" :titles="titles"></dir-transfer>
</el-card>
</div>
</template>
<script>
import DirTransfer from './transfermain.vue'
export default {
data() {
const generateData2 = _ => {
const data = [];
const cities = ['上海', '北京', '廣州', '深圳', '南京', '西安', '成都'];
const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
cities.forEach((city, index) => {
data.push({
label: city,
key: index,
pinyin: pinyin[index]
});
});
return data;
};
return {
data2: generateData2(),
value2: [],
titles:['選擇成員','選中成員'],//左右穿梭框的標題
filterMethod(query, item) {
return item.pinyin.indexOf(query) > -1;
}
};
},
components:{DirTransfer}
};
</script>在該頁面dir-transfer即與el-transfer一致，屬性，方法，事件均與官方文檔一致
transfermain.vue(本應該爲源碼，本處直接粘貼更改後的代碼)
<template>
<div class="el-transfer">
<transfer-panel
v-bind="$props"
ref="leftPanel"
:filterable="true"
:data="sourceData"
:title="titles[0] || t('el.transfer.titles.0')"
:default-checked="leftDefaultChecked"
@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="allToLeft">
<span>左全選</span><!--此處本人更改爲自己所需按鈕，按鈕事件名字也從addToLeft改爲allToLeft-->
</el-button>
<el-button
type="primary"
:class="['el-transfer__button', hasButtonTexts ? 'is-with-texts' : '']"
@click.native="allToRight">
<span>右全選</span><!--此處本人更改爲自己所需按鈕，按鈕事件名字也從addToRight改爲allToRight-->
</el-button>
</div>
<transfer-panel
v-bind="$props"
:filterable="false"
:isRight="true"
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/button';
import Emitter from 'element-ui/src/mixins/emitter';
import Locale from 'element-ui/src/mixins/locale';
import TransferPanel from './transferPanel.vue';
import Migrating from 'element-ui/src/mixins/migrating';
export default {
name: 'ElTransfer',
mixins: [Emitter, Locale, Migrating],
components: {
TransferPanel,
ElButton
},
props: {
data: {
type: Array,
default() {
return [];
}
},
titles: {
type: Array,
default() {
return [];
}
},
buttonTexts: {
type: Array,
default() {
return [];
}
},
filterPlaceholder: {
type: String,
default: ''
},
filterMethod: Function,
leftDefaultChecked: {
type: Array,
default() {
return [];
}
},
rightDefaultChecked: {
type: Array,
default() {
return [];
}
},
renderContent: Function,
value: {
type: Array,
default() {
return [];
}
},
format: {
type: Object,
default() {
return {};
}
},
filterable: Boolean,
props: {
type: Object,
default() {
return {
label: 'label',
key: 'key',
disabled: 'disabled'
};
}
},
targetOrder: {
type: String,
default: 'original'
}
},
data() {
return {
leftChecked: [],
rightChecked: [],
checkedleft:true,
checkedright:false
};
},
computed: {
dataObj() {
const key = this.props.key;
return this.data.reduce((o, cur) => (o[cur[key]] = cur) && o, {});
},
sourceData() {
console.log("this",this.data);
return this.data.filter(item => this.value.indexOf(item[this.props.key]) === -1);
},
targetData() {
return this.targetOrder === 'original'
? this.data.filter(item => this.value.indexOf(item[this.props.key]) > -1)
: this.value.map(key => this.dataObj[key]);
},
hasButtonTexts() {
return this.buttonTexts.length === 2;
}
},
watch: {
value(val) {
this.dispatch('ElFormItem', 'el.form.change', val);
}
},
methods: {
getMigratingConfig() {
return {
props: {
'footer-format': 'footer-format is renamed to format.'
}
};
},
onSourceCheckedChange(val, movedKeys) {
console.log("this leftCheck",this.leftChecked)
this.leftChecked = val;
if (movedKeys === undefined) return;
this.$emit('left-check-change', val, movedKeys);
this.addToRight();//在此處直接把選中項添加到右邊框，實現單擊操作，而不需通過按鈕再次操作
},
onTargetCheckedChange(val, movedKeys) {
this.rightChecked = val;
if (movedKeys === undefined) return;
this.$emit('right-check-change', val, movedKeys);
this.addToLeft();//在此處直接把選中項添加到左邊框，實現單擊操作，而不需通過按鈕再次操作
},
allToLeft(){
this.$refs.leftPanel.handleAllCheckedChange(true);//直接出發全選事件，父組件調用子組件方法需要通過this.$refs.組件ref值.子組件方法名
},
addToLeft() {
let currentValue = this.value.slice();
this.rightChecked.forEach(item => {
const index = currentValue.indexOf(item);
if (index > -1) {
currentValue.splice(index, 1);
}
});
this.$emit('input', currentValue);
this.$emit('change', currentValue, 'left', this.rightChecked);
},
allToRight(){
this.$refs.rightPanel.handleAllCheckedChange(true);//直接出發全選事件，父組件調用子組件方法需要通過this.$refs.組件ref值.子組件方法名
},
addToRight() {
let currentValue = this.value.slice();
const itemsToBeMoved = [];
const key = this.props.key;
this.data.forEach(item => {
const itemKey = item[key];
if (
this.leftChecked.indexOf(itemKey) > -1 &&
this.value.indexOf(itemKey) === -1
) {
itemsToBeMoved.push(itemKey);
}
});
currentValue = this.targetOrder === 'unshift'
? itemsToBeMoved.concat(currentValue)
: currentValue.concat(itemsToBeMoved);
this.$emit('input', currentValue);
this.$emit('change', currentValue, 'right', this.leftChecked);
},
clearQuery(which) {
if (which === 'left') {
this.$refs.leftPanel.query = '';
} else if (which === 'right') {
this.$refs.rightPanel.query = '';
}
}
}
};
</script>該文件修改的主要難點在於如何通過按鈕實現全選功能，摸索了半天，終於發現入口，通過調用handleAllCheckedChange(true),傳入值爲true即可完美實現，此處注意父組件調用子組件的方法需要通過this.$refs.組件ref值.子組件方法（參數）來調用
transferPanel.vue
<template>
<div class="el-transfer-panel" style="border:1px solid #409EFF">
<p class="el-transfer-panel__header">
<el-checkbox v-show="false"
v-model="allChecked"
@change="handleAllCheckedChange"
:indeterminate="isIndeterminate">
{{ title }}
<span>{{ checkedSummary }}</span>
</el-checkbox>
{{ title }}
</p>
<div :class="['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']">
<el-input
class="el-transfer-panel__filter"
v-model="query"
size="small"
:placeholder="placeholder"
@mouseenter.native="inputHover = true"
@mouseleave.native="inputHover = false"
v-if="filterable">
<i slot="prefix"
:class="['el-input__icon', 'el-icon-' + inputIcon]"
@click="clearQuery"
></i>
</el-input>
<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>
<span v-if="isRight" class="icon-close" style="float:right;margin-right:10px;width:20px;margin-top:5px;line-height:20px;text-align:center;height:20px;background-color:#ddd;border-radius:50%;">×</span>
</el-checkbox><!--此處加了個判斷是否爲右邊框給其加上相應的關閉按鈕，isRight通過屬性值進行傳入-->
</el-checkbox-group>
<p
class="el-transfer-panel__empty"
v-show="hasNoMatch">{{ t('el.transfer.noMatch') }}</p>
<p
class="el-transfer-panel__empty"
v-show="data.length === 0 && !hasNoMatch">{{ t('el.transfer.noData') }}</p>
</div>
<p class="el-transfer-panel__footer" v-if="hasFooter">
<slot></slot>
</p>
</div>
</template>
<script>
import ElCheckboxGroup from 'element-ui/packages/checkbox-group';
import ElCheckbox from 'element-ui/packages/checkbox';
import ElInput from 'element-ui/packages/input';
import Locale from 'element-ui/src/mixins/locale';
export default {
mixins: [Locale],
name: 'ElTransferPanel',
componentName: 'ElTransferPanel',
components: {
ElCheckboxGroup,
ElCheckbox,
ElInput,
OptionContent: {
props: {
option: Object
},
render(h) {
const getParent = vm => {
if (vm.$options.componentName === 'ElTransferPanel') {
return vm;
} else if (vm.$parent) {
return getParent(vm.$parent);
} else {
return vm;
}
};
const panel = getParent(this);
const transfer = panel.$parent || panel;
return panel.renderContent
? panel.renderContent(h, this.option)
: transfer.$scopedSlots.default
? transfer.$scopedSlots.default({ option: this.option })
: <span>{ this.option[panel.labelProp] || this.option[panel.keyProp] }</span>;
}
}
},
props: {
data: {
type: Array,
default() {
return [];
}
},
renderContent: Function,
placeholder: String,
title: String,
filterable: Boolean,
isRight:Boolean,
format: Object,
filterMethod: Function,
defaultChecked: Array,
props: Object
},
data() {
return {
checked: [],
allChecked: false,
query: '',
inputHover: false,
checkChangeByUser: true
};
},
watch: {
checked(val, oldVal) {
this.updateAllChecked();
if (this.checkChangeByUser) {
const movedKeys = val.concat(oldVal)
.filter(v => val.indexOf(v) === -1 || oldVal.indexOf(v) === -1);
this.$emit('checked-change', val, movedKeys);
} else {
this.$emit('checked-change', val);
console.log("Check by User");
this.checkChangeByUser = true;
}
},
data() {
const checked = [];
const filteredDataKeys = this.filteredData.map(item => item[this.keyProp]);
this.checked.forEach(item => {
if (filteredDataKeys.indexOf(item) > -1) {
checked.push(item);
}
});
this.checkChangeByUser = false;
this.checked = checked;
},
checkableData() {
this.updateAllChecked();
},
defaultChecked: {
immediate: true,
handler(val, oldVal) {
if (oldVal && val.length === oldVal.length &&
val.every(item => oldVal.indexOf(item) > -1)) return;
const checked = [];
const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
val.forEach(item => {
if (checkableDataKeys.indexOf(item) > -1) {
checked.push(item);
}
});
this.checkChangeByUser = false;
this.checked = checked;
}
}
},
computed: {
filteredData() {
return this.data.filter(item => {
if (typeof this.filterMethod === 'function') {
return this.filterMethod(this.query, item);
} else {
const label = item[this.labelProp] || item[this.keyProp].toString();
return label.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
}
});
},
checkableData() {
return this.filteredData.filter(item => !item[this.disabledProp]);
},
checkedSummary() {
const checkedLength = this.checked.length;
const dataLength = this.data.length;
const { noChecked, hasChecked } = this.format;
if (noChecked && hasChecked) {
return checkedLength > 0
? hasChecked.replace(/\${checked}/g, checkedLength).replace(/\${total}/g, dataLength)
: noChecked.replace(/\${total}/g, dataLength);
} else {
return `${ checkedLength }/${ dataLength }`;
}
},
isIndeterminate() {
const checkedLength = this.checked.length;
return checkedLength > 0 && checkedLength < this.checkableData.length;
},
hasNoMatch() {
return this.query.length > 0 && this.filteredData.length === 0;
},
inputIcon() {
return this.query.length > 0 && this.inputHover
? 'circle-close'
: 'search';
},
labelProp() {
return this.props.label || 'label';
},
keyProp() {
return this.props.key || 'key';
},
disabledProp() {
return this.props.disabled || 'disabled';
},
hasFooter() {
return !!this.$slots.default;
}
},
methods: {
updateAllChecked() {
const checkableDataKeys = this.checkableData.map(item => item[this.keyProp]);
this.allChecked = checkableDataKeys.length > 0 &&
checkableDataKeys.every(item => this.checked.indexOf(item) > -1);
},
handleAllCheckedChange(value) {
console.log("value",value);
this.checked = value
? this.checkableData.map(item => item[this.keyProp])
: [];
},
clearQuery() {
if (this.inputIcon === 'circle-close') {
this.query = '';
}
}
}
};
</script>通過上面對elementui穿梭框的自定義樣式，可類比其他組件的自定義修改