[email protected]扩展多个选择框级联

效果

老规矩，先不多说，上效果！

1. 基本操作(根据 children 或 maxLevel 来确定显示的层级数量)

初始效果：

选择后效果：

3. 动态加载 (通过 loadData 来加载下一层级的数据列表，分为change、focus 点击的模式进行加载时机)
   

4. 分页（对每个 select 列表进行分页或上滑加载数据）
   

5. 校验（多个选择框，校验需要注意新增属性来识别是有值或最后有值才校验）
   

使用方式

安装

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/>",
});

开整

region.json

结构如果不是下面这种树结构，可设置 fieldNames属性， 自定义节点 label、value 、children（[disabled, key, title]）的字段 。
默认是 { label: 'label', value: 'value', children: 'children' }

或者选择 loadData属性方式进行动态加载级联

[
    {
   
   
        "id": "320000",
        "value": "320000",
        "label": "江苏省",
        "level": 1,
        "children": [
            {
   
   
                "pid": "320000",
                "id": "320100",
                "value": "320100",
                "label": "南京市",
                "level": 2,
                "children": [
                    {
   
   
                        "pid": "320100",
                        "id": "320102",
                        "value": "320102",
                        "label": "玄武区",
                        "level": 3,
                        "children": []
                    },
                    ...
                ]
            },
            ...
        ]
    },
    ...
]

baseMixin(例子)

import region from "../../../http/json/region.json";
export default {
   
   
  data() {
   
   
    return {
   
   
      options: [],
    };
  },
  created() {
   
   
    this.options = this.deepClone(region);
  },
  methods: {
   
   
    delay(ms) {
   
   
      return new Promise((resolve) => setTimeout(resolve, ms));
    },
    deepClone(obj) {
   
   
      if (obj === null || typeof obj !== "object") {
   
   
        return obj;
      }

      if (Array.isArray(obj)) {
   
   
        return obj.map((v) => this.deepClone(v));
      }

      const clonedObj = {
   
   };
      for (const key of Object.keys(obj)) {
   
   
        clonedObj[key] = this.deepClone(obj[key]);
      }

      return clonedObj;
    },
  },
};

基本操作

<template>
  <div class="demo-main"><