JDictSelectTag - xinwu-yang/cube-vue GitHub Wiki

JDictSelectTag 字典选择组件

字典选择组件，目前提供了下拉选择和Radio两种样式的组件。

代码演示

v-model用法

<template>
	<j-dict-select-tag v-model="sex" placeholder="请输入用户性别" dictCode="sex"/>
</template>
<script>
	export default {
    data() {
      return {
        sex: ''
      }
    }
  }
</script>

v-decorator用法

注意需将triggerChange设置为true，不然赋值不成功

<j-dict-select-tag
  placeholder="请输入用户性别"
  dictCode="sex"
  :triggerChange="true"
  v-decorator="['sex', {}]"
/>

表字典类型

从数据库表获取字典数据，dictCode格式说明: 表名,文本字段,取值字段

<j-dict-select-tag 
  v-model="queryParam.username"
  placeholder="请选择用户名称"
  dictCode="sys_user,realname,id"
/>

表字典类型带条件

当从数据库表获取字典数据的时候支持写查询条件进行过滤数据 dictCode="sys_user,realname,id,sex = '2'"表示从sys_user表中查询数据且只查询sex='2'的数据

<j-dict-select-tag
  v-model="queryParam.username"
  placeholder="请选择用户名称"
  dictCode="sys_user,realname,id,sex='2'"
/>

api

props

属性 说明 类型 必填 默认值
value(v-model) 值 string | number
dictCode 字典编码 string ✔️
placeholder 默认文字 string
triggerChange 是否触发change事件 boolean
disabled 是否禁用 boolean false
type 类型 'select' | 'radio' | 'radioButton' 'select'

事件

事件名称 说明 回调参数
change 值变化时调用(triggerChange为true) function(value)
input 值变化时调用 function(value)
⚠️ **GitHub.com Fallback** ⚠️