封装成一个子组件
<template>
<el-cascader
v-model="value"
clearable
placeholder="请选择"
ref="cascaderHandle"
:options="searchOptions"
:disabled="disabled"
filterable
:props="{ checkStrictly: true, expandTrigger: 'hover' }"
:before-filter="beforeFilter"
@focus="focus"
@blur="blur">
</el-cascader>
</template>
<script>
export default {
name: 'cascaderInput',
model: {
prop: 'data',
event: 'change'
},
props: {
data: {
type: Array,
default: ''
},
options: {
type: Array,
default: () => {
return []
}
},
disabled:{
type: Boolean,
default: false
}
},
data () {
return {
keyword: this.data.join('/'),
value: this.data,
flag: 0
}
},
computed: {
search() {
const k = this.keyword
let result = [{label: k, value: k}]
if(this.isJsonString(k)) {
result[0] = {label: JSON.parse(k).label || k, value: k}
}
return result
},
searchOptions() {
return this.options.concat(this.search)
},
},
methods: {
isJsonString(str) {
let result = true
try{
JSON.parse(str)
}catch(erro){
result = false
}
return result
},
beforeFilter(keyword) {
this.keyword = keyword
this.value = [ keyword ]
},
focus(e) {
(this.flag == 0) && (e.target.addEventListener('keyup', this.keyup, false));
this.flag++;
},
blur(e) {
},
keyup(e) {
let value = e.target.value
if(value.length == 0) {
/*this.keyword = '无';*/
this.value = []
}
},
},
watch: {
value: {
deep: true,
handler(v,e) {
this.$emit('change', v)
if(this.$refs.cascaderHandle) {
var children = this.$refs.cascaderHandle.getCheckedNodes();
// if(children[0].children.length < 1){ //判断有没有下级
this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
// }
}
}
},
data: {
deep: true,
handler(v) {
if(v.length == 1) this.keyword = v.join('/');
this.value = Array.isArray(v) ? v : v.split('/')
}
}
}
}
</script>
