141 lines
4.4 KiB
Vue
141 lines
4.4 KiB
Vue
<template>
|
||
<view style="width: 100%">
|
||
<u--input :value="formatValue(value)" disabledColor="#ffffff" :placeholder="placeholder"
|
||
border="border"></u--input>
|
||
<u-picker ref="uPicker" :show="visibel" :keyName="labelName" :columns="VarColumns" @confirm="skillConfirm"
|
||
@cancel="skillClose" @close="skillClose" @change="changeHandler"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
isArray
|
||
} from 'lodash'
|
||
export default {
|
||
data() {
|
||
return {
|
||
valued: '',
|
||
VarColumnsIndex: [],
|
||
VarColumns: [],
|
||
}
|
||
},
|
||
props: {
|
||
border: {
|
||
type: String,
|
||
default: 'none'
|
||
},
|
||
valueName: {
|
||
type: String,
|
||
default: 'value'
|
||
},
|
||
labelName: {
|
||
type: String,
|
||
default: 'label'
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '请选择'
|
||
},
|
||
visibel: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
tree: {
|
||
type: Array,
|
||
require: true
|
||
},
|
||
deep: {
|
||
type: Number,
|
||
require: 1
|
||
},
|
||
value: {
|
||
type: String,
|
||
require: ''
|
||
},
|
||
cancel: {
|
||
type: Function
|
||
},
|
||
returnValue: {
|
||
type: String,
|
||
default: 'value',
|
||
},
|
||
joinSymbel: {
|
||
type: String,
|
||
default: '-',
|
||
}
|
||
},
|
||
created() {
|
||
this.VarColumnsIndex = new Array(3).fill(this.deep)
|
||
const arr = []
|
||
this.changeHandler({
|
||
columnIndex: 0,
|
||
index: 0
|
||
})
|
||
},
|
||
methods: {
|
||
skillClose() {
|
||
this.$emit("cancel");
|
||
},
|
||
skillConfirm({
|
||
index,
|
||
value,
|
||
values
|
||
}) {
|
||
if (this.returnValue === 'label') {
|
||
this.$emit("input", value.map(item => item[this.labelName]).join(this.joinSymbel));
|
||
} else {
|
||
this.$emit("input", value);
|
||
}
|
||
this.$emit("cancel");
|
||
},
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
} = e
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
const picker = this.$refs.uPicker
|
||
const columnlist = []
|
||
const arr = JSON.parse(JSON.stringify(this.VarColumnsIndex)).map((vItem, vIndex) => {
|
||
switch (true) {
|
||
case vIndex < columnIndex:
|
||
return vItem
|
||
case vIndex === columnIndex:
|
||
return index
|
||
default:
|
||
return 0
|
||
}
|
||
})
|
||
for (let i = 0; i <= arr.length - 1; i++) {
|
||
if (i) {
|
||
if (picker) {
|
||
picker.setColumnValues(i, columnlist[columnlist.length - 1][arr[i - 1]].children)
|
||
}
|
||
columnlist.push(columnlist[columnlist.length - 1][arr[i - 1]].children)
|
||
} else {
|
||
columnlist.push(this.tree)
|
||
}
|
||
}
|
||
this.VarColumnsIndex = arr
|
||
this.VarColumns = columnlist
|
||
},
|
||
formatValue(val) {
|
||
if (Array.isArray(val)) {
|
||
if (typeof val[0] === 'object') {
|
||
return val.map(item => item[this.labelName]).join(this.joinSymbel)
|
||
} else {
|
||
return val.join(this.joinSymbel)
|
||
}
|
||
} else {
|
||
return val
|
||
}
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |