el-select选择器根据后台返回动态展示内容

Posted 2021-12-07 水星记_

大概需求是是这样的，在进入页面后会有一个下拉框，默认是一个空数组，是没有数据的，数据来源呢是请求接口将返回的数据展示在下拉框中。那具体要怎么实现呢,其实也非常简单,通过循环遍历拿到数据,然后把拿到的数据通过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}次维修信息` //展示的文本信息
                })
            }
        })
    },
}