Vue2级联选择（Cascader）

Vue3级联选择（Cascader）

以Vue2选择器（Select）为基础实现的级联选择组件

可自定义设置以下属性：

• 可选项数据源（options），类型：Array<any>，默认 []

• （v-model）级联选中项（selectedValue），类型：Array<number|string>，默认[]

• 下拉字典项的文本字段名（label），类型：string，默认 'label'

• 下拉字典项的值字段名（value），类型：string，默认 'value'

• 下拉字典项的后代字段名（children），类型：string，默认 'children'

• 当此项为true时，点选每级菜单选项值（v-model）都会发生变化；否则只有选择三级选项后选项值才会变化（changeOnSelect），类型：boolean，默认 false

• 下拉层级（zIndex），类型：number，默认 1

• 级联下拉框相互间隙宽度，类型：number，单位px，默认 8px

• 三级下拉各自宽度（width），类型：number|number[]，默认 160

• 下拉框高度（height），类型：number，单位px，默认 36px

• 三级各自是否禁用（disabled），类型：boolean|boolean[]，默认 false

• 三级下拉各自占位文本（placeholder），类型：string|string[]，默认 '请选择'

• 下拉面板最多能展示的下拉项数，超过后滚动显示（num），类型：number，默认 6

效果如下图：

①创建级联下拉选择器Cascader.vue:

<template>
  <div class="m-cascader-wrap" :style="`height: ${height}px;`">
    <VueAmazingSelector
      :style="`margin-right: ${gap}px; z-index: ${zIndex};`"
      :options="firstOptions"
      v-model="selectedValue[0]"
      :label="label"
      :value="value"
      :disabled="disabled"
      :width="Array.isArray(width) ? width[0] : width"
      :height="height"
      :num="num"
      :placeholder="Array.isArray(placeholder) ? placeholder[0] : placeholder"
      @change="onFirstChange" />
    <VueAmazingSelector
      :style="`margin-right: ${gap}px; z-index: ${zIndex};`"
      :options="secondOptions"
      v-model="selectedValue[1]"
      :label="label"
      :value="value"
      :disabled="disabled"
      :width="Array.isArray(width) ? width[1] : width"
      :height="36"
      :num="num"
      :placeholder="Array.isArray(placeholder) ? placeholder[1] : placeholder"
      @change="onSecondChange" />
    <VueAmazingSelector
      :style="`z-index: ${zIndex};`"
      :options="thirdOptions"
      v-model="selectedValue[2]"
      :label="label"
      :value="value"
      :disabled="disabled"
      :width="Array.isArray(width) ? width[2] : width"
      :height="height"
      :num="num"
      :placeholder="Array.isArray(placeholder) ? placeholder[2]:placeholder"
      @change="onThirdChange" />
  </div>
</template>
<script>
// yarn add VueAmazingSelector
import { VueAmazingSelector } from 'vue-amazing-selector'
export default {
  name: 'Cascader',
  components: {
    VueAmazingSelector
  },
  model: {
    prop: 'selectedValue',
    event: 'model'
  },
  props: {
    options: { // 可选项数据源
      type: Array,
      default: () => []
    },
    selectedValue: { // （v-model）级联选中项
      type: Array,
      default: () => []
    },
    label: { // 下拉字典项的文本字段名
      type: String,
      default: 'label'
    },
    value: { // 下拉字典项的值字段名
      type: String,
      default: 'value'
    },
    children: { // 下拉字典项的后代字段名
      type: String,
      default: 'children'
    },
    changeOnSelect: { // 当此项为true时，点选每级菜单选项值（v-model）都会发生变化；否则只有选择三级选项后选项值才会变化
      type: Boolean,
      default: false
    },
    zIndex: { // 下拉层级
      type: Number,
      default: 1
    },
    gap: { // 级联下拉框相互间隙宽度，单位px，默认8px
      type: Number,
      default: 8
    },
    width: { // 三级下拉各自宽度
      type: [Number, Array],
      default: 160
    },
    height: { // 下拉框高度
      type: Number,
      default: 36
    },
    disabled: { // 统一是否全部禁用
      type: Boolean,
      default: false
    },
    placeholder: { // 三级下拉各自占位文本
      type: [String, Array],
      default: '请选择'
    },
    num: { // 下拉面板最多能展示的下拉项数，超过后滚动显示
      type: Number,
      default: 6
    }
  },
  data () {
    return {
      values: this.selectedValue,
      labels: [],
      firstOptions: this.options,
      secondOptions: [],
      thirdOptions: []
    }
  },
  watch: {
    selectedValue (to) {
      this.values = to
      if (to.length) {
        this.initCascader(to)
        this.initLabels(to)
      }
    }
  },
  mounted () {
    if (this.selectedValue.length) {
      this.initCascader(this.selectedValue)
      this.initLabels(this.selectedValue)
    }
  },
  methods: {
    findChildren (options, index) {
      const len = options.length
      for (let i = 0; i < len; i++) {
        if (options[i][this.value] === this.selectedValue[index]) {
          return options[i][this.children] || []
        }
      }
      return []
    },
    initCascader (selectedValue) {
      this.secondOptions = this.findChildren(this.firstOptions, 0)
      this.thirdOptions = []
      if (selectedValue.length > 1) {
        this.thirdOptions = this.findChildren(this.secondOptions, 1)
      }
    },
    findLabel (options, index) {
      const len = options.length
      for (let i = 0; i < len; i++) {
        if (options[i][this.value] === this.selectedValue[index]) {
          return options[i][this.label]
        }
      }
      return this.selectedValue[index]
    },
    initLabels (selectedValue) {
      this.labels[0] = this.findLabel(this.firstOptions, 0)
      if (selectedValue.length > 1) {
        this.labels[1] = this.findLabel(this.secondOptions, 1)
      }
      if (selectedValue.length > 2) {
        this.labels[2] = this.findLabel(this.thirdOptions, 2)
      }
    },
    onFirstChange (value, label, index) { // 一级下拉回调
      this.values = [value]
      this.labels = [label]
      if (this.changeOnSelect) {
        this.$emit('model', this.values)
        this.$emit('change', this.values, this.labels)
      }
      // 获取二级下拉选项
      this.secondOptions = this.firstOptions[index][this.children] || []
      this.thirdOptions = []
    },
    onSecondChange (value, label, index) { // 二级下拉回调
      this.values = [this.values[0], value]
      this.labels = [this.labels[0], label]
      if (this.changeOnSelect) {
        this.$emit('model', this.values)
        this.$emit('change', this.values, this.labels)
      }
      // 获取三级下拉选项
      this.thirdOptions = this.secondOptions[index][this.children] || []
    },
    onThirdChange (value, label) { // 三级下拉回调
      this.values[2] = value
      this.labels[2] = label
      this.$emit('model', this.values)
      this.$emit('change', this.values, this.labels)
    }
  }
}
</script>
<style lang="less" scoped>
.m-cascader-wrap {
  display: inline-block;
}
</style>

②在要使用的页面引入：

<template>
  <div class="selector">
    <Cascader
      v-model="selectedValue"
      label="label"
      value="value"
      children="children"
      changeOnSelect
      :options="options"
      :zIndex="9"
      :gap="8"
      :provinceWidth="120"
      :cityWidth="120"
      :areaWidth="120"
      :width="120"
      :height="36"
      :provinceDisabled="false"
      :cityDisabled="false"
      :disabled="false"
      :num="6"
      @change="onChange" />
  </div>
</template>
<script>
import Cascader from '@/components/Cascader'
export default {
  name: 'Selector',
  components: {
    Cascader
  },
  data () {
    return {
      options: [
        {
          value: '1',
          label: '北京',
          children: [
            {
              value: '11',
              label: '北京市',
              children: [
                {
                  value: '111',
                  label: '东城区'
                },
                {
                  value: '112',
                  label: '西城区'
                }
              ]
            }
          ]
        },
        {
          value: '2',
          label: '浙江',
          children: [
            {
              value: '21',
              label: '杭州市',
              children: [
                {
                  value: '211',
                  label: '西湖区'
                },
                {
                  value: '212',
                  label: '余杭区'
                }
              ]
            },
            {
              value: '22',
              label: '湖州市',
              children: [
                {
                  value: '221',
                  label: '吴兴区'
                },
                {
                  value: '222',
                  label: '安吉区'
                }
              ]
            }
          ]
        }
      ],
      selectedValue: []
    }
  },
  watch: {
    selectedValue (to) {
      console.log('selectedValue:', to)
    }
  },
  mounted () {
    setTimeout(() => {
      this.selectedValue = ['1', '11', '112']
    }, 1000)
  },
  methods: {
    onChange (value, label) {
      console.log('value:', value)
      console.log('label:', label)
    }
  }
}
</script>
<style lang="less" scoped>
</style>