vue使用el-select el-option失效不显示名称还是显示原数据

最新推荐文章于 2024-06-13 14:50:33 发布

Tan.]der

最新推荐文章于 2024-06-13 14:50:33 发布

阅读量729

点赞数

分类专栏：日常Bug 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45265547/article/details/134716274

版权

日常Bug 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章讲述了在Vue应用中，如何处理el-form-item中的el-select选择项数据绑定问题，当从API获取数据并更新elForm对象后，特别提到将el-option的值转换为字符串类型进行赋值，以解决视图显示问题。

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

          <el-form-item label="生效标记" prop="enableSign" label-width="17rem">
            <el-select v-model="dialog.elForm.enableSign" placeholder="请选择内容">
              <el-option v-for="item in enableSignList"
                         :key="item.infoCode"
                         :label="item.infoName"
                         :value="item.infoCode">
              </el-option>
            </el-select>
          </el-form-item>

视图并没有显示名称，还是显示了原数据
在这里插入图片描述

在查询数据后整体数据绑定后，再单独把使用el-option的数据转字符串类型后赋值

	//数据数组
	elForm: {
          enableSign: "", //生效标记
        }
        
        
    //根据id查询单条记录
    getOneData(id) {
      this.$axios.get(myApi.getOneChartInfo + '?id=' + id).then(res => {
        if (res.data.code === myConst.code.success) {
          this.dialog.elForm = res.data.data
          this.dialog.elForm.enableSign = this.dialog.elForm.enableSign + ""
        }
      })
    },