若依框架字典值使用的两种方法

方法一，全局引用

1.src\utils\ruoyi.js

// 回显数据字典
export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].value == ('' + value)) {
      actions.push(datas[key].label);
      return true;
    }
  })
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join('');
}

// 回显数据字典（字符串、数组）
export function selectDictLabels(datas, value, separator) {
  if (value === undefined || value.length ===0) {
    return "";
  }
  if (Array.isArray(value)) {
    value = value.join(",");
  }
  var actions = [];
  var currentSeparator = undefined === separator ? "," : separator;
  var temp = value.split(currentSeparator);
  Object.keys(value.split(currentSeparator)).some((val) => {
    var match = false;
    Object.keys(datas).some((key) => {
      if (datas[key].value == ('' + temp[val])) {
        actions.push(datas[key].label + currentSeparator);
        match = true;
      }
    })
    if (!match) {
      actions.push(temp[val] + currentSeparator);
    }
  })
  return actions.join('').substring(0, actions.join('').length - 1);
}
2.src\main.js
import { selectDictLabel, selectDictLabels } from "@/utils/ruoyi";
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
3.页面列表使用
 <el-table-column label="区域"  prop="dist" width="100" >
      <template slot-scope="scope"><span>{{selectDictLabel(dict.type.bs_dist_type,scope.row.dist)}}</span></template>
      </el-table-column>
4.页面下拉框使用
<el-form-item label="性质" prop="land">
   <el-select v-model="queryParams.land" placeholder="性质"clearable>
       <el-option
            v-for="dict in dict.type.bs_land_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
    </el-select>
</el-form-item>

方法二，根据页面设置mixins混入使用

1.封装
export const region = {
  data() {
    return {
      region: [],
    }
  },
  mounted() {
    this.getDicts("pro_admin_division").then(response => {
      this.region = response.data;
    })
  },
  methods: {
    //表格翻译
    regionFor(row, column) {
      return this.selectDictLabel(this.region, row.region);
    },
    //下拉框翻译
    regionFormat(val) {
      return this.selectDictLabel(this.region, val);
    }
  }
}
2.页面使用
import { region} from "@/mixins/myMixins";
mixins: [region]
3.内容翻译
{{ regionFormat(form.region) }}
4.下拉框翻译
 <el-form-item label="行政区划:" prop="region" >
     <el-select v-model="queryParams.region" placeholder="请选择">
           <el-option v-for="dict in region" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
 </el-form-item>
5.表格翻译
 <el-table-column label="行政区划" prop="region" :formatter="regionFor" />