# el-radio-dict组件

支持配置el-radio-group的所有属性,事件,及slot。支持配置el-radio 组件的所有属性,使用getRef()可返回el-radio-group实例,可调用其存在的方法。

TIP

如果需要监听change事件,可使用dictChange代替 dictChange方法返回值与keyValue配置有关

dictType 传递字符串类型,同时此组件可以接收el-select所有属性及事件,change事件建议采用dictChange代替。

dictType 传递对象类型 filters 可传递数组形式,也可字符串形式,英文逗号隔开,不可以有空格

disableObj 传递对象类型, disableValue 可传递数组形式,也可字符串形式,英文逗号隔开,不可以有空格

<template>
  <div class="el-radio-dict" ref="container">
    <div class="title">基础用法</div>
    <el-radio-dict @dictChange="handdleChange" clearable v-model="value1" dictType="PERSON_TYPE"></el-radio-dict>
    
    <div class="title">过滤数据</div>
    <el-radio-dict @dictChange="handdleChange"  clearable v-model="value2" :dictType="{type: 'PERSON_TYPE', filters: '001,002'}"></el-radio-dict>
    <el-radio-dict @dictChange="handdleChange"  clearable v-model="value3" :filterDataFun="filterDataFun" dictType="PERSON_TYPE"></el-radio-dict>
    
    <div class="title">禁用数据</div>
    <el-radio-dict @dictChange="handdleChange" dictType="PERSON_TYPE" clearable v-model="value4" :disableObj="{disableValue: '001,002'}"></el-radio-dict>
    <el-radio-dict @dictChange="handdleChange" dictType="PERSON_TYPE" :disabledDataFun="disabledDataFun" clearable v-model="value5"></el-radio-dict>
   
    <div class="title">配置keyValue及赋值</div>
    <el-radio-dict @dictChange="handdleChange" clearable v-model="value6" dictType="PERSON_TYPE"></el-radio-dict>
    <el-radio-dict @dictChange="handdleChange" :keyValue="true" clearable v-model="value7" dictType="PERSON_TYPE"></el-radio-dict>
  </div>
</template>

<script>
export default {
  name: "el-radio-dict-index",
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "001",
      value7: "001"
    }
  },
  mounted() {
  },
  methods: {
    handdleChange(val) {
      console.log(val)
    },
    //过滤数据
    filterDataFun(list) {
      return list.filter(item => {
        return item.value === "001" || item.value === "002"
      })
    },
    //禁用数据
    disabledDataFun(item) {
      return !!(item.value === "001" || item.value === "002")
    }
  }
}
</script>

<style lang="less" scoped>
.el-radio-dict{
  min-height: 300px;
  .el-radio-group{
    display: block;
    &+.el-radio-group {
      margin-top: 20px;
    }
  }
}
</style>
显示代码

# Radio Dict Attributes

参数 说明 类型 可选值 默认值
dictType 必传,传递字典的字段名,选择想要的字典数据Object类型时详看如下配置dictType配置项 [String, Object]
disableObj 选填,配置disableObj配置项 Object false
keyValue 选填,默认false false时dictChange事件只返回值,true返回value及label Boolean false
filterDataFun 组件过滤数据方法函数 接收该字典类型的数据 默认不变 不会覆盖字典包配置里的filterDataFun,是二次过滤 Function (list) => { return list }
disabledDataFun 禁用选项,接收某个字典类型对应的数据(数组)中的每一项(对象)入参,通过对该对象做判断返回true或false Function
border 是否显示边框 Boolean false
size Radio 的尺寸,仅在 border 为真时有效 string medium / small / mini
name 原生 name 属性 string

# Radio Dict Events

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

# 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

爆米花小布微信公众号

上次更新: 7/11/2024, 4:01:24 PM