这篇文章主要介绍了vue 公共列表选择组件,引用Vant-UI的样式方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
此组件用于公共选择组件。引用Vant UI 作为样式
特性：
1、支持动态、静态数据源。
2、支持分页加载。
3、支持模糊搜索。
4、支持单选、多选。
组件源码：
<div class="gn-PubSelect"> <div class="gn-PubSelect-main"> 确认<div class="gn-select-list"> <van-list v-model="loading" :finished="finished" finished-text="没有更多<a href="http://www.gaodaima.com/onstage">前端</a>的相关知识：</strong></span><strong>van-picker级联选择（自定义字段显示） </strong></p><p><strong>前言</strong></p><p>Vant之van-picker级联选择</p><p>1、将自定义平铺结构转化为层级结构数据</p><p>2、动态$set()给每一条数据对象添加text属性用于展示</p><p><strong>数据处理</strong></p><p><strong>原始数据</strong></p><div class="gaodaimacode"><pre class="prettyprint linenums"> [ {id: 'node1',pid: '<span style="color:transparent">本文来源gaodai#ma#com搞*!代#%^码$网!</span>root',content: 'test'}, {id: 'node2',pid: 'root',content: 'test'}, {id: 'node3',pid: 'node1',content: 'test'}, {id: 'node4',pid: 'node2',content: 'test'}, {id: 'node5',pid: 'node3',content: 'test'}, {id: 'node6',pid: 'node1',content: 'test'} ]
转化后数据
[ { id: 'node1', pid: 'root', content: 'test', children: [ { id: 'node3', pid: 'node1', ccontent: 'test', children: [ {id: 'node5',pid: 'node3',content: 'test'} ] }, {id: 'node6',pid: 'node1',content: 'test'} ] }, { id: 'node2', pid: 'root', content: 'test', children: [ {id: 'node4',pid: 'node2',content: 'test'} ] }, ]
转化函数tile2nest
// 平铺结构转嵌套结构 tile2nest(array, key, pKey, childrenKey) { if (!array || array.constructor !== Array) { return array; } // 复制一份，避免修改原始数组 let ary = [...array]; key = key || "id"; // 平铺数据主键 pKey = pKey || "parentId";//平铺数据父节点数据 childrenKey = childrenKey || "children";//子节点名称 // 定义一个待移除数组 let ary2remove = []; ary.map(item => { //动态添加属性text以适应van-picker组件默认显示text字段 this.$set(item,'text',item.name); if (item[key] !== item[pKey]) { // 找父节点 let p = ary.filter(c => c[key] === item[pKey]); if (p && p.length == 1) { p[0].children = p[0].children || []; // 将子节点放到父节点中 p[0].children.push(item); ary2remove.push(item[key]); } } }); // 遍历移除待删除对象 ary2remove.map(item => { ary = ary.filter(c => c[key] !== item); }); //返回转化后的层次结构数据 return ary; }
使用组件
onConfirm(value) { let str = ""; // 呈现页面显示 /xxx/xxx/xxx for(let i= 0;i0){ str += "/" + value[i]; } else{ str +=value[i]; } } this.form.kind = str; this.showPicker = false },
效果
选择效果
以上就是vue 公共列表选择组件,引用Vant-UI的样式方式的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue 公共列表选择组件,引用Vant-UI的样式方式
转载请注明原文链接：vue 公共列表选择组件,引用Vant-UI的样式方式
