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

导读:本篇文章讲解 el-select选择器根据后台返回动态展示内容,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/79426.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!