特性：

1、支持动态、静态数据源。

2、支持分页加载。

3、支持模糊搜索。

4、支持单选、多选。

组件源码：

组件中的【动态加载数据】是经过封装的请数据，需要改为axios请求。

数据源：

1、静态数据源格式

"list": [
  {
   "Id": "",
   "Number": "",
   "Name": ""
  }
 ],

2、动态数据源格式

{
 "Success": true,
 "Data": [
  {
   "Id": "",
   "Number": "",
   "Name": ""
  }
 ],
 "Page": 1,
 "PageSize": 3
}

使用方式

1、在需要使用选择组件的地方引入组件

import PubSelect from '@/base/PubSelect.vue'

2、静态数据源使用方式

3、动态数据源使用方式

补充知识：van-picker级联选择（自定义字段显示）

前言

Vant之van-picker级联选择

1、将自定义平铺结构转化为层级结构数据

2、动态$set()给每一条数据对象添加text属性用于展示

数据处理

原始数据

[
 {id: 'node1',pid: 'root',content: 'test'},
 {id: 'node2',pid: 'root',content: 'test'},
 {id: 'node3',pid: 'node1',content: 'test'},
 {id: 'node4',pid: 'node2',content: 'test'},
 {id: 'node5',pid: 'node3',content: 'test'},
 {id: 'node6',pid: 'node1',content: 'test'}
]

转化后数据

[
 {
  id: 'node1',
  pid: 'root',
  content: 'test',
  children: [
   {
    id: 'node3',
    pid: 'node1',
    ccontent: 'test',
    children: [
     {id: 'node5',pid: 'node3',content: 'test'}
    ]
   },
   {id: 'node6',pid: 'node1',content: 'test'}
  ]
 },
 {
  id: 'node2',
  pid: 'root',
  content: 'test',
  children: [
   {id: 'node4',pid: 'node2',content: 'test'}
  ]
 },
]

转化函数tile2nest

// 平铺结构转嵌套结构
    tile2nest(array, key, pKey, childrenKey) {
     if (!array || array.constructor !== Array) {
      return array;
     }
     // 复制一份，避免修改原始数组
     let ary = [...array];
     key = key || "id"; // 平铺数据主键
     pKey = pKey || "parentId";//平铺数据父节点数据
     childrenKey = childrenKey || "children";//子节点名称
     // 定义一个待移除数组
     let ary2remove = [];
     ary.map(item => {
  //动态添加属性text以适应van-picker组件默认显示text字段
      this.$set(item,'text',item.name);
      
      if (item[key] !== item[pKey]) {
       // 找父节点
       let p = ary.filter(c => c[key] === item[pKey]);
       if (p && p.length == 1) {
        p[0].children = p[0].children || [];
        // 将子节点放到父节点中
        p[0].children.push(item);
        ary2remove.push(item[key]);
       }
      }
     });

     // 遍历移除待删除对象
     ary2remove.map(item => {
      ary = ary.filter(c => c[key] !== item);
     });
     //返回转化后的层次结构数据
     return ary;
    }

使用组件

onConfirm(value)      {
        let str = ""; // 呈现页面显示 /xxx/xxx/xxx
        for(let i= 0;i0){
            str += "/" + value[i];
          }
          else{
            str +=value[i];
          }
        }
        this.form.kind = str;
        this.showPicker = false
      },

效果

选择效果