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对象的property和prototype是这样一种关系
Mar 24 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 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
用mysql内存表来代替php session的类
2009/02/01 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
php简单日历函数
2015/10/28 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
vue的mixins属性详解
2018/03/14 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
详解VSCode配置启动Vue项目
2019/05/14 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Java模拟试题
2014/11/10 面试题
企业统计员岗位职责
2013/12/13 职场文书
纠风工作实施方案
2014/03/15 职场文书
降消项目实施方案
2014/03/30 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
教师素质教育心得体会
2016/01/19 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android