iview里面的select可以多选，同时动态显示你选了几条数据

最新推荐文章于 2024-08-14 09:18:29 发布

IT博客技术分享

最新推荐文章于 2024-08-14 09:18:29 发布

阅读量6.5k

点赞数 1

分类专栏： iview组件文章标签： iview里面的select可以多选

本文链接：https://blog.csdn.net/qq_41646249/article/details/90085554

版权

iview组件专栏收录该内容

31 篇文章 3 订阅

订阅专栏

先上效果图：

分析：

要想让上面的显示，下面的select的选中几条的数据，只需要把下面的selcet加一个on-change事件绑定就可以。

然后判断里面的length 的长度，就是你需要的结果；

@on-change="get_num"

get_num(data){
console.log("data",data);
this.num = data.length;
},

代码如下：

<template>
    <div>
        <Select v-model="model10" multiple style="width:260px" @on-change="get_num">
            <Option v-for="(item,index) in cityList" :value="item.label" :key="index">{{ item.label }}</Option>
        </Select>
        <div>
            <Input type="text" v-model="num" disabled style="width:150px" />
            <Button type="primary"  @click="sumit()">提交</Button>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                num:0,
                cityList: [
                    {
                        value: '1',
                        label: 'New York'
                    },
                    {
                        value: '2',
                        label: 'London'
                    },
                    {
                        value: '3',
                        label: 'Sydney'
                    },
                    {
                        value: '4',
                        label: 'Ottawa'
                    },
                    {
                        value: '5',
                        label: 'Paris'
                    },
                    {
                        value: '6',
                        label: 'Canberra'
                    }
                ],
                model10: []
            }
        },
        methods:{
            get_num(data){
                console.log("data",data);
                this.num = data.length;
            },
            sumit(e){
                console.log("提交",e);
            }
        }
    }
</script>
<style>
</style>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140