el-checkbox-dict组件

支持配置el-checkbox-group的属性及事件以及slot， 支持配置el-checkbox组件所有属性，使用getRef() 可返回el-checkbox-group实例

TIP

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

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

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

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

keyvalue 不管true还是false，都传值(数组形式)即可

<template>
  <div class="el-checkbox-dict" ref="container">
    <div class="title">基础用法</div>
    <el-checkbox-dict @dictChange="handdleChange" clearable v-model="value1" dictType="PERSON_TYPE"></el-checkbox-dict>

    <div class="title">过滤数据</div>
    <el-checkbox-dict @dictChange="handdleChange" size="mini" clearable v-model="value2" :dictType="{type: 'PERSON_TYPE', filters: '001,002'}"></el-checkbox-dict>
    <el-checkbox-dict @dictChange="handdleChange" clearable v-model="value3" :filterDataFun="filterDataFun" dictType="PERSON_TYPE"></el-checkbox-dict>

    <div class="title">禁用数据</div>
    <el-checkbox-dict @dictChange="handdleChange" dictType="PERSON_TYPE" clearable v-model="value4" :disableObj="{disableValue: '001,002'}"></el-checkbox-dict>
    <el-checkbox-dict @dictChange="handdleChange" dictType="PERSON_TYPE" :disabledDataFun="disabledDataFun" clearable v-model="value5"></el-checkbox-dict>

    <div class="title">配置keyValue及赋值</div>
    <el-checkbox-dict @dictChange="handdleChange" clearable v-model="value6" dictType="PERSON_TYPE"></el-checkbox-dict>
    <el-checkbox-dict @dictChange="handdleChange" :keyValue="true" clearable v-model="value7" dictType="PERSON_TYPE"></el-checkbox-dict>
  </div>
</template>

<script>
export default {
  name: "el-checkbox-dict-index",
  data() {
    return {
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: ["001", "002"],
      value7: ["001", "002"]
    }
  },
  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-checkbox-dict {
  min-height: 300px;
  .el-checkbox-group{
    display: block;
    &+.el-checkbox-group {
      margin-top: 20px;
    }
  }
}
</style>

显示代码

Checkbox 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	—	—

Checkbox 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