页面显示下拉框等数据 js枚举 替换 多次if判断

问题：当使用下拉框等 时 存储的，返回的时value，但页面展示的数据时label
当数据项少的时候 我们可在html中采用 v-if 显示它对应的label数据，如下：

<template>
   <div>
       <el-form>
        <el-form-item label="权重值设置" prop="weight"
          :label-width="formLabelWidth"
        >
          <el-select v-model="ruleForm.weight" placeholder="请选择">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

     <el-table>
         <el-table-column  label="权重值" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.weight == 1">一级</span>
            <span v-if="scope.row.weight == 2">二级</span>
          </template>
        </el-table-column>
     </el-table>
   </div>
</template>
export default{
 data(){
    return{
       options4: [
        {
          value: "1",
          label: "一级",
        },
        {
          value: "2",
          label: "二级",
        },
        {
          value: "3",
          label: "三级",
        },
        {
          value: "4",
          label: "四级",
        },
        {
          value: "5",
          label: "五级",
        },
      ],
      enumerationObject:{
           "1":'一级',
           "2":'二级',
           "3":'三级',
           "4":'四级',
           "5":'五级',
           "6":'六级',
      },
     }
  }
}

可是当数据项比较多的时候，这么写起来 会导致html中有些冗余，这时就可以考虑枚举
在 data中定义对象enumerationObject 以后台返回的 value只值 为 key 以 label 为 value

        <el-table-column  label="权重值" align="center">
            <template slot-scope="scope">
                <span>{{enumerationObject[scope.row.weight]}}</span>
                // 注：使用的时候要[] 而不是 .
                <!-- <span>{{enumerationObject.(scope.row.weight)}}</span> -->
            </template>
        </el-table-column>

总结： 存储的是A数据 使用的时A对应得B数据 ，可以考虑使用枚举