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

2. 首先，我们先看到下拉框这一栏 （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>

示例效果：