由于多页面有时需要共同的表单枚举选择，页面以及table需要显示枚举值label以及有时需要根据枚举值判断，故个人使用如下枚举方式进行统一管理。

在common或者个人模块下创建单独枚举js,如enums.js。然后导入@/common/Enum.js并添加一个字面量对象。

// 落户任务状态

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="请选择">

   <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

效果如：

如需页面以及table显示枚举lable可如下使用：

//可以避免为每个枚举值进行判断后，再取其label，后端返回taskStaus:1

<el-table-column prop="taskStatus" label="任务状态">

   <template slot-scope="scope">

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

   </template>

</el-table-column>

1

2

3

4

5

6

效果如：

如需根据枚举值判断可如下使用：

// 只能对【待落户】的数据点击，可以防止硬编码

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

   this.settleBtnDisabled = false

}

1

2

3

4

以上建议以及代码如有需要优化或者不合理的地方，欢迎大家修正！

//以下为具体Enum类

/**

 * 枚举类

 * @author meilin.huang

 */

export class Enum {

  /**

   * 添加枚举字段

   * field: 枚举字段

   * label: 界面显示

   * value: 枚举值

   */

  add (field, label, value) {

    this[field] = {label, value}

    return this

  }

  /**

   * 根据枚举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 ''

  }

}