element下拉框中动态绑值

明思齐

已于 2023-03-11 09:10:14 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： select绑值文章标签： elementui

于 2023-03-10 14:16:45 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61911999/article/details/129439812

select绑值专栏收录该内容

1 篇文章

订阅专栏

文章描述了在Vue.js应用中遇到的下拉框动态绑定数据的问题，具体是由于字段名不匹配导致的数据无法正确显示。作者通过调整字段名并正确设置`v-model`和`v-for`指令实现了与后台传递数据的动态绑定，确保了书本类型和状态的下拉框能正确显示和选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，我们就直接进入正题

首先，我们先看到下拉框这一栏（Form 表单之 Select下拉框列表）

原始页面

<el-row style="margin-bottom: 16px;">
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本名称：</h3>
        <el-input v-model="query.bookName" placeholder="请输入书本名称"></el-input>
      </el-col>
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本类型名称：</h3>
        <el-select v-model="query.bookTypeName" placeholder="请选择书本类型">
          <el-option v-for="item in BookTypeList" value="无" label=" ">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本状态：</h3>
        <el-select v-model="query.bookState" placeholder="请选择书本状态">
          <el-option v-for="item in BookStateList" value="无" label=" "></el-option>
        </el-select>
      </el-col>
</el-row>

 export default {
    data() {
      return {
        /* data:[]后端获取到的数据列表。option表格配置项.form 表单*/
        data: [],
        form: {},
        query: {},
        BookTypeList: [],
        BookStateList: [{
          label: '上架',
          value: 0
        },{
          label: '下架',
          value: 1
        }],
      },
    mounted() {
      this.bookTypeList()
    },
    methods:{
      bookTypeList() {    // 获取书本类型列表
        let param = {
          data: {}
        }
        //获取书本类型列表的接口
        API.queryBookTypeList(param).then(res => {
          if (res.data.code === 0) {
            this.BookTypeList = res.data.data.list
          }
        })
      },
    }

    },

下拉框动态绑值（书本类型是动态的值，由后台传递过来的，通过书本类型的接口，动态查询绑值）

问题一：

我当时绑定上去的是空值，后来才打开控制台发现data:{}中的值是空值😂；其原因就是我绑值的时候字段对不上导致的（我写的是booktype,然后原字段是type）

动态绑值

<el-row style="margin-bottom: 16px;">
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本名称：</h3>
        <el-input v-model="query.bookName" placeholder="请输入书本名称"></el-input>
      </el-col>
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本类型名称：</h3>
        <el-select v-model="query.bookTypeName" placeholder="请选择书本类型">
          <el-option v-for="item in BookTypeList" :key="item.id" :value="item.id" label="item.type">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="padding-right: 20px;">
        <h3>书本状态：</h3>
        <el-select v-model="query.bookState" placeholder="请选择书本状态">
          <el-option v-for="item in BookStateList" :key="item.value" value="item.value" label="item.label"></el-option>
        </el-select>
      </el-col>
</el-row>

示例效果：