vue2,vue3数据字典获取及回显

最新推荐文章于 2024-09-30 17:05:29 发布

烟雨客栈

最新推荐文章于 2024-09-30 17:05:29 发布

阅读量7.7k

点赞数 4

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_30152271/article/details/125720735

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue2

import { getDicts } from '@/common/api/common'   //请求后台接口
/**
 * 获取字典数据
 */
export async function useDict(...args) {
	let res = {};
	for(let i = 0; i < args.length; i++){
		let d = args[i];
		res[d] = [];
		await getDicts(d).then(resp => {
		//视具体后台接口返回字段更改
			res[d] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
		})
	}
	return res;
}
// 回显数据字典
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('');
}
//全局挂载
import { useDict,selectDictLabel } from './dict'
Vue.prototype.useDict = useDict;
Vue.prototype.selectDictLabel = selectDictLabel;

//将方法挂载到全局后可在页面中直接使用，bus_tam_gzlx, bus_tam_clsx是字典类型
async getDics(){
  const {bus_tam_gzlx, bus_tam_clsx} = await this.useDict("bus_tam_gzlx","bus_tam_clsx");
  this.bus_tam_gzlx=[bus_tam_gzlx]
  this.bus_tam_clsx=[bus_tam_clsx]
}
//取字典值
this.form.gzlxName=this.selectDictLabel(this.bus_tam_gzlx,this.form.gzlx)

vue3

import { getDicts } from '@/api/system/dict/data'
/**
 * 获取字典数据
 */
export function useDict(...args) {
  const res = ref({});
  return (() => {
    args.forEach((d, index) => {
      res.value[d] = [];
      getDicts(d).then(resp => {
        res.value[d] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
      })
    })
    return toRefs(res.value);
  })()
}
// 回显数据字典 
export function selectDictLabel(datas, value, valueName = 'value', labelName = 'label') {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key][valueName] == ('' + value)) {
      actions.push(datas[key][labelName]);
      return true;
    }
  })
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join('');
}

// 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) {
  if (value === undefined) {
    return "";
  }
  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);
}
//全局配置
import { useDict,selectDictLabel,selectDictLabels } from '@/utils/dict'
app.config.globalProperties.useDict = useDict
app.config.globalProperties.selectDictLabel = selectDictLabel
app.config.globalProperties.selectDictLabels = selectDictLabels
//使用
 const { proxy } = getCurrentInstance();
 const {bus_tam_gzlx,bus_tam_clsx} = proxy.useDict("bus_tam_gzlx","bus_tam_clsx");
 //直接在表单中翻译字典值
 <el-table-column prop="clsx" label="处理时长" align="center" min-width="70" >
    <template #default="{row}">
       {{selectDictLabel(bus_tam_clsx,row.clsx)}}
     </template>
 </el-table-column>