voinc+vue实现级联选择

最新推荐文章于 2024-01-10 10:45:09 发布
最新推荐文章于 2024-01-10 10:45:09 发布
阅读量783 收藏
点赞数
分类专栏： HTML vonic Vue 文章标签： vonic vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21104515/article/details/80832780
版权
HTML 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
Vue
5 篇文章 0 订阅
订阅专栏
vonic
2 篇文章 0 订阅
订阅专栏

需求： vonic中实现级联选择

<!DOCTYPE html>
<html>
<head>
    <title>下拉框</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">

    <style>
        .areaCom .tab-item{float:left; width:33%!important; flex:none;}
        .areaCom .page-content{ padding-top:92px!important;}
    </style>
</head>
<body>

<von-app></von-app>

<script type="text/x-template" id="index">
    <div class="ss" v-nav="{ title: '首页' }">
        <div class="list list-borderless hl-list list-ios von-cascade areaCom">
            <label class="item item-ios item-icon-right" v-on:click="areaSel" style="margin-top: 80px;">
                <span>下拉选择</span> <i class="icon ion-ios-arrow-right"></i>
                <span class="item-note">{{area}}{{street}}{{community}}</span>
                <div class="hairline-bottom"></div>
            </label>
        </div>
        <div class="areaCom von-cascade-panel active" v-if="areaShow" style="height:300px">
            <div class="title">选择</div>
            <div class="page has-navbar">
                <div class="tabs-striped tabs-top tabs-background-light tabs-color-positive">
                    <div class="tabs">
                        <a class="tab-item" v-bind:class="{'active':tabShow==1}" v-on:click="areaLi(1)">{{area}}</a>
                        <a class="tab-item" v-bind:class="{'active':tabShow==2}" v-on:click="areaLi(2)" v-if="streetList.length>0">{{street}}</a>
                        <a class="tab-item" v-bind:class="{'active':tabShow==3}" v-on:click="areaLi(3)" v-if="communityList.length>0">{{community}}</a>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==1">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in areaList" v-on:click="reStreet(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=areaList.length-1"></div>
                        </div>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==2">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in streetList" v-on:click="reCommunity(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=streetList.length-1"></div>
                        </div>
                    </div>
                </div>
                <div class="page-content" v-if="tabShow==3">
                    <div class="list list-borderless options">
                        <div class="item" v-for="(item,index) in communityList" v-on:click="areaComp(item)">
                            <div class="hairline-top"></div>
                            <span>{{item}}</span>
                            <div class="hairline-bottom" v-if="index!=communityList.length-1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div von-backdrop="" class="backdrop visible active" v-if="areaShow" v-on:click="areaSelClose"></div>
    </div>
</script>

<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
<script src="plugins/vue/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script>
<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>

<script>引入下面的js</script> 

</body> 

</html>

     js

    var areaData = {
        areaShow:false,//是否显示区选择div
        tabShow:1,//显示区, 街, 社区 
        area: "请选择",//区名
        street:"",//街名
        community:"",//社区名
        areaList:["一区","二区"],//查询出来的区列表
        streetList:[],//查询出来的街列表
        communityList:[],//查询出来的社区列表
    };
    var index = {
        template: '#index',
        data: function(){
            return areaData;
        },
        created: function () {

        },
        methods: {
            areaSel: function () {//点击  下拉选择  初试弹出区选择
                var self = this;
                self.areaShow=true;
                self.tabShow=1;
            },
            areaSelClose: function () {//点击弹出框以外, 关闭弹出框
                var self = this;

                if(self.street=="请选择"){
                    alert("请选择街");
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                }else if(self.community=="请选择"){
                    alert("请选择社区");
                    self.streetList=[];
                    self.areaShow=false;
                    self.area="请选择";
                    self.street="";
                    self.community="";
                }else{
                    self.areaShow=false;
                }
            },

            areaLi: function (n) {//选择后,还没退出, 需要修改相应的位置,点击后弹出相应的列表
                var self = this;
                self.tabShow=n;
            },
            reStreet: function (name) {//查询街列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                    var data = response.data.data;
                    self.streetList= data;
                });*/
                self.streetList= ["一街","二街"];

                self.area=name;//将传过来的区名赋值给属性,并显示
                self.street="请选择";
                self.community="";
                self.tabShow=2;
            },
            reCommunity: function (name) {//查询社区列表
                var self = this;
                /*Vue.resource("接口地址"+name).get().then(function (response) {
                 var data = response.data.data;
                 self.communityList= data;
                 });*/
                self.communityList= ["一社区","二社区"];

                self.street=name;//将传过来的社区名赋值给属性,并显示
                self.community="请选择";

                self.tabShow=3;
            },
            areaComp: function (name) {//用来赋值最后的社区属性,并显示
                var self = this;
                self.community=name;
                self.areaSelClose();
            },
        }
    }

    var routes = [
        { path: '/', component: index }
    ]

    Vue.use(Vonic.app, {
        routes: routes
    })

 

弓长张_木子李
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中如何进行表单联动与级联选择？
徐师兄的博客
06-13 2804
在Vue.js中实现表单联动和级联选择，可以使用计算属性、watcher和自定义指令等技术。表单联动可以使用计算属性和watcher来实现，计算属性适用于简单的场景，而watcher适用于复杂的场景。级联选择可以使用watcher和计算属性来实现，watcher适用于少量级联选择，而计算属性适用于多级级联选择。在实际应用中，我们需要根据具体的场景和需求来选择合适的实现方式。同时，我们还需要注意代码的可维护性和可读性，避免出现冗长和复杂的代码。
vue 实现级联选择器功能
最新发布
清音的博客
04-22 739
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 3353
Cascader 级联选择器
Vue2级联选择（Cascader）
Mr Dear的博客
12-23 8710
Vue2以 VueAmazingSelect 选择框为基础封装的级联选择框组件。
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5249
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
基于vue2.0实现的级联选择器
01-19
本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的，大量的数据运算放在后...
vonic+vue实现三级级联选择
06-27
点击选择,底部弹出选择框, 选择完成后自动关闭, 并显示选择的内容
springboot+vue实现文件上传下载
01-18
实现思路：通过h5 ：input元素标签进行选择文件，获取所选选择的文件路径，new fromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件...
SpringBoot + Vue 实现视频管理系统
04-25
本案例为SpringBoot+Vue实现，视频上传，视频管理，在线观看视频 视频管理系统，使用SpringBoot + Vue 实现视频的增删改查，分页，多条件搜索（根据视频标题查询） - 上传视频格式必须为 **yyyy-MM-dd/hhmmssxxxx....
springboot + xterm.js + vue + websocket实现终端功能
12-08
1、前端框架：Vue + element-ui 2、后端框架：SpringBoot + Mybatis 3、数据库：H2 4、其他第三方工具或者插件： Jsch：用于远程连接ECS服务器。 Websocket：与前端进行实时交互。 xterm：渲染web版本的terminal终端...
VUE实现级联选择框与选项互斥
Blog of Leviash
06-13 703
我们看到二级选择框的选择项并没有像一级一样直接双向绑定选项的code，因为一级选项虽然能多选，但是数据结构是对象，而二级是数组，如果直接item.secondaryIndicators[index].itemCode就有问题，故用一个secondaryIndicatorkeys来单独存储二级选项的code。功能布局如下图，实现根据一级选项的code去查询二级选项，并且其他二级选择框无法再次选中已经被选的二级选项。上面就实现了基本的级联功能，但是没用实现二级选项的互斥，下面我们来实现二级选项互斥。
Vue级联选择器
qq_44584476的博客
11-15 3060
1、内:添加级联选择器 2、export内:在data内声明变量options 3、methods内：编写函数将后端返回【或者前端的静态结果res】赋值给options
前端VUE实现级联选择器
weixin_69218754的博客
01-10 1189
前端VUE实现级联选择器
vue 实现级联选择框
2301_77738160的博客
04-20 760
table2: [['请选择...'],["请选择", "石家庄", "邯郸", "唐山", "张家口", "廊坊"],// table: ["请选择...", "河北省", "辽宁省", "山东省"],['请选择','济南','青岛','枣庄','烟台','东营']],['请选择','沈阳','大连','鞍山','本溪','丹东'],{tab:'请选择...',value:1},value:2}, {tab:'辽宁省',value:3}, {tab:'山东省',{tab:'河北省',
最全面最详细的Vue+ElementUI级联选择器设计，优化选择框收起和选择项圆圈问题
笑到根本停不下来的Kathy思的博客
11-08 4386
最全面的Vue+ElementUI级联选择器设计，对两点问题进行了修改 在学习的过程中涉及到一个级联选择器的设计，采用的是Vue+ElementUI。 template里面代码如下： <!-- options用来指定数据源 --> <!-- props用来指定配置对象 --> <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @chan
Vue Element Cascader 级联选择器
lmf13992427957的博客
09-28 2785
因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。
VUE 级联多选的方法，任意一级选择
qq_33304139的博客
12-20 6572
本人使用vue2.13.0版本 首先说vue进行级联选择，可以选择任意一级 其样本如下 代码部分： <div class="block"> <span class="demonstration">单选选择任意一级选项</span> <el-cascader :options="options" :props="{ checkStr...
vue 实现级联选择器
热门推荐
jasmine0178的博客
06-04 2万+
使用element 的 Cascader 级联选择器 默认 click 触发子菜单 里面的一些属性文档中都有说明。v-model是选中的绑定值。options为可选选项数据源。 在数据中定义v-model的值。options数据源也要定义一下啊 在methods中写入方法 这里面的value和label对应的值要根据后台返回的数据来，例如我这边返回的数据是这样的 根据返回的数据一层层循环...
vue实现级联选择器
08-20
Vue实现级联选择器需要使用Vue的数据绑定和计算属性的特性。下面是一个简单的示例代码： ```html <template> <div> <select v-model="selectedProvince" @change="updateCityOptions"> <option disabled value="">请选择省份</option> <option v-for="province in provinces" :key="province">{{ province }}</option> </select> <select v-model="selectedCity"> <option disabled value="">请选择城市</option> <option v-for="city in cityOptions" :key="city">{{ city }}</option> </select> </div> </template> <script> export default { data() { return { provinces: ['江苏省', '浙江省', '广东省'], // 省份列表 cities: { '江苏省': ['南京市', '苏州市', '无锡市'], '浙江省': ['杭州市', '宁波市', '温州市'], '广东省': ['广州市', '深圳市', '珠海市'] }, // 城市列表 selectedProvince: '', // 选中的省份 selectedCity: '', // 选中的城市 }; }, computed: { cityOptions() { return this.cities[this.selectedProvince] || []; // 根据选中的省份获取城市列表 } }, methods: { updateCityOptions() { this.selectedCity = ''; // 每次省份改变时，重置城市选择 } } }; </script> ``` 上述代码通过两个select元素实现了级联选择器，第一个select用于选择省份，第二个select用于选择城市。当选择省份时，根据选中的省份获取相应的城市列表，并将城市列表绑定到第二个select上。同时，每次省份选择改变时，重置城市选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值