vue+elmentUI字典值列表展示中文方法

vue中formatter方法的使用

—》

两种方式都可以，主要是后台传过来数据，有的是字母比如，NY之类的，N代表好，Y代表不好，我们在页面显示时候要显示文字，这个时候用

<el-table-column
   prop="createTime"
   label="创建时间"
   :formatter="dateFormat"/>

JS：

dateFormat(row, column, cellValue, index){
     const daterc = row[column.property]
      if(daterc!=null){
         const timeFormat=  daterc.split("T")[0];
         return timeFormat;
       }
 },

或
utils.js

/**
* 回显数据字典
* datas 字典数组
* value 字典的Key
* dictLabel 展示的中文（字典的value）
* */
export function selectDictLabel(datas, value) {
	var actions = [];
	Object.keys(datas).map((key) => {
		if (datas[key].dictValue == ('' + value)) {
			actions.push(datas[key].dictLabel);
			return false;
		}
	})
	return actions.join('');
}


/**这是字典数组中的一个对象，即datas[0]*/
datas:[
	0:{
		createBy: "admin"
		createTime: "2021-07-29 09:44:38"
		default: false
		dictCode: 109
		dictLabel: "应用系统类项目"
		dictSort: 1
		dictType: "proj_type_one"
		dictValue: "app_sys_proj_type"
		isDefault: "N"
		remark: "应用系统类项目"
		status: "0"
	},
]

列表展示调用示例：

 <el-table-column 
 	label="项目类型3" 
 	align="center" 
 	prop="projTypeThree" 
 	:formatter="typeFormatterThree"/>

data(){
	return{
		projectTypeThreeList: [
			{
				createBy: "admin"
				createTime: "2021-07-29 09:44:38"
				default: false
				dictCode: 109
				dictLabel: "应用系统类项目"
				dictSort: 1
				dictType: "proj_type_one"
				dictValue: "app_sys_proj_type"
				isDefault: "N"
				remark: "应用系统类项目"
				status: "0"
			},
		]
	}
}

typeFormatterThree(row, column) {
	  console.log(`row`, row.projTypeThree) // app_sys_proj_type
      return this.selectDictLabel(
      this.projectTypeThreeList, row.projTypeThree);
    },

第二种方式

<el-table-column
    prop="isLine"
    label="是否在线">
    <template slot-scope="scope">
      <span v-if="scope.row.isLine == 'N'" style="color:red">不在线</span>
      <span v-else>在线</span>
    </template>
 </el-table-column>