van-checkbox-dict组件

接收checkbox组件所有属性及方法。快捷根据字典数据生成radio单选项

快捷根据字典数据生成radio单选项

<template>
  <div class="van-checkbox-dict">
    <span class="title">基本使用</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange" dictType="AAC004" v-model="value1" ></van-checkbox-dict>
    <span class="title">过滤数据1</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange" :dictType="{type: 'AAC004', filters: '9', reverse: true}" v-model="value2" ></van-checkbox-dict>
    <span class="title">过滤数据2</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange" :filterDataFun="filterDataFun" :dictType="'AAC004'" v-model="value3" ></van-checkbox-dict>
    <span class="title">禁用数据1</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange" :disableObj="{disableValue: '9'}" :dictType="'AAC004'" v-model="value4" ></van-checkbox-dict>
    <span class="title">禁用数据2</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange" :disabledDataFun="disabledDataFun" :dictType="'AAC004'" v-model="value5" ></van-checkbox-dict>
    <span class="title">禁用+过滤</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange"  :disableObj="{disableValue: '9'}"  :dictType="{type: 'AAC004', filters: '1', reverse: true}" v-model="value6" ></van-checkbox-dict>
    <span class="title">赋值</span>
    <van-checkbox-dict shape="square" direction="horizontal" @dictChange="handleChange"  :dictType="'AAC004'" v-model="value7" ></van-checkbox-dict>
    <span class="title">keyValue</span>
    <van-checkbox-dict shape="square" direction="horizontal" keyValue @dictChange="handleChange"   :dictType="'AAC004'" v-model="value8" ></van-checkbox-dict>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: [],
      value2: [],
      value3: [],
      value4: [],
      value5: [],
      value6: [],
      value7: ["1", "2"],
      value8: []
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    filterDataFun(list) {
      return list.filter(item => ["1", "2"].includes(item.value))
    },
    disabledDataFun(list) {
      return list.map(item => {
        return {
          ...item,
          disabled: ["9"].includes(item.value)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-checkbox-dict{
  padding:  0 16px;
  .title {
    line-height: 30px;
  }
}
</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	组件禁用数据方法函数 接收该字典类型的数据 默认不变 能够覆盖字典包配置里的disabledDataFun	Function	—	(list) => { return list }

Checkbox 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