vue下拉框的值在表格界面的翻译

        <el-table-column
            prop="prefecture"
            label="地州"
            width="120"
            :formatter="prefectureTran"
            >
        </el-table-column>
  • prop="prefecture":设置该列的属性名称为 "prefecture",在数据源中对应的字段名为 "prefecture"。
  • label="地州":设置该列的标题为 "地州",用于显示在表头中。
  • width="120":设置该列的宽度为 120px。
  • :formatter="prefectureTran":使用 :formatter 属性绑定一个方法 prefectureTran 作为该列的格式化函数,用于自定义数据的展示方式。

 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;
        }
      }
    },

效果: 

猜你喜欢

转载自blog.csdn.net/m0_53286358/article/details/131993188
今日推荐