van-cascader-dict组件

快速完成移动端基于vant组件的下拉联级选项，可从字典出获取，也可配置data属性，自定义选项。接收van-field的属性及方法配置，支持van-cascader的属性及部分方法配置，部分组件已配置好，无需重复配置。

dictType 支持传递字符串类型，也支持传递对象类型。对象类型时可过滤部分选项数据

支持配置非字典数据选项，传递 data 属性即可

支持传递disableObj属性，配置部分选项禁用

keyValue配置为true的话 dictChange 方法返回的将是一个对象

<template>
  <div class="van-cascader-dict">
    <van-cascader-dict @dictChange="handleChange" label="地区(基础用法)" label-width="110px" title="地区选择" input-align="right"  dictType="city" placeholder="请选择地区" v-model="value1" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(过滤数据1)" label-width="110px" title="地区选择" input-align="right"  :dictType="{type: 'city', filters: '35062403', reverse: true}" placeholder="请选择地区" v-model="value2" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(过滤数据2)" :filterDataFun="filterDataFun" label-width="110px" title="地区选择" input-align="right"  :dictType="{type: 'city', filters: '35062403', reverse: true}" placeholder="请选择地区" v-model="value3" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(禁用数据1)" label-width="110px" title="地区选择" input-align="right" :disableObj="{disableValue: '35062403'}" :dictType="'city'" placeholder="请选择地区" v-model="value4" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(禁用数据2)" :disabledDataFun="disabledDataFun" label-width="110px" title="地区选择" input-align="right"  :dictType="'city'" placeholder="请选择地区" v-model="value5" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(禁用+过滤)" label-width="110px" title="地区选择" input-align="right" :dictType="{type: 'city', filters: '35062303', reverse: true}" :disableObj="{disableValue: '35062403'}"  placeholder="请选择地区" v-model="value6" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(禁用+过滤)" label-width="110px" title="地区选择" input-align="right" :dictType="{type: 'city', filters: '35062303', reverse: true}" :disableObj="{disableValue: '35062403'}"  placeholder="请选择地区" v-model="value6" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(最大层级)" :maxLevel="2" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value8" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(最小层级)" :minSelectLevel="3" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value9" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(配置提示)" tips="请选择最后一级" :minSelectLevel="3" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value10" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(直接选中)" label-width="110px" :finish="true" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value11" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(提示文案)" label-width="110px" title="地区选择" input-align="right" cascaderPlaceholder="选择吧" :dictType="'city'"  placeholder="请选择地区" v-model="value12" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(按钮文字)" label-width="110px" title="地区选择" input-align="right" cancelButtonText="关闭" confirmButtonText="选中" :dictType="'city'"  placeholder="请选择地区" v-model="value13" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(间隔符)" label-width="110px" title="地区选择" input-align="right" spacer="," :dictType="'city'"  placeholder="请选择地区" v-model="value14" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(默认显示)" defaultValue="漳州市" label-width="110px" title="地区选择" input-align="right" :dictType="'city'"  placeholder="请选择地区" v-model="value15" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="(自定义数据1)" :data="list1" label-width="110px" title="地区选择" input-align="right" placeholder="请选择地区" v-model="value16" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="(自定义数据2)" :props="props" :data="list2" label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value17" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="(自定义数据赋值)" :props="props" :data="list2" label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value18" ></van-cascader-dict>
    <van-cascader-dict @dictChange="handleChange" label="地区(赋值)"  dictType="city"  label-width="110px" title="地区选择" input-align="right"  placeholder="请选择地区" v-model="value19" ></van-cascader-dict>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      value10: "",
      value11: "",
      value12: "",
      value13: "",
      value14: "",
      value15: "21312421",
      value16: "",
      value17: "",
      value18: "35062401",
      value19: "35062401",
      list1: [],
      list2: [],
      props: {
        text: "name",
        value: "code"
      }
    }
  },
  created() {
    //获取数据
    // this.$getDictObjByDictTypes("country").then(data => {
    //   this.list1 = data.country
    //   this.list2 = data.country.map(item => {
    //     return {
    //       "name": item.areaName,
    //       "code": item.id,
    //       "parentId": item.parentId
    //     }
    //   })
    // })
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    filterDataFun(list) {
      return list.filter(item => !["35062403"].includes(item.id))
    },
    disabledDataFun(list) {
      return list.map(item => {
        return {
          ...item,
          disabled: ["35062403", "35062301"].includes(item.id)
        }
      })
    }
  }
}
</script>

<style>

</style>

显示代码

CascaderDict Attributes

参数	说明	类型	可选值	默认值
dictType	必传，传递字典的字段名，选择想要的字典数据Object类型时详看如下配置dictType配置项	[String, Object]	—	—
disableObj	选填，配置disableObj配置项	Object	—	false
keyValue	选填，默认false false时dictChange事件只返回值，true返回所有选项数组数据	Boolean	—	false
filterDataFun	组件过滤数据方法函数 接收该字典类型的数据 默认不变 能够覆盖字典包配置里的filterDataFun	Function	—	(list) => { return list }
disabledDataFun	组件禁用数据方法函数 接收该字典类型的数据 默认不变 能够覆盖字典包配置里的disabledDataFun	Function	—	(list) => { return list }
data	接收传递过来的数组，实现非字典下拉选项	Array	—
treeData	接收传递过来的树形数组，实现非字典下拉选项	Array	—
props	对非字典数据配置text及value及children字段名	Object	—	{text: 字典配置的labelField, value: 字典配置的IDField, children: 字典配置的childrenField
cancelButtonText	取消按钮 配置文字	String	—	取消
confirmButtonText	确认按钮 配置文字	String	—	确认
finish	配置是否选到最后一级时触发确认	Boolean	—	false
spacer	间隔符	String	—	/
defaultValue	默认值，当赋值时为false时，显示默认值	String	—	“”
treeSetting	树形配置，针对部分字典数据不规范时使用此配置	Object	—	{}
cascaderPlaceholder	提示文字	String	—	请选择
maxLevel	限制层级	Number，String	—	无
minSelectLevel	最小选择层级	Number，String	—	无
tips	没选到符合minSelectLevel要求时的提示语	String	—	请选择至少第${this.minSelectLevel}级

Cascader Dict Events

参数	说明	回调参数
dictChange	选中值发生变化时触发	keyValue为false时返回值，为true时返回键值对象

dictType配置项

参数	说明	类型	可选值	默认值
type	必传，字典类型	String	—	—
filters	必传，过滤数据（数组,或者字符串用英文逗号隔开）将选项过滤部分数据，使其不展示	[String，Array]	—	—
filterType	过滤的字段（通过这个字段筛选数据）, 默认字典配置的 dict-setting中format的value配置项	String	—	默认字典配置的 dict-setting中format的value配置项
reverse	是否反向筛选	Boolean	true	false

disableObj配置项

参数	说明	类型	可选值	默认值
disableValue	禁用数据（数组,或者字符串用英文逗号隔开）	[String，Array]	—	—
disableType	过滤的字段（通过这个字段筛选数据）, 默认字典配置的 dict-setting中format的value配置项	String	—	默认字典配置的 dict-setting中format的value配置项
reverse	是否反向筛选	Boolean	true	false