element 下拉框联动_element Ui的级联选择器 任意一级选中下拉框自动关闭

v-model="value"

clearable

placeholder="请选择"

ref="cascaderHandle"

:options="searchOptions"

:disabled="disabled"

filterable

:props="{ checkStrictly: true, expandTrigger: 'hover' }"

:before-filter="beforeFilter"

@focus="focus"

@blur="blur">

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('/')

}

}

}

}