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

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

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

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

中文文檔:TreeSelect 分類選擇

效果展示:

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

//先在你需要的頁面中引入,第一個是彈出層,第二個是選擇的 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ù)邏輯,希望對你能有幫助:

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

//這是我的后臺傳過來的數(shù)據(jù),我將這個數(shù)據(jù)加到items里面去,左側(cè)的數(shù)據(jù)將就展示出來了,注意這里是循環(huán)的數(shù)據(jù),我為了簡單這么寫了,還有items中的key盡量用text,要不會渲染不上,在picker上面是有個value-key去改變的,這一會兒在下一篇文章中講{ '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': '測試重復(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)前點擊的值 this.requestPoliceList(substationCode) //這是請求右側(cè)列表的請求通過activeId去請求。 },

總結(jié):

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

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

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

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

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

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

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

不說廢話了直接看代碼吧

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

咱們來一個一個說明一下吧

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

之后是透傳的參數(shù)和數(shù)據(jù)配置props組件肯定是子的嘛,props中的東西都是可以從父級里面透傳過來的

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

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

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

props中的透傳的參數(shù)

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

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

defaultExpandLevel就是從哪一級來時折疊展開,

defaultExpandAll就是全部展開或者折疊

multiple是否為多選

disabled這個就是可選擇與不可選擇

validateEvent驗證必填與不必填的屬性

clearable是否有清除的屬性

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

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

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

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

當(dāng)然給一個說明唄在這里我使用了requirejs通過define的屬性也就是所謂的AMD來再次封裝這個組件,首頁先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分類選擇組件操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 手术室净化厂家-成都做医院净化工程的公司-四川华锐-15年特殊科室建设经验 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | ph计,实验室ph计,台式ph计,实验室酸度计,台式酸度计 | 行吊_电动单梁起重机_双梁起重机_合肥起重机_厂家_合肥市神雕起重机械有限公司 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 喷涂流水线,涂装流水线,喷漆流水线-山东天意设备科技有限公司 | 凝胶成像系统(wb成像系统)百科-上海嘉鹏 | 英国雷迪地下管线探测仪-雷迪RD8100管线仪-多功能数字听漏仪-北京迪瑞进创科技有限公司 | 广州工业氧气-工业氩气-工业氮气-二氧化碳-广州市番禺区得力气体经营部 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 交通气象站_能见度检测仪_路面状况监测站- 天合环境科技 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 菲希尔X射线测厚仪-菲希尔库伦法测厚仪-无锡骏展仪器有限责任公司 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 代写标书-专业代做标书-商业计划书代写「深圳卓越创兴公司」 | 台湾阳明固态继电器-奥托尼克斯光电传感器-接近开关-温控器-光纤传感器-编码器一级代理商江苏用之宜电气 | 代做标书-代写标书-专业标书文件编辑-「深圳卓越创兴公司」 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 光照全温振荡器(智能型)-恒隆仪器 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 流水线电子称-钰恒-上下限报警电子秤-上海宿衡实业有限公司 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 【化妆品备案】进口化妆品备案流程-深圳美尚美化妆品有限公司 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 无菌水质袋-NASCO食品无菌袋-Whirl-Pak无菌采样袋-深圳市慧普德贸易有限公司 | 中医治疗皮肤病_潍坊银康医院「山东」重症皮肤病救治平台 | 网站建设,北京网站建设,北京网站建设公司,网站系统开发,北京网站制作公司,响应式网站,做网站公司,海淀做网站,朝阳做网站,昌平做网站,建站公司 | DAIKIN电磁阀-意大利ATOS电磁阀-上海乾拓贸易有限公司 | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 电主轴,车床电磨头,变频制动电机-博山鸿达特种电机 | 天然鹅卵石滤料厂家-锰砂滤料-石英砂滤料-巩义东枫净水 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 引领中高档酒店加盟_含舍·美素酒店品牌官网 | 风电变桨伺服驱动器-风电偏航变桨系统-深圳众城卓越科技有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 武汉不干胶印刷_标签设计印刷_不干胶标签印刷厂 - 武汉不干胶标签印刷厂家 | 周口风机|周风风机|河南省周口通用风机厂 |