目录

一、Table组件数字转换

二、Select接收数字转换为汉字

一、Table组件数字转换

1.首先定义一个转换表-命名为：statusData

	statusData: {
	        "1": {
	          lable: "简单"
	        },
	        "2": {
	          lable: "中等"
	        },
	        "3": {
	          lable: "困难"
	        }
      }

2.因为我的项目返回是从1开始的，所以与其对应。

3.其次在Table组件中找到对应的一列，加入三元表达式：

<el-table-column
	          align="center"
	          prop="degreeInitial"
	          label="难度"
	          show-overflow-tooltip
	          sortable
	        >
	          <template
	            slot-scope="scope"
	          >{{scope.row.degreeInitial?statusData[(scope.row.degreeInitial)].lable:'简单'}}</template>
        </el-table-column>

三元表达式中只使用到了prop的值，也是与后端返回值对应，只有对应好才能把数据渲染到列表中，在没加入三元表达式前，我的难度列表显示的只是1，2，3。

二、Select接收数字转换为汉字

没用前传递过来的是1，2，3；用的if语句后显示对应的汉字

1.下拉框组件：

<el-select style="width:85px; margin-left:15px" v-model="difficulty"></el-select>

2.在export default{}下定义好接收变量：

export default {
    data() {
	    return {
	        difficulty: ""
			};
},

3.在钩子函数下定义一个方法statusData

//钩子函数，初始化页面用
created() {
	this.statusData();
},

4.最后在方法模块中写入if语句

	methods: {
		//难度类型转换列表
		    statusData() {
		      if (this.v_difficulty === 1) {
		        this.difficulty = "简单";
		      }
		      if (this.v_difficulty === 2) {
		        this.difficulty = "中等";
		      }
		      if (this.v_difficulty === 3) {
		        this.difficulty = "困难";
		      }
		    },
    };