el-select数字数据回显

sunywz

于 2022-09-30 08:17:56 发布

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_31776219/article/details/127116944

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在Vue中数据回显失败的原因，主要归因于数据类型的不匹配。作者提供了解决方案，即通过将数据转换为统一类型来确保绑定的正确性。对于v-model绑定为string类型而:value绑定为number类型的情况，通过添加空字符串转换；反之，则使用乘以1的方法转换。文章以一个el-select组件为例，展示了如何在模板中应用这些转换策略。

摘要由CSDN通过智能技术生成

在这里插入图片描述

数据回显不成功一般是因为数据类型不匹配，所以需要处理成统一数据类型。

如果 v-model 绑定的数据是 string 类型，:value 绑定的数据是 number 类型，我这里是通过 + ‘’ ，统一处理成 string 类型

如果 v-model 绑定的数据是 number 类型，:value 绑定的数据是 string 类型，我这里是通过 *1 ，统一处理成 number 类型

          <template slot-scope="scope">
            <el-form-item
              :prop="'params.' + scope.$index + '.taxRate'">

              <el-select v-model="scope.row.taxRate" placeholder="请选择">
                <el-option
                  @click.native="compu()"
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value*1">
                </el-option>
              </el-select>