程序员必备技能：掌握el-select选择器动态展示方法

前言

在开发中，动态展示内容是至关重要的。而 el-select 选择器作为一个常见的表单元素，更是经常用到。那么，如何实现 el-select 根据后台返回的数据动态展示内容呢？本文将为大家详细介绍。

---

需求：

大概需求是这样的，在进入页面后会有一个下拉框，默认是一个空数组，是没有数据的，数据来源呢是请求接口将返回的数据展示在下拉框中。那具体要怎么实现呢，其实也非常简单，通过循环遍历拿到数据，然后把拿到的数据通过 push 方法添加到定义好的空数组中就可以啦，具体实现过程可以参考下面代码。

---

html

<div>
    <el-select v-model="firstMaintain" placeholder="请选择">
            <el-option v-for="(item,index) in maintainOption" :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
</div>

---

data

data() {
        return {
            firstMaintain:"",//下拉框绑定的值
            maintainOption:[],//下拉框要展示数据
        }
    },

---

js

methods:{
    //事件方法
    examine(row) {
        let id = row.id //后端需要的参数
        //请求接口
        repairDetails({id}).then(res => {
            // 将接口返回的数据循环添加到下拉框的数组中
            for (let i = 0; i < res.data.wxxx.length; i++) {
                //默认展示的值
                this.firstMaintain = `第${i + 1}次维修信息`;
                //将所有的值添加到下拉框数组中
                this.maintainOption.push({
                    value: `${i}`, //相当于是一个下标index
                    label: `第${i + 1}次维修信息` //展示的文本信息
                })
            }
        })
    },
}