用過uniapp開發(fā)過小程序的都知道坑很多，很多組件都需要自己再封裝，自己封裝了一個(gè)通用的多列選擇器，下面做一個(gè)記錄
多列選擇器
<!-- 多列選擇器 -->
<template>
<picker mode="multiSelector" @columnchange="handleColumnChange" @change="pickerChange" :value="multiIndex" :range="multiArray" :range-key="rangekey">
<view class="uni-input space-between" hover-class="hover-color">
<slot name="before"></slot>
<text class="input-content ellipsis" :class="name?'':'color-placeholder'">{{name?name:placeholder}}</text>
<text class="iconfont icon-arrow-right input-icon text-light iconArea"></text>
<slot name="after"></slot>
</view>
</picker>
</template>
<script>
export default {
props: {
value: { default: ''}, // 必須要使用value
list: { type: Array, default: [] },
rangekey: { default: 'name' }, // 對應(yīng)name取值
childkey: { default: 'children' }, // 子集
code: { default: 'code' }, // 對應(yīng)value取值
pidkey: { default: 'pid' }, // 對應(yīng)父id取值
placeholder: { default: '請選擇' },
emitPath: { default: false, type: Boolean }, // 是否子父級(jí)關(guān)聯(lián) ，是的時(shí)候返回的是逗號(hào)分隔的父子code
level: { default: 3, type: Number } // 列數(shù) 2或者3
},
data() {
return {
multiArray: [[],],
multiIndex: [0, 0, 0],
name: "",
}
},
methods: {
handleColumnChange(e) {
let columnindex = e.detail.value; // 拖動(dòng)列索引
switch (e.detail.column) {
case 0: //拖動(dòng)第1列
// 第二級(jí)
let arr1 = this.multiArray[0];
this.multiArray[1] = arr1[columnindex][this.childkey]||[];
if(this.level === 3) {
// 第三級(jí)
let arr2 = this.multiArray[1];
this.multiArray[2] = arr2[0][this.childkey]||[];
}
this.multiIndex.splice(0, 1, columnindex)
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
break
case 1: //拖動(dòng)第2列
if (this.level === 3) {
// 第三級(jí)
let arr3 = this.multiArray[1];
this.multiArray[2] = arr3[columnindex][this.childkey]||[];
}
this.multiIndex.splice(1, 1, columnindex)
this.multiIndex.splice(2, 1, 0)
break
}
},
//
pickerChange(e) {
let multiIndex = e.detail.value;
// 判斷二級(jí)父元素不是一級(jí)，則重置二三級(jí)為0
if(this.multiArray[1][multiIndex[1]] && (this.multiArray[1][multiIndex[1]][this.pidkey] !== this.multiArray[0][multiIndex[0]].id)) {
console.log('二級(jí)')
// 第二級(jí)
let arr1 = this.multiArray[0];
this.multiArray[1] = arr1[multiIndex[0]][this.childkey]||[];
if(this.level === 3) {
// 第三級(jí)
let arr2 = this.multiArray[1];
this.multiArray[2] = arr2[0][this.childkey]||[];
}
multiIndex.splice(1, 1, 0)
multiIndex.splice(2, 1, 0)
}else if(this.multiArray[2] && this.multiArray[2][multiIndex[2]] && (this.multiArray[2][multiIndex[2]][this.pidkey] !== this.multiArray[1][multiIndex[1]].id)) {
console.log('三級(jí)')
if (this.level === 3) {
// 第三級(jí)
let arr3 = this.multiArray[1];
this.multiArray[2] = arr3[multiIndex[1]][this.childkey]||[];
}
multiIndex.splice(2, 1, 0)
}
if(this.emitPath) {
let codeArr = [], nameArr = [];
for(let i = 0; i < multiIndex.length; i++ ) {
if(this.multiArray[i] && this.multiArray[i][multiIndex[i]]) {
codeArr.push(this.multiArray[i][multiIndex[i]][this.code]);
nameArr.push(this.multiArray[i][multiIndex[i]][this.rangekey]);
}
}
let code = codeArr.join(',');
this.name = nameArr.join('/');
this.$emit('input', code)
}else {
let curArr = this.multiArray[2], code='';
if(curArr && curArr.length) {
code = curArr[multiIndex[2]][this.code];
this.name = curArr[multiIndex[2]][this.rangekey];
}else {
curArr = this.multiArray[1]
code = curArr[multiIndex[1]][this.code];
this.name = curArr[multiIndex[1]][this.rangekey];
}
this.$emit('input', code)
}
},
// 初始化級(jí)聯(lián)數(shù)據(jù)
dataInit() {
// 第一級(jí)
this.multiArray[0] = this.list;
// 第二級(jí)
let arr1 = this.multiArray[0];
this.multiArray.push(arr1[this.multiIndex[0]][this.childkey]||[]);
if(this.level === 3) {
// 第三級(jí)
let arr2 = this.multiArray[1];
this.multiArray.push(arr2[this.multiIndex[1]][this.childkey]||[]);
}
},
curDataFind (data, code) {
let result;
if (!data) {
data = this.list;
}
for (var i = 0; i < data.length; i++) {
let item = data[i];
if (result) {
return result;
}
if (item[this.code] === code) {
result = item;
break;
} else if (item[this.childkey] && item[this.childkey].length > 0) {
result = this.curDataFind(item[this.childkey], code);
}
}
return result;
},
initName() {
if(this.list.length && this.value) {
if(this.emitPath) {
let nameArr = [], codeArr = this.value.split(',');
for(let i = 0; i < codeArr.length; i++ ) {
let item = this.curDataFind(this.list, codeArr[i]);
nameArr.push(item[this.rangekey]);
}
this.name = nameArr.join('/');
} else {
let item = this.curDataFind(this.list, this.value);
this.name = item[this.rangekey];
}
}else {
this.name = '';
}
}
},
watch: {
list: {
immediate: true,
handler(val) {
this.dataInit();
this.initName();
}
},
value: {
immediate: true,
handler(val) {
this.initName();
}
},
}
}
</script>
<style lang="scss" scoped>
</style>
附送單列選擇器
單列選擇器
<!-- 單列選擇器 -->
<template>
<picker @change="bindPickerChange" :value="index" :range="list" :range-key="rangekey">
<view class="uni-input space-between font-md" hover-class="hover-color">
<text class="input-content ellipsis" v-if="coustomValue&&isCoustom">{{coustomValue}}</text>
<text class="input-content ellipsis" v-else-if="list[index][rangekey]">{{list[index][rangekey]}}</text>
<text class="input-content ellipsis color-placeholder" v-else>{{placeholder}}</text>
<text class="iconfont icon-arrow-right input-icon text-light"></text>
</view>
</picker>
</template>
<script>
export default {
props: {
value: { default: ''},// 必須要使用value
list: { type: Array, default: [] },
rangekey: { default: 'name' },
code: { default: 'code' },
placeholder: { default: '請選擇' },
coustomValue: { default: ''},
},
data() {
return {
index: null,
isCoustom: true
}
},
methods: {
bindPickerChange(e) {
this.index = e.target.value;
this.isCoustom = false;
this.$emit('input', this.list[this.index][this.code])
},
getIndex() {
for (let i = 0; i < this.list.length; i++) {
if ((this.list[i][this.code]).toString() === (this.value).toString()) {
return i;
}
}
}
},
watch: {
list(val) {
this.index = this.getIndex();
},
value: {
immediate: true,
handler(val) {
if(val !== null && val !== '') {
this.index = this.getIndex();
}else {
this.index = null;
}
}
},
}
}
</script>
<style lang="scss" scoped>
</style>
