vue+element：el-select和el-option组件和v-for语法，实现下拉列表的数据填充，并且点击下拉列表数据后，另一个表单数据的自动填充

1.第一个下拉列表，效果展示

2.第二个下拉列表，效果展示

3.先点击第一个下拉列表，然后第二个下拉列表自动填充，效果展示

4.js请求，后端接口，需要传递的数据格式，对象数组——appointmentUnitRecord_options1：

[ {"label": "培训教室","value": "教学"},
  {"label": "考试大厅", "value": "考试" },
 {"label": "共享自习室", "value": "培训" },
 {"label": "图书馆X", "value": "教学" } ]

4.1核心逻辑解释：

4.1.1 第一个下拉列表，第二个下拉列表的label值，不一致

第一个下拉列表 :label="item.label"

第二个下拉列表 :label="item.value"

4.1.2 第一个下拉列表，第二个下拉列表的value值，一致

第一个下拉列表 :value="item.value"

第二个下拉列表 :value="item.value"

4.1.3 自圆其说的解释

label值，对数据展示，起决定作用，决定了下拉列表的展示数据

value值，对数据展示，小作用，传给后端时用

key值，犯病一样，看不出有什么用处？没有还不行

4.1.4 逻辑解释

就是两个下拉列表表单，他们共用一个对象数组appointmentUnitRecord_options1，上面数据填充后，下面因为是共用一个对象数组，就会自动填充。

5.vue展示，前端代码

<el-row>
          <el-col :span="24">
            <el-form-item label="预约单元" prop="appointName">
              <el-select v-model="appointmentUnitRecord_form.appointTypeid" placeholder="请选择预约单元名称">
                <el-option v-for="item in appointmentUnitRecord_options1" :label="item.label" :value="item.value"
                           :key="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="预约类型" prop="appointTypeid">
              <el-select v-model="appointmentUnitRecord_form.appointTypeid" placeholder="请选择预约类型">
                <el-option v-for="item in appointmentUnitRecord_options1" :label="item.value" :value="item.value"
                           :key="item.key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

6.vue文件，script请求体中，methods方法，js代码，数据加工展示

handleLoan(row) {
        get_realia_detail(row.ID).then(response => {
          this.form = response

          this.loan_open = true
          this.loan_title = '新增借出记录信息'
        })
},

7.js文件，发起请求，js代码，路由展示

// 后端接口：查询下拉列表
export function get_realia_detail(id) {
  return request({
    url: '/center/realia/detail/' + praseStrEmpty(id),
    method: 'get'
  })
}