亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

由于多頁(yè)面有時(shí)需要共同的表單枚舉選擇，頁(yè)面以及table需要顯示枚舉值label以及有時(shí)需要根據(jù)枚舉值判斷，故個(gè)人使用如下枚舉方式進(jìn)行統(tǒng)一管理。

在common或者個(gè)人模塊下創(chuàng)建單獨(dú)枚舉js,如enums.js。然后導(dǎo)入@/common/Enum.js并添加一個(gè)字面量對(duì)象。

// 落戶任務(wù)狀態(tài)

settleTaskStatusEnum: new Enum().add('all', '全部', null).add('settle', '待落戶', 0).add('settled', '已落戶', 1).add('cancel', '已取消', 2)

1

2

如需要表單選擇可如下使用：

<el-select style="width: 99%" v-model="query.taskStatus" clearable placeholder="請(qǐng)選擇">

   <el-option v-for="item in enums.settleTaskStatusEnum" :key="item.value" :value="item.value" :label="item.label">

   </el-option>

</el-select>

1

2

3

4

效果如：

如需頁(yè)面以及table顯示枚舉lable可如下使用：

//可以避免為每個(gè)枚舉值進(jìn)行判斷后，再取其label，后端返回taskStaus:1

<el-table-column prop="taskStatus" label="任務(wù)狀態(tài)">

   <template slot-scope="scope">

      {{enums.settleTaskStatusEnum.getLabelByValue(scope.row.taskStatus)}}

   </template>

</el-table-column>

1

2

3

4

5

6

效果如：

如需根據(jù)枚舉值判斷可如下使用：

// 只能對(duì)【待落戶】的數(shù)據(jù)點(diǎn)擊，可以防止硬編碼

if (item.taskStatus === enums.settleTaskStatusEnum.settle.value) {

   this.settleBtnDisabled = false

}

1

2

3

4

以上建議以及代碼如有需要優(yōu)化或者不合理的地方，歡迎大家修正！

//以下為具體Enum類

/**

 * 枚舉類

 * @author meilin.huang

 */

export class Enum {

  /**

   * 添加枚舉字段

   * field: 枚舉字段

   * label: 界面顯示

   * value: 枚舉值

   */

  add (field, label, value) {

    this[field] = {label, value}

    return this

  }

  /**

   * 根據(jù)枚舉value獲取其label

   */

  getLabelByValue (value) {

    // 字段不存在返回‘’

    if (value === undefined || value === null) {

      return ''

    }

    for (let i in this) {

      let e = this[i]

      if (e && e.value === value) {

        return e.label

      }

    }

    return ''

  }

}