iview的下拉框select无法渲染数据问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nihaoa50/article/details/86677138

问题代码：

			<FormItem label="选择系统：" >
                <Select style="width:350px"  v-model="systemFolderName" placeholder="请选择系统"
                 @on-open-change="changeSelect" @on-change="getLogFileNames" filterable
                 @on-query-change="changeSelect">
                    <OptionGroup  v-for="(item,index) in systemSourceResponceData" :label="item.systemGroupName"  :key="index">
                        <Option v-for="(subitems,subindexs) in item.systemList" :value="subitems.systemName" :key="subindexs" :disabled="item.systemList[0].systemName=='无数据'">{{ subitems.systemName }}</Option>
                    </OptionGroup>
                </Select>
            </FormItem>
            <FormItem label="选择文件：">
                <Select v-model="fileName" style="width:350px" placeholder="请选择文件"  @on-change="getFilesize" filterable>
                    <Option v-for="(item, index) in files" :value="item.value" :key="item.value + index">{{ item.label }}</Option>
                </Select>
            </FormItem>

getLogFileNames(){
            if(this.systemFolderName == null){
                this.$Message.error({
                    content:"请选择系统",
                    duration:2
                });
                return;
            }
            var path = this.systemFolderName;
            this.showFilesize=false;
            this.fileName=null;               
            this.$axios.get("/filedownload/files",
                {
                    params:{
                        path: path,
                    }
                })
                .then((response) =>{
                    var list = response.data.body;
                    this.files=[];
                    for(var i=0;i<list.length;i++){
                            this.files.push({
                                    value:list[i],
                                    label:list[i]
                                });
                        }
                })
                .catch(function(error){
                    console.error(error);
                })
        },

此段代码的逻辑为：选择系统后，将系统所属的文件名称加载到文件下拉框中。按正常的逻辑，files数组中有数据的话，那么文件下拉框就会有数据。然而如果你像上面的代码那样写你就会发现，你切换系统后进行选择，文件数组files[]有值，而下拉框却没有渲染出数据。

正确写法

			<FormItem label="选择系统：" >
                <Select style="width:350px"  v-model="systemFolderName" placeholder="请选择系统"
                 @on-open-change="changeSelect" @on-change="getLogFileNames" filterable
                 @on-query-change="changeSelect">
                    <OptionGroup  v-for="(item,index) in systemSourceResponceData" :label="item.systemGroupName"  :key="index">
                        <Option v-for="(subitems,subindexs) in item.systemList" :value="subitems.systemName" :key="subindexs" :disabled="item.systemList[0].systemName=='无数据'">{{ subitems.systemName }}</Option>
                    </OptionGroup>
                </Select>
            </FormItem>
            <FormItem label="选择文件：">
            	<!--加一个v-if来控制下拉框的加载-->
                <Select v-if="rendering" v-model="fileName" style="width:350px" placeholder="请选择文件"  @on-change="getFilesize" filterable>
                    <Option v-for="(item, index) in files" :value="item.value" :key="item.value + index">{{ item.label }}</Option>
                </Select>
            </FormItem>

getLogFileNames(){
            if(this.systemFolderName == null){
                this.$Message.error({
                    content:"请选择系统",
                    duration:2
                });
                return;
            }
            var path = this.systemFolderName;
            this.showFilesize=false;
            this.fileName=null; 
            //文件下拉框失效   
            this.rendering = false;                
            this.$axios.get("/filedownload/files",
                {
                    params:{
                        path: path,
                    }
                })
                .then((response) =>{
                    var list = response.data.body;
                    this.files=[];
                    for(var i=0;i<list.length;i++){
                            this.files.push({
                                    value:list[i],
                                    label:list[i]
                                });
                        }
                        //文件下拉框重新加载
                        this.rendering = true;
                })
                .catch(function(error){
                    console.error(error);
                })
        },

核心在于添加一个v-if来控制文件下拉框的加载，才能保证数据的渲染。如果这样尝试还不成功，你可以尝试下用this.$nextTick。这个问题的本质就是iview没那么聪明，或者说下拉框数据iview只加载一次，所以后续需要我们去进行加载操作。

this.$nextTick(()=>{
    this.rendering = true;
});

---

---

本人程序媛一枚，因为离港澳较近，周末兼职港澳人肉代购。

欢迎各位大佬添加本人微信，还会经常有点赞活动送价值不菲的小礼品哦。

即使现在不需要代购，等以后有了女（男）朋友、有了宝宝就肯定会需要的喽。

动动手指头，扫码一下，就当是对本博文的支持嘛，也是对一个平凡、勤劳、勇敢、秀外慧中等等优点的程序媛莫大的支持哈。