web-flash基于字典数据封装了DictSelect组件

原创
2020/07/17 10:21
阅读数 130

DictSelect组件

web-flash系统提供了字典数据维护功能,通过封装了前端DictSelect的vue组件,可以方便的使用字典数据。

实现

  • 后台管理-系统管理提供了字典数据的维护功能
  • 一个字典包含了一组key-value的键值对;比如名称为“性别”的字典数据包含了两组键值对:[{key:男,value:1},{key:女,value:2}]
  • 系统封装了DictSelect组件,/flash-vue/src/components/DictSelect/index.vue 方便对字典数据的使用

用法

  • DictSelect组件 主要用于各种(编辑,查询等)表单中,根据传入的字典名称自动生成改字典的select下拉框
  • 以用户列表页面性别查询下拉框为例用法如下:
<dict-select dictName="性别"
           v-model="listQuery.sex"
           @change="changeSexVal"
           placeholder="请选择性别">
</dict-select>

import DictSelect from '@/components/DictSelect'
export default {
  components:{
    DictSelect
  },
  ...
  data() {
      return {
          listQuery:{
            sex:''
          }
      }
  }
  ...
  method:{
      changeSexVal(val){
        console.log('get user select value',val)
        this.listQuery.sex = val
      }
  }
}
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部