Vue.js el-select 后台传入数据的类型转换

经常在下拉框选项中遇到传入数据为‘0’或‘1’，或者‘true’或‘false’又或者是其他英文缩写的情况。

修改前

修改后

<el-form-item label="是否最新:">
  <el-select v-model="VersionForm.newest" placeholder="请选择...">
        <el-option
           v-for="newest in NewestOptions"
           :key="newest.key"
           :label="newest.display_name"
           :value="newest.key"
           />
     </el-select>
 </el-form-item>

定义一个选项的数组

const NewestOptions = [
  { key: true, display_name: '是' },
  { key: false, display_name: '否' }
]
const NewestKeyValue = NewestOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

在data中设置过滤器

 filters: {
    NewestFilter(newest) {
      return NewestKeyValue[newest]
    }
},

记得要在data()return{}中定义该变量

data() {
    return {
      NewestOptions,
    }
}