ant-design-vue@1.7.8版本下拉多选级联

需求

公司业务需求，需要使用下拉级联多选，时间又比较紧急，因为使用的是 ant-design-vue 的 v1 版本，看到新的版本就有下拉多选级联，在网上也搜索了下，发现了两个，一个是 doit-ui-web ，一个是 design-vue-ui，仔细看了下，后面这个主要是针对 v1 版本进行扩展组件的，也是我现在很需要的。
非常适合我的3种需求（我已demo截图）：

1. 选择框内容显示不同的内容
   

2. 自定义显示
   

3. 选择框显示来源叶子节点数据

使用方式

安装

npm i --save design-vue-ui

引入

因为是基于ant-design-vue的，所以前置条件就是你安装了ant-design-vue v1版本，并且引入的组件样式必须在ant-design-vue的后面，原因应该是继承 ant-design-vue 。

import Vue from "vue";
import Antd from "ant-design-vue";
import DesignVueUI from "design-vue-ui";
import App from "./App";
import "ant-design-vue/dist/antd.less";
import "design-vue-ui/lib/design-vue-ui.less";
Vue.config.productionTip = false;
Vue.use(DesignVueUI);

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
});

开整

选择框内容显示不同的内容

<template>
  <div style="padding: 48px">
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      :displayRender="displayRender"
    >
    </d-cascader>
  </div>
</template>
<script>
import jsArr from '../json/jiangsu.json'
export default {
  data () {
    return {
      options: jsArr,
      form: {
        selectValue: []
      }
    }
  },
  created () {},
  methods: {
    displayRender (itemArr) {
      return itemArr.map((v) => {
        return {
          key: v.key,
          label: `${v.label}（${v.id}）`,
          data: v
        }
      })
    }
  }
}
</script>

自定义显示

这个拓展性有些高，需要灵活运用。

<template>
  <div style="padding: 48px">
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      :displayRender="displayRender"
      @deselect="deselect"
      @change="cascaderChange"
    >
      <template #optionRender="{ option }">
        {{ option.label }} （{{ option.value }}）
      </template>
    </d-cascader>
    {{ form.selectValue }}
  </div>
</template>
<script>
import jsArr from '../json/jiangsu.json'
export default {
  data () {
    return {
      options: jsArr,
      form: {
        selectValue: []
      },
      parentValue: []
    }
  },
  created () {},
  methods: {
    cascaderChange (v, childValue, parentValue) {
      // 需要使用 数据进行变化省市区
      this.parentValue = parentValue
    },
    displayRender (itemArr) {
      // 定义每个级别的描述信息
      const levelInfo = {
        1: { prev: '省', next: '个' },
        2: { prev: '市', next: '个' },
        3: { prev: '区', next: '个' }
      }

      // 如果 itemArr 为空，则直接返回空数组
      if (itemArr.length === 0) return []

      // 统计每个级别的数量
      const levelCount = { 1: 0, 2: 0, 3: 0 }
      itemArr.forEach((item) => {
        levelCount[item.level]++
      })

      // 构建结果数组
      return Object.entries(levelCount).map(([level, count]) => {
        const { prev, next } = levelInfo[level]
        return `${prev}${count}${next}`
      })
    },
    deselect (val) {
      // 定义级别和对应标签的映射
      const levelLabels = {
        1: '省',
        2: '市',
        3: '区'
      }

      // 确定删除的级别
      const label = val.label
      let levelToRemove = Object.keys(levelLabels).find(level => label.includes(levelLabels[level]))

      if (!levelToRemove) {
        // 如果没有找到匹配的级别，则返回
        return
      }

      levelToRemove = Number(levelToRemove)

      // 更新选择值
      const updatedValues = this.parentValue
        .filter(v => v.level !== levelToRemove)
        .map(v => v.key)

      // 更新状态
      this.form.selectValue = updatedValues
      this.parentValue = this.parentValue.filter(v => v.level !== levelToRemove)
    }
  }
}
</script>

选择框显示来源叶子节点数据

<template>
  <div style="padding: 48px">
    <d-cascader
      :options="options"
      placeholder="请选择省市区"
      v-model="form.selectChildValue"
      showCheckedChild
      @change="cascaderChange"
    ></d-cascader>
  </div>
</template>
<script>
import jsArr from '../json/jiangsu.json'
export default {
  data () {
    return {
      options: jsArr,
      form: {
        selectChildValue: []
      }
    }
  },
  created () {},
  methods: {
    cascaderChange (v, childValue, parentValue) {
      console.log(v, childValue, parentValue)
    }
  }
}
</script>

组件文档地址