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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript知识点整理
Dec 09 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
javascript防抖函数debounce详解
Jun 11 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 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
ThinkPHP中Session用法详解
2014/11/29 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
简单上手Python中装饰器的使用
2015/07/12 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Python对wav文件的重采样实例
2020/02/25 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
教学大赛获奖感言
2014/01/15 职场文书
小学校园活动策划
2014/01/30 职场文书
给全校老师的建议书
2014/03/13 职场文书
2014年班级工作总结
2014/11/14 职场文书
挂职个人工作总结
2015/03/05 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS