话不多说，我们就直接进入正题
首先，我们先看到下拉框这一栏 （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>
示例效果：
