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

Posted 2021-03-14 lml-lml

封装成一个子组件

<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>