vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件。引用Vant UI 作为样式
特性:
1、支持动态、静态数据源。
2、支持分页加载。
3、支持模糊搜索。
4、支持单选、多选。
组件源码:
确认
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="filterSelectList"
>
class="gn-cell"
v-for="(item, index) in filterList"
:title="item.Name"
@click="radioResult = item"
:key="item.Id"
clickable>
checked-color="#07c160"
slot="right-icon"
:name="item" />
{{item.Number}}
class="gn-cell"
v-for="(item, index) in filterList"
clickable
:key="item.Id"
:title="`${item.Name}`"
@click="toggle(index)"
>
ref="checkboxes"
checked-color="#07c160"
slot="right-icon"
:name="item"
/>
{{item.Number}}
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
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
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]参数必填!");
}
}
}
}
};
.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;
}
}
}
}
}
组件中的【动态加载数据】是经过封装的请数据,需要改为axios请求。
数据源:
1、静态数据源格式
"list": [
{
"Id": "",
"Number": "",
"Name": ""
}
],
2、动态数据源格式
{
"Success": true,
"Data": [
{
"Id": "",
"Number": "",
"Name": ""
}
],
"Page": 1,
"PageSize": 3
}
使用方式
1、在需要使用选择组件的地方引入组件
import PubSelect from '@/base/PubSelect.vue'
2、静态数据源使用方式
id="pub-select"
type="radio"
:show.sync="showSelectProject"
:selectList="list"
:result.sync="form.project"
/>
3、动态数据源使用方式
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;
}
使用组件
onConfirm(value) {
let str = ""; // 呈现页面显示 /xxx/xxx/xxx
for(let i= 0;i
if(i>0){
str += "/" + value[i];
}
else{
str +=value[i];
}
}
this.form.kind = str;
this.showPicker = false
},
效果
选择效果
以上这篇vue 公共列表选择组件,引用Vant-UI的样式方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
本文标题: vue 公共列表选择组件,引用Vant-UI的样式方式
本文地址: http://www.cppcns.com/wangluo/javascript/360586.html
vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式相关推荐
- vue 公共列表选择组件,引用museUI的样式
题外话: 我另一篇文章写了VantUI 的公共样式选择组件,比这个组件完善一些,个人比较喜欢VantUI 组件地址:https://blog.csdn.net/qq_38832375/article/ ...
- vant 引进单个样式_Vant 定制主题
介绍 Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式.如果你想完全替换主题色或者其他样式,可以使用下面提供的方法. 示例工程 我们提供了一个基于 Vue Cli 3 ...
- vant 引进单个样式_记一次webpack打包样式加载问题
今天是周六. 我过来加班了. 是因为一个属性问题. 俗话说一杯茶一包烟一个bug改一天 感觉这句话就是特意为我准备的(我加班的时候喝奶茶,抽烟,而且就一个bug.哈哈哈哈哈哈哈哈哈哈或或或或或或或或或 ...
- php搜索选择列表控件,jQuery_JQuery里面的几种选择器 查找满足条件的元素$(#控件ID),样式:$(function (){ $(要选择的 - phpStudy...
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID") 样式:$(function (){ $("要选择的标签").click(function ...
- 在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
- word报错:题注或页码中不含章节编号。请使用“开始”选项卡上的“多级列表”按钮,然后选择链接到标题样式的编号方案(无法添加题注)
这破问题还真不好解决.... 看了这个视频:WORD教学五(论文排版之论文中的图表跟随章节插入题注) 貌似知道怎么弄了..这样操作: 选择标题,然后点击多级列表 --> 定义新的多级列表 然后在 ...
- 如何设置多级标题_办公技巧|标题样式amp;多级列表结合,再也不用手动修改1.1、1.2 ...!...
每周一句 Accept the things you cannot change. Have the courage to change the things you can. 接受那些你也无法改变的 ...
- Word标题样式关联多级列表
标题样式关联多级列表 点击"开始"菜单,然后在"段落"对话框中点击"多级列表"图标右侧的黑色小三角形,在弹出的列表中点击"定义新的 ...
- CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式 字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
最新文章
- 【Google给毕业生的忠告】
- 前端学习(3067):vue+element今日头条管理-element里面的image组件
- commons-fileupload文件上传
- # 学号20155308 2006-2007-2 《Java程序设计》第4周学习总结
- 计算机怎么算对数的反函数,Excel 计算对数分布函数反函数:LOGINV函数
- 法拉克机器人自动怎么调_发那科机器人的简单设置你知道吗
- SM4算法 C语言 (从OpenSSL库中分离算法:七)
- 0x68111002_黑苹果10.12.2驱动R9 270显卡成功一例
- 关于反病毒技术的想法
- 帕斯卡恒等式(二项式相关
- 让星星⭐月亮告诉你,打印完全格式的日期格式 包含 年月日时分秒毫秒
- vscode代码提示出来慢
- 第三章:期货合约与期货交易制度
- 宝石塔防:如果还有人过不去1337,俺来发个详细点儿的攻略吧
- android 字母索引 listview
- 有关非居民企业就来源于中国境内的所得缴纳企业所得税问题
- Android Camera开发(一)之基础知识
- CYPRESS代理64Kbit非易失性铁电存储器FM25640B
- matlab生成0-1之间的随机数(不同区间 权重不同)
- 学校第一学期计算机教学总结,学校信息技术工作总结
热门文章
- 05 Django REST Framework 分页
- 现代软件工程_团队项目_阿尔法阶段_现有功能汇总_2018.01.04
- FineReport:任意时刻只允许在一个客户端登陆账号的插件
- 重操JS旧业第五弹:函数
- Java zip and unzip demo
- Winform中创建超链接,点击跳转网页
- WINDOWS访问虚拟机RedHat搭配的Apache2服务器
- 微信小程序单选框radio使用实例
- 精通Android自定义View(九)绘制篇Canvas分析之绘制图片
- sql语句查询数据库中含有某字符串的表名