el-option不显示绑定的lable值而显示绑定的value值

Question

问题：使用v-for遍历创建el-select的el-option，两个同样的下拉框，学院下拉框的el-option可以正常显示lable的值，而专业下拉框总是显示value的值

            /**挂载时获得所有学院信息 */
            async function findAllFaculty(){
                await axios.get('http://localhost:8082/admin/findAllFaculty')
                .then((res) => {
                            // console.log(res)
                            // console.log(res.data)
                            facultyList.push(...res.data)
                            console.log(facultyList)
                            
                        })
                        .catch(error => {
                            console.log("get错误信息"+error)
                        });
            }
            /**根据所选学院，动态搜索该学院下的专业 */
            async function findAllDep(val){
                await axios.get('http://localhost:8082/admin/findAllDep',{
                    params:{
                        facultyId:val
                    }
                })
                .then((res) => {
                            departmentList.length=0
                            departmentList.push(...res.data)
                            console.log(departmentList)
                        })
                        .catch(error => {
                            console.log("get错误信息"+error)
                        });
            }
            // console.log(dataForm.department)
            const submitForm = (ruleFormRef)=>{}
            const resetForm = (ruleFormRef)=>{}
            onMounted(() => {
                findAllFaculty()
                })

浏览器显示

控制台输出

Answer 1

引自免费微信小程序：皆我百晓生

看起来您在使用Element UI的el-select组件时遇到了一个显示问题。在学院下拉框中，选项正确地显示了label属性（即item.facultyName），而在专业下拉框中，它却显示了value属性（即item.departmentId）。为了解决这个问题，我们需要检查一下专业下拉框中的el-option标签。

首先，确保您的departmentList中的对象结构与学院列表相同，都有facultyName和departmentName字段。从提供的数据来看，这似乎不是问题，因为部门列表中也有departmentName字段。

接下来，我们来修改专业下拉框的el-option部分，使其正确显示departmentName作为标签。这里有一个可能的问题是，当您在:label属性中写入item.facultyName时，实际上应该写成item.departmentName。下面是修复后的代码：

<!-- 专业下拉框 -->
<el-form-item label="专业" prop="department" :label-width="formLabelwidth">
    <el-select v-model="dataForm.department" placeholder="选择专业" filterable :filter-method="depMethod()" style="width: 220px;">
        <el-option
            v-for="item in departmentList"
            :key="item.departmentId"
            :label="item.departmentName" <!-- 修改这里，将 item.facultyName 改为 item.departmentName -->
            :value="item.departmentId"
        ></el-option>
    </el-select>
</el-form-item>

现在，专业下拉框应该会显示正确的departmentName值了。如果问题仍然存在，请确认departmentList的数据是否正确，并且每个对象都有预期的departmentName字段。如果有任何其他疑问或问题，请随时告诉我。