前言

今天项目要实现一个多级选项列表,发现iview官网上没有写这个例子，于是自己就实现了，如果对你有帮助请点个赞 ‘ * ’!!

解决方法:下面我们就来使用V-for 来定义一个二级选项列表 ，代码如下:

<Select>     
        <OptionGroup v-for="(group,index) in parentlist" :key="group.id" :label="group.name">
                   <Option v-for="(item,index) in group.childrenode" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </OptionGroup>
 </Select>

//Vue页面内中使用ts代码
<script lang="ts">
 get parentlist(){ 
          var parentlist=[{
                 id:1,
                 name:"parent1",
                 childrenode:[{
                     id:101,
                     name:"子1"
                    },{
                     id:102,
                     name:'子1-2

 

'
                    }]
                 },{
                  //....父2....
       },{//...父3 ..}
];
return parentlist;
}
</script>

实现效果：

            

版权声明：本文为jaciots原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jaciots/p/12832468.html