elementui级联选择器实现一级单选二级多选

最新推荐文章于 2024-01-29 12:00:00 发布

原创最新推荐文章于 2024-01-29 12:00:00 发布 · 2.1k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

随时提桶de

关注

标签

#elementui #vue.js #javascript #前端

分类前端开发

这篇博客介绍了如何在ElementUI的级联选择器中实现一级选项的单选和二级选项的多选功能。由于ElementUI本身不支持这种场景，博主通过代码魔改实现了这一需求。

elementui原生并不支持这种场景只能魔改一下下面直接上代码

<template>
  <el-cascader
    v-model="selectedValues"
    :options="modifiedOptions"
    :props="{ multiple: true, checkStrictly: true }"
    collapse-tags
    ref="refSelect"
    :show-all-levels="false"
    @change="changeLabel"
    clearable
  ></el-cascader>
</template>

<script>
export default {
  props: {
    cascaderOptions: {
      type: Array
    }
  },
  mounted() {
    console.log(this.$refs.cascader)
  },
  data() {
    return {
      selectedValues: [],
      shareScopeEnd: []
    }
  },
  computed: {
    modifiedOptions() {
      return this.cascaderOptions.map((option) => {
        if (option.children) {
          return {
            ...option,
            disabled: true
          }
        } else {
          return option
        }
      })
    }
  },
  methods: {
    changeLabel(val) {
      // 是否与上次的类型相同
      let changeFlag = false
      let changeItem = null

      if (this.shareScopeEnd.length == 0) {
        this.selectedValues = val
      } else {
        // 与原数组比对
        this.selectedValues.forEach((item) => {
          if (item[0] !== this.shareScopeEnd[0][0]) {
            console.log(1)
            // 一级标签不同
            changeFlag = true
            changeItem = item
          } else if (
            (!item[1] && this.shareScopeEnd[0][1]) ||
            (item[1] && !this.shareScopeEnd[0][1])
          ) {
            changeFlag = true
            changeItem = item
          }
        })
      }
      if (changeFlag) {
        this.selectedValues = []
        this.selectedValues.push(changeItem)
      }

      function flatten(arr) {
        while (arr.some((item) => Array.isArray(item))) {
          // 如果当前数组中还有数组，则展开
          arr = [].concat(...arr)
        }
        return arr
      }
      this.shareScopeEnd = this.selectedValues
      let shareScopeEnd2 = flatten(this.selectedValues)
      let shareScopeEnd3 = [...new Set(shareScopeEnd2)]
      if (shareScopeEnd3[0] == '') {
        this.$emit('cascaderEmit', shareScopeEnd3.slice(1))
        return
      }
      this.$emit('cascaderEmit', shareScopeEnd3)
    }
  }
}
</script>