vue =＞ 字典过滤器封装

使用场景

• 后端给你返回的是0，1，2，3，4的code码情况下，你需要根据字典来对应的渲染出不同的内容
• 这样不需要在每个文件里面都去写filter方法过滤渲染字段

一：创建文件

utils文件夹下创建一个dataDictionary.js文件

二：需要过滤的数据如下进行设置

const dataJson = {
  // 自定义属性 - 填写格式
  field_type: { 1: '吃饭', 2: '喝水', 3: 'wc', 4: '睡觉', 5: '游戏', 6: '邮箱', 7: '手机' }
}

export default dataJson

三：引入注册

main.js引入全局注册使用


import dataDic from './utils/dataDictionary'
Vue.prototype.$dataDic = dataDic

四：使用

template里面
{{$dataDic.field_type[row.field_type]}}调用

或者在多选里面生成下拉的选择项

<el-select v-model="form.stage_status" placeholder="请选择进度">
            <el-option
              v-for="item in stageOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
  computed: {
    stageOptions() {
      return Object.keys(this.$dataDic.stage_status).map(item => {
        return { value: item, label: this.$dataDic.stage_status[item] }
      })
    },
   }