Translation of the value of the vue drop-down box in the table interface

        <el-table-column
            prop="prefecture"
            label="地州"
            width="120"
            :formatter="prefectureTran"
            >
        </el-table-column>
  • prop="prefecture": Set the attribute name of the column to "prefecture", and the corresponding field name in the data source to "prefecture".
  • label="地州": Set the title of the column as "District and State" for display in the table header.
  • width="120": Set the width of the column to 120px.
  • :formatter="prefectureTran": Use  :formatter an attribute to bind a method  prefectureTran as the formatting function of the column to customize the way the data is displayed.

 

 data() {
    return {
      /* 地州选项 */
      prefectureOptions: [
        {value: 1, label: '乌鲁木齐'},
        {value: 2, label: '克拉玛依'},
        {value: 3, label: '吐鲁番'},
        {value: 4, label: '哈密'},
      ],
}
}
/*内容转换*/
    //地州
    prefectureTran(row){
      for (let i = 0; i < this.prefectureOptions.length; i++) {
        if(row.prefecture == this.prefectureOptions[i].value){
          return this.prefectureOptions[i].label;
        }
      }
    },

Effect: 

 

Guess you like

Origin blog.csdn.net/m0_53286358/article/details/131993188