电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

在vue中使用vant TreeSelect分類選擇組件操作

瀏覽:43日期:2022-11-07 16:31:14

中文文檔:TreeSelect 分類選擇

效果展示:

在vue中使用vant TreeSelect分類選擇組件操作

//先在你需要的頁面中引入,第一個(gè)是彈出層,第二個(gè)是選擇的 import { Popup } from 'vant'; import { TreeSelect } from 'vant';

代碼部分:

<van-popup v-model='policeShow' position='top' :overlay='true'> <van-tree-select :items='items' :active-id.sync='items.activeId' :main-active-index.sync='items.activeId' @click-nav='onNavClick' > <template slot='content' > <ul class='right-content'> <li v-for='(item,index) in policeList' :key='index' : @click='onItemClick(item.policeName,item.policeCode)'> {{item.policeName}} </li> </ul> </template> </van-tree-select> <div @click='onPoliceClick'>完成</div> </van-popup>

現(xiàn)在我來解析我的業(yè)務(wù)邏輯,希望對(duì)你能有幫助:

1.首先:items,是個(gè)數(shù)組,我們需要給它傳個(gè)數(shù)組過去,用來展示左側(cè)的數(shù)據(jù)

//這是我的后臺(tái)傳過來的數(shù)據(jù),我將這個(gè)數(shù)據(jù)加到items里面去,左側(cè)的數(shù)據(jù)將就展示出來了,注意這里是循環(huán)的數(shù)據(jù),我為了簡(jiǎn)單這么寫了,還有items中的key盡量用text,要不會(huì)渲染不上,在picker上面是有個(gè)value-key去改變的,這一會(huì)兒在下一篇文章中講{ 'code': 200, 'message': 'success', 'data': [ { 'substationCode': '1101010000', 'substationName': '東城區(qū)分局' }, { 'substationCode': '100002', 'substationName': '昌平區(qū)分局' }, { 'substationCode': '100003', 'substationName': '海淀區(qū)分局' }, { 'substationCode': '100001003', 'substationName': '海淀區(qū)分局' }, { 'substationCode': '1010101', 'substationName': '昌平區(qū)分局' }, { 'substationCode': '1010101t', 'substationName': '111' }, { 'substationCode': '1000021', 'substationName': '測(cè)試重復(fù)分局' }, { 'substationCode': '12223', 'substationName': '河北分局' } ]} this.items.push({ activeId:substationCode, text:substationName })

2.我們要根據(jù)左側(cè)的數(shù)據(jù)去渲染右側(cè)的數(shù)據(jù)(右側(cè)的數(shù)據(jù)是自定義的,所以你自己加事件就行)

@click-nav代碼部分已經(jīng)寫了 onNavClick(index) { console.log(index) let substationCode = this.items[index].activeId //這是我們通過index獲取到當(dāng)前點(diǎn)擊的值 this.requestPoliceList(substationCode) //這是請(qǐng)求右側(cè)列表的請(qǐng)求通過activeId去請(qǐng)求。 },

總結(jié):

1.渲染左側(cè),將后臺(tái)給你的值push到items里面(注意只能使用text)

2.通過@click-nav獲取當(dāng)前的index并拿到id

3.通過id渲染右側(cè)的數(shù)據(jù)

補(bǔ)充知識(shí):vue-treeselect的自定義部分說明和使用心得

在vue中出現(xiàn)了各種各樣的框架,vue-treeselect就是vue的樹選擇;就是基于vue的多選組件

在平常的情況下一般我把vue-treeselect再次封裝一遍為自己業(yè)務(wù)提供便利

當(dāng)然它的功能還是有很多的例如:?jiǎn)芜x、多選、模糊搜索、清除等等

不說廢話了直接看代碼吧

在vue中使用vant TreeSelect分類選擇組件操作

咱們來一個(gè)一個(gè)說明一下吧

首先命名一個(gè)樹的名字,到時(shí)候組件調(diào)用的時(shí)候好調(diào)用也就是name

之后是透?jìng)鞯膮?shù)和數(shù)據(jù)配置props組件肯定是子的嘛,props中的東西都是可以從父級(jí)里面透?jìng)鬟^來的

template就是我所需要的的vue-treeselect的組件模板

data就是我子組件的數(shù)據(jù)參數(shù)

當(dāng)然在這個(gè)TgElTreeSelect你還可以放入methods、vue中的生命周期、計(jì)算屬性、偵聽器等等

props中的透?jìng)鞯膮?shù)

在vue中使用vant TreeSelect分類選擇組件操作

props里面可以有數(shù)據(jù)value也就是初始化的數(shù)據(jù),dataList就是你的接口數(shù)據(jù),接下來的就是你選擇之后渲染的屬性和上傳的屬性了,說的直白一點(diǎn)就是下拉中的label和value當(dāng)然上面對(duì)應(yīng)的就是我的labelField和selectField,之后的屬性就是樹形折疊屬性,

defaultExpandLevel就是從哪一級(jí)來時(shí)折疊展開,

defaultExpandAll就是全部展開或者折疊

multiple是否為多選

disabled這個(gè)就是可選擇與不可選擇

validateEvent驗(yàn)證必填與不必填的屬性

clearable是否有清除的屬性

當(dāng)然我也把我完整的代碼粘出來

在vue中使用vant TreeSelect分類選擇組件操作

在vue中使用vant TreeSelect分類選擇組件操作

在vue中使用vant TreeSelect分類選擇組件操作

當(dāng)然給一個(gè)說明唄在這里我使用了requirejs通過define的屬性也就是所謂的AMD來再次封裝這個(gè)組件,首頁先npm安裝vue-treeselect

npm install --save @riophae/vue-treeselect

Vue.component(’treeselect’, VueTreeselect.Treeselect)

上面的這句代碼就是下載完之后引入treeselect

當(dāng)然官網(wǎng)上的更全面詳細(xì)的可以看看官網(wǎng)的再研究研究

以上這篇在vue中使用vant TreeSelect分類選擇組件操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 不锈钢拉手厂家|浴室门拉手厂家|江门市蓬江区金志翔五金制品有限公司 | 120kv/2mA直流高压发生器-60kv/2mA-30kva/50kv工频耐压试验装置-旭明电工 | SPC工作站-连杆综合检具-表盘气动量仪-内孔缺陷检测仪-杭州朗多检测仪器有限公司 | 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | 二手注塑机回收_旧注塑机回收_二手注塑机买卖 - 大鑫二手注塑机 二手光谱仪维修-德国OBLF光谱仪|进口斯派克光谱仪-热电ARL光谱仪-意大利GNR光谱仪-永晖检测 | 天一线缆邯郸有限公司_煤矿用电缆厂家_矿用光缆厂家_矿用控制电缆_矿用通信电缆-天一线缆邯郸有限公司 | 车牌识别道闸_停车场收费系统_人脸识别考勤机_速通门闸机_充电桩厂家_中全清茂官网 | 膜结构_ETFE膜结构_膜结构厂家_膜结构设计-深圳市烨兴智能空间技术有限公司 | 东莞市天进机械有限公司-钉箱机-粘箱机-糊箱机-打钉机认准东莞天进机械-厂家直供更放心! | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 连栋温室大棚建造厂家-智能玻璃温室-薄膜温室_青州市亿诚农业科技 | 直读光谱仪,光谱分析仪,手持式光谱仪,碳硫分析仪,创想仪器官网 | 深圳市超时尚职业培训学校,培训:月嫂,育婴,养老,家政;化妆,美容,美发,美甲. | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 首页-恒温恒湿试验箱_恒温恒湿箱_高低温试验箱_高低温交变湿热试验箱_苏州正合 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 桨叶搅拌机_螺旋挤压/方盒旋切造粒机厂家-无锡市鸿诚输送机械有限公司 | 皮带输送机-大倾角皮带输送机-皮带输送机厂家-河南坤威机械 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | 武汉印刷厂-不干胶标签印刷厂-武汉不干胶印刷-武汉标签印刷厂-武汉标签制作 - 善进特种标签印刷厂 | 屏蔽服(500kv-超高压-特高压-电磁)-徐吉电气 | 制丸机,小型中药制丸机,全自动制丸机价格-甘肃恒跃制药设备有限公司 | 电液推杆生产厂家|电动推杆|液压推杆-扬州唯升机械有限公司 | 手术室净化厂家_成都实验室装修公司_无尘车间施工单位_洁净室工程建设团队-四川华锐16年行业经验 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 彩超机-黑白B超机-便携兽用B超机-多普勒彩超机价格「大为彩超」厂家 | 北京工业设计公司-产品外观设计-产品设计公司-千策良品工业设计 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 一航网络-软件测评官网 | 单级/双级旋片式真空泵厂家,2xz旋片真空泵-浙江台州求精真空泵有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 执业药师报名时间,报考条件,考试时间-首页入口 |