element的描述列表＜el-descriptions＞添加字典翻译功能

原创已于 2024-09-29 11:32:02 修改 · 514 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #javascript

于 2024-09-29 11:29:09 首次发布

标题1

可以利用对象赋值进行翻译功能:

HTML代码:

<el-descriptions border :column="2" direction="vertical">
 <el-descriptions-item label="单位类别">
          {{
            companyTypeFormat(viewForm.companyType?viewForm.companyType:'')
          }}
 </el-descriptions-item>
</el-descriptions>

标题2

函数方法:(其中this.selectDictLabel方法,会写到下边"标题3")

函数代码:

methods: {
    //单位类别字典翻译
    companyTypeFormat(row, column) {
      return this.selectDictLabel(this.dict.type.DWLB, row.companyType);
    }
}

标题3

公共翻译方法(别忘了区mian.js全局注册)

Vue.prototype.selectDictLabel = selectDictLabel

// 回显数据字典
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('');
}