美文网首页
Vue.js el-select 后台传入数据的类型转换

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

作者: 璃小灯吖 | 来源:发表于2019-12-29 15:44 被阅读0次

经常在下拉框选项中遇到传入数据为‘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,
    }
}

相关文章

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

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

  • Convert转换模式

    参考Retrofit的转换接口 默认转换类 扩展的转换类 客户端使用 可以看到,他们都将传入的位置类型的数据转换成...

  • JSONModel:NSUInteger类型属性可能的崩溃分析及

    预备知识当属性是基本数据类型时,在使用KVC时,KVC方法会自动把传入的value对象类型转换成基础数据类型,(即...

  • JAVA基础第四天

    JAVA数据类型---布尔类型; 数据类型转换自动数据类型转换 强制数据类型转换

  • 3-数据类型转换

    数据类型转换 将数据有当前类型变化为其他类型的操作就是数据类型转换。 数据类型转换分类: 数据类型转换一共分为2类...

  • 关于转换数据类型

    显式转换: Number(数据) 转换成number类型如果传入的是字符串:字符串的内容不能包含非数字,只要包含非...

  • Python自学笔记——3.基础数据类型转换

    基础数据类型转换 数据类型转换的形式自动类型转换强制类型转换 可变数据类型: 列表, 字典, 集合不可变数...

  • JavaScript基础03- 数据类型转换

    数据类型转换 所谓的数据类型转换,就是将一种数据类型转换为另一种数据类型,所以,数据类型转换包括,转换为字符串类型...

  • 类型转换

    类型转换分为基本数据类型的类型转换和引用数据类型的类型转换 基本数据的类型转换1、向上转型(自动转型):低位向高位...

  • day4循环和分支

    一、数据类型转换 1.数据类型自动转换 运行 2.强制转换 基本语法:类型名(需要转换的数据) a.将其他数据转换...

网友评论

      本文标题:Vue.js el-select 后台传入数据的类型转换

      本文链接:https://www.haomeiwen.com/subject/monsoctx.html