日常开发中,发现级联选择器如果设置为任意级别可选后,无法自动关闭,用户体验极差,所以封装了下。

// 关闭级联选择器
this.$refs.cascaderHandle.dropDownVisible = false

完整代码:

<template>
  <div class="white-body-view">
    <el-cascader ref="cascaderHandle" v-model="value" :props="{ checkStrictly: true }" :options="options" @change="closeCascader" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      value: ''
    }
  },
  created() {
    this.initData()
  },

  methods: {
    initData() {
      const data = [
        {
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: []
          }, {
            value: 'daohang',
            label: '导航',
            children: []
          }]
        },
        {
          value: 'ziyuan',
          label: '资源',
          children: []
        }]
      // 格式化数据源
      this.options = this.formatData(data)
    },
    
    formatData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.formatData(data[i].children)
        }
      }
      return data
    },

    closeCascader() {
      this.$refs.cascaderHandle.dropDownVisible = false
    }
  }
}
</script>

 

Logo

前往低代码交流专区

更多推荐