配置字典

设计思路,前端可通过字典名称(唯一)查询字典详情来实现动态字典的功能

数据字典 - 图1查询会不能很麻烦,这个不用担心,我已经大家封装好了

  1. import { get } from '@/api/dictDetail'
  2. export default {
  3. data() {
  4. return {
  5. dicts: []
  6. }
  7. },
  8. methods: {
  9. async getDict(name) {
  10. return new Promise((resolve, reject) => {
  11. get(name).then(res => {
  12. this.dicts = res.content
  13. resolve(res)
  14. }).catch(err => {
  15. reject(err)
  16. })
  17. })
  18. }
  19. }
  20. }

怎么使用呢(建议看源代码),举个栗子

(1)引入组件

  1. import initDict from '@/mixins/initDict'
  2. export default {
  3. mixins: [initDict]
  4. }

(2)使用钩子函数获取字典

  1. import initDict from '@/mixins/initDict'
  2. export default {
  3. mixins: [initDict],
  4. created() {
  5. this.$nextTick(() => {
  6. // 加载数据字典
  7. this.getDict('job_status')
  8. })
  9. }
  10. }

(3)使用字典

  1. <el-form-item v-if="form.pid !== 0" label="状态" prop="enabled">
  2. <el-radio v-for="item in dicts" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
  3. </el-form-item>