Vue-Table和Select組件接收數字換爲對應的漢字

目錄

一、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 = "困難";
		      }
		    },
    };