el-cascader-dict

支持配置el-cascader所有属性，事件及slot，调用getRef() 返回 el-cascader 实例

请详细阅读文档

<template>
  <div ref="container">
    {{"350624" | getTreeLabelByCodeFilter("area", "~~~~")}}
     {{"350624,350200,123" | getTreeLabelByCodesFilter("area", "~~~~", "")}}
    {{"诏安县" | getTreeCodeByLabelFilter("area", "~~~~")}}
    {{"诏安县,思明区,哈哈" | getTreeCodeByLabelsFilter("area", "~~~~")}}
    
    <el-cascader-dict  v-model="areaCode" collapse-tags dictType="area" maxLevel="2" clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
    <el-cascader-dict  v-model="areaCode" collapse-tags dictType="area" clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
    <el-cascader-dict  v-model="areaCode" collapse-tags :dictType="{type: 'area', filters: '110000', reverse: true}" clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
    <el-cascader-dict  v-model="areaCode" collapse-tags dictType="area" :filterDataFun="filterDataFun"  clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
    <el-cascader-dict  v-model="areaCode" collapse-tags dictType="area" :disableObj="{disableValue: '350500'}"  clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
    <el-cascader-dict  v-model="areaCode" collapse-tags dictType="area" :disabledDataFun="disabledDataFun"  clearable :props="areaOptionProps" @dictChange="handleChange"></el-cascader-dict>
 </div>
</template>

<script>
import {getTreeLabelByCode, getTreeCodeByLabel, getTreeLabelByCodes, getTreeCodeByLabels} from "~/index"
export default {
  name: "el-cascader-dict-normal",
  data() {
    return {
      areaCode: "",
      areaOptionProps: {
        value: "id",
        label: "areaName",
        checkStrictly: false,
        multiple: true
      }
    }
  },
  created() {
    getTreeLabelByCode("350624", "area").then(data => {
      console.log("🚀 ~ file: el-cascader-dict-normal.vue ~ line 26 ~ getTreeCodeByLabel ~ data", data)
    })

    getTreeCodeByLabel("诏安县", "area").then(data => {
      console.log("🚀 ~ file: el-cascader-dict-normal.vue ~ line 26 ~ getTreeCodeByLabel ~ data", data)
    })

    getTreeLabelByCodes("350624,150600,350600", "area").then(data => {
      console.log("🚀 ~ file: el-cascader-dict-normal.vue ~ line 36 ~ getTreeLabelByCodes ~ data", data)
    })
    getTreeCodeByLabels("诏安县,思明区,丰泽区", "area").then(data => {
      console.log("🚀 ~ file: el-cascader-dict-normal.vue ~ line 36 ~ getTreeLabelByCodes ~ data", data)
    })
  },
  mounted() {},
  methods: {
    handleChange(val) {
      console.log(val)
    },
    //过滤数据
    filterDataFun(list) {
      return list.filter(item => {
        return item.id !== "110000"
      })
    },
    //禁用数据
    disabledDataFun(item) {
      return item.id !== "110000"
    }
  }
}
</script>

<style>

</style>

显示代码

cascader-dict attribute

参数	说明	类型	可选值	默认值
dictType	必传，传递字典的字段名，选择想要的字典数据Object类型时详看如下配置dictType配置项	[String, Object]	—	—
disableObj	选填，配置disableObj配置项	Object	—	false
filterDataFun	组件过滤数据方法函数 接收该字典类型的数据 默认不变 不能覆盖字典包配置里的filterDataFun，是二次过滤	Function	—	(list) => { return list }
disabledDataFun	禁用选项，接收某个字典类型对应的数据（数组）中的每一项（对象）入参，通过对该对象做判断返回true或false	Function	—	无

WARNING

元素props配置项中

value的默认值为字典包treeSetting的idField字段值

label的默认值为字典包treeSetting的labelField字段的值

children的默认值为字典包treeSetting的childrenField字段的值

leaf的默认值为字典包treeSetting的leafField字段的值

dictType配置项

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

disableObj配置项

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