vue 公共列表选择组件,引用Vant-UI的样式方式


Posted in Javascript onNovember 02, 2020

此组件用于公共选择组件。引用Vant UI 作为样式

特性:

1、支持动态、静态数据源。

2、支持分页加载。

3、支持模糊搜索。

4、支持单选、多选。

组件源码:

<template>
 <div class="gn-PubSelect">
 <van-action-sheet v-model="inShow">
  <div class="gn-PubSelect-main" :style="{'height':mainHeight}">
  <van-search class="gn-search" placeholder="请输入搜索关键词" v-model="condition" show-action>
   <van-button slot="action" size="small" type="primary" @click="inShow = false">确认</van-button>
  </van-search>
  <div class="gn-select-list">
   <van-list
   v-model="loading"
   :finished="finished"
   finished-text="没有更多了"
   @load="filterSelectList"
   >
   <!--单选控件-->
   <van-radio-group v-model="radioResult" v-if="type == 'radio'">
    <van-cell-group>
    <van-cell
     class="gn-cell"
     v-for="(item, index) in filterList"
     :title="item.Name"
     @click="radioResult = item"
     :key="item.Id"
     clickable>
     <van-radio
     checked-color="#07c160"
     slot="right-icon"
     :name="item" />
     {{item.Number}}
    </van-cell>
    </van-cell-group>
   </van-radio-group>
 
   <!--复选控件-->
   <van-checkbox-group v-model="checkboxResult" v-if="type == 'checkbox'">
    <van-cell-group>
    <van-cell
     class="gn-cell"
     v-for="(item, index) in filterList"
     clickable
     :key="item.Id"
     :title="`${item.Name}`"
     @click="toggle(index)"
    >
     <van-checkbox
     ref="checkboxes"
     checked-color="#07c160"
     slot="right-icon"
     :name="item"
     />
     {{item.Number}}
    </van-cell>
    </van-cell-group>
   </van-checkbox-group>
   </van-list>
  </div>
  </div>
 </van-action-sheet>
 </div>
</template>
<script>
 var vm = null;
 import {postAction} from '@/api/manage'
 export default {
 /*name:'PubSelect'+Math.random(),*/
 props: {
  show: {
  type:Boolean,
  required: true
  },
  type:{
  type:String,
  required: true,
  validator: function(value){
   return value == 'radio' || value == 'checkbox';
  }
  },
  isLink:{
  type:Boolean,
  default:function () {
   return false;
  }
  },
  url:{
  type:String
  },
  selectList:{
  type:Array
  }
 },
 data() {
  return {
  inShow:false, //是否显示选择组件
  condition:'', //查询关键字
  checkboxResult:[], //复选框 选中结果
  radioResult:{}, //单选框 选中结果
  filterList: [], //过滤后的选择列表
  loading:false,
  finished:false,
  page:1
  }
 },
 computed:{
  mainHeight(){
  let h = document.documentElement.clientHeight || document.body.clientHeight;
  return (h*0.9)+'px';
  }
 },
 watch:{
  condition(newVal,oldVal){
  /*条件改变时更新选择列表*/
  this.filterList = [];
  this.page = 1;
  this.filterSelectList();
  },
  inShow(newVal,oldVal){
  //子组件向父组件传值
  this.$emit('update:show',newVal);
  //关闭选择控件时自动带回选中的值
  if(!newVal){
   this.updateSelectList();
  }
  },
  show(newVal,oldVal){
  //子组件接收父组件的值
  this.inShow = newVal;
  }
 },
 created() {
  vm = this;
  this.initCheck();
  this.filterSelectList();
 },
 mounted() {
 },
 destroyed() {
 },
 methods: {
  filterSelectList(){
  /*过滤选择列表*/
  if(!this.isLink){
   this.filterList = [];
   for(let i=0;i<this.selectList.length;i++){
   let item = this.selectList[i];
   if(item.Name.indexOf(this.condition) != -1 || item.Number.indexOf(this.condition) != -1){
    this.filterList.push(item);
   }
   }
   this.finished = true;
  }else{
   /*动态加载数据*/
   this.loading = true;
   postAction(this.url,{PageSize:10,Page:this.page++,Condition:this.condition}).then((result) => {
   // 加载状态结束
   this.loading = false;
   // 数据全部加载完成
   if (result.length == 0) {
    this.finished = true;
   }else{
    for(let i=0;i<result.length;i++){
    this.filterList.push(result[i]);
    }
   }
   });
  }
  },
  toggle(index) {
  this.$refs.checkboxes[index].toggle();
  },
  updateSelectList(){
  /*更新选中结果*/
  if(this.type == 'radio'){
   this.$emit('update:result',this.radioResult);
  }else{
   this.$emit('update:result',this.checkboxResult);
  }
  },
  initCheck(){
  /*检验参数有效性*/
  if(this.isLink){
   if(this.url == undefined || this.url == null || this.url == ""){
   throw new Error("[url]参数必填!");
   }
  }else{
   if(this.selectList == undefined || this.selectList == null ){
   throw new Error("[selectList]参数必填!");
   }
  }
  }
 }
 };
</script>
<style scoped="scoped" lang="scss">
 .gn-PubSelect {
 .gn-PubSelect-main{
  display: flex;
  flex-flow: column;
  position: relative;
  max-height: 90%;
  .gn-search{
 
  }
  .gn-select-list{
  flex: 1;
  overflow-y: scroll;
  .gn-cell{
   .van-cell__title{
   margin-right: 10px;
   flex: 1;
   }
   .van-cell__value{
   text-align: left;
   word-break: break-all;
   flex: none;
   margin-right: 10px;
   max-width: 120px;
   display: flex;
   align-items: center;
   }
  }
  }
 }
 }
</style>

组件中的【动态加载数据】是经过封装的请数据,需要改为axios请求。

vue 公共列表选择组件,引用Vant-UI的样式方式

数据源:

1、静态数据源格式

"list": [
 {
  "Id": "",
  "Number": "",
  "Name": ""
 }
 ],

2、动态数据源格式

{
 "Success": true,
 "Data": [
 {
  "Id": "",
  "Number": "",
  "Name": ""
 }
 ],
 "Page": 1,
 "PageSize": 3
}

使用方式

1、在需要使用选择组件的地方引入组件

import PubSelect from '@/base/PubSelect.vue'

2、静态数据源使用方式

<pub-select
 id="pub-select"
 type="radio"
 :show.sync="showSelectProject"
 :selectList="list"
 :result.sync="form.project"
/>

3、动态数据源使用方式

<pub-select
 id="pub-select"
 type="checkbox"
 :show.sync="showSelectProject"
 :result.sync="FCourse"
 url="/assetCtl/projectList"
 isLink
/>

补充知识:van-picker级联选择(自定义字段显示)

前言

Vant之van-picker级联选择

1、将自定义平铺结构转化为层级结构数据

2、动态$set()给每一条数据对象添加text属性用于展示

数据处理

原始数据

[
 {id: 'node1',pid: '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;
  }

使用组件

<van-field readonly clickable placeholder="一二级分类" :value="form.kind" @click="showPicker = true" />
 <van-popup v-model="showPicker" position="bottom" :duration="0">
 <van-picker show-toolbar title="分类选择" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
</van-popup>
onConfirm(value)   {
    let str = ""; // 呈现页面显示 /xxx/xxx/xxx
    for(let i= 0;i<value.length;i++){
     if(i>0){
      str += "/" + value[i];
     }
     else{
      str +=value[i];
     }
    }
    this.form.kind = str;
    this.showPicker = false
   },

效果

vue 公共列表选择组件,引用Vant-UI的样式方式

选择效果

vue 公共列表选择组件,引用Vant-UI的样式方式

以上这篇vue 公共列表选择组件,引用Vant-UI的样式方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 #Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
vue实现列表拖拽排序的功能
Nov 02 #Javascript
用vue写一个日历
Nov 02 #Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
You might like
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python脚本第一行如何写
2020/08/30 Python
python爬取天气数据的实例详解
2020/11/20 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
Overload和Override的区别
2012/09/02 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
百年校庆节目主持词
2014/03/27 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
消防安全责任书
2014/04/14 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
公司董事任命书
2015/09/21 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Golang解析JSON对象
2022/04/30 Golang
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers