iview中table多选、加载更多、下载等使用
记录工作中的点点滴滴,为回忆过往添加片片记忆...
一、Table
1.使用render函数多层渲染以及表格可展开使用
源码地址:https://gitee.com/Mandy_wang/iview-test
h('div',[h('span',{style:{color: 'red'}},'内容'),h('span',{style:{color: 'red'}},'内容'),h('span',{style:{color: 'red'}},'内容')])
render: (h, params) => {
let check = h(
"Button",
{
props: {
type: "text",
// icon: "md-eye",
size: "small",
disabled: params.row.batch_type === 1 && params.row.batch_mode === 3|| params.row.batch_type === 3 && params.row.batch_mode === 1?false:true
},
style: {
fontSize: "14px",
color: "#3A64FF",
padding: 0,
marginRight: '24px'
},
on: {
click: () => {
if (params.row.batch_type === 1 && params.row.batch_mode === 3) {
this.telent_id = params.row.batch_no
this.telentModal = true
this.handleGetTelent()
}
if (params.row.batch_type === 2) {
// this.$router.push({
// name: "waiting_paper/:id",
// params: { id: params.row.id },
// });
this.paperModal = true
}
if (params.row.batch_type === 3 && params.row.batch_mode === 1) {
this.orgModal = true
this.orgModal_id = params.row.id
this.dispatchTask()
}
},
},
},
"查看"
);
let send_order = h(
"Dropdown",{
props: {
placement: 'bottom',
transfer: true
},
on: {
'on-click': (name)=>{
if (name=='time') {
this.modal1 = true
this.getTime()
this.id = params.row.id
} else if (name=='operator'){
this.id = params.row.id
this.optionUserInfo()
this.modal2 = true
}
}
}
},
[
h('a',
{
style:{
color:'#3A64FF'
}
},
[
'配置',
h('Icon',{
props: {
type: 'ios-arrow-down'
},
style: {
marginLeft: '5px',
color: '#3A64FF'
}
}
)
]
),
h('DropdownMenu',
{
slot: 'list',
props: {
trigger: 'hover'
}
},[
h('DropdownItem', {
props: {
name: 'time'
}
}, '配置时间'),
h('DropdownItem', {
props: {
name: 'operator'
}
}, '配置操作员')
]
)
])
let option = [];
option.push(check);
option.push(send_order)
return h("div", option);
},
2.下载表格时请求接口添加responseType: 'blob'
// 下载数据
export const downLoad = () => {
return axios.request({
url: '/api/user/download',
method: 'get',
responseType: 'blob' // 这个是必须的
})
}
3.Upload 上传
<Upload
:headers="auths"
:action="userImport"
:show-upload-list="false"
:format="['xls','csv','xlsx']"
:on-success="afterImport">
<Button type="primary" style="background-color: #fff;color:#204DF2;border-color:#204DF2"><icon custom="iconfont icon-shangchuan" style="margin-right:12px"></icon>上传信息</Button>
</Upload>
4.table复选框多选
在 data赋值后添加
this.data.forEach(item => {
item._checked = this.checkList.some(it => it.id == item.id)
})
// 点击分页进入时判断当前数据是否已勾选 勾选的显示勾选
table 点击事件 on-selection-change 方法中添加
Select (sel) {
this.checkList = this.checkList.filter(item => !this.data.some(it => it.id == item.id)) // 过滤掉id没有选中的数据
this.checkList.push(...sel) // 选中数组合并到选中列表中
},
复选框中已选中数据禁止点击
if(item.is_exit ){
obj['_disabled'] = true
} else{
obj['_disabled'] = false
}
return obj // 遍历数据中的每个元素,每个元素已经使用过的_disabled为true 否则为false
5.使用slot代替render函数
<Table border :columns="columns12" :data="data6">
<template slot-scope="{ row }" slot="name">
<strong>{{ row.name }}</strong>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
<Button type="error" size="small" @click="remove(index)">Delete</Button>
</template>
</Table>
js中内容
columns12: [
{
title: 'Name',
slot: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
slot: 'action',
width: 150,
align: 'center'
}
],
6.加载更多
源码:https://gitee.com/Mandy_wang/iview-test/tree/master/src/views/institutions
<span @click="loadMore" v-if="isShowAll" class="btn">
加载更多
<Icon type="md-arrow-round-down" class="icon" />
</span>
<!--isShowAll: false, // 判断是否已显示完所有的数据-->
loadMore() {
this.switchList = true // switchList:false,//是否加载更多
this.pageNum += 1
this.showNext()
},
// 删除时 this.switchList = false
showNext () {
let list = []
let params = {
page:this.pageNum,
page_size: this.pageSize,
}
getDatalist(params).then(res=>{
list = res.data
if (this.switchList) {
// 加载更多时
this.son.push(...list)
} else {
this.son = list
}
if (this.son.length < res.data.data.total) { // 判断当前数据小于总数时
this.isShowAll = true // 继续显示加载按钮
} else {
this.isShowAll = false // 不显示加载按钮
}
})
},
iview中table多选、加载更多、下载等使用的更多相关文章
- 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...
- tableView中的“点击加载更多”点击不到
假设当前的tableView是_tableView,则可以这样设置 _tableView.contentInset = UIEdgeInsetsMake(0, 0, 100, 0); 该属性用于设置当 ...
- reactnative中FlatList上拉加载更多的解决办法
项目app中用到了list滚动加载,把List做了下对比发现FlatList比较适合自己的项目,但是在实际运用中 onEndReached方法需要给定 onEndReachedThreshold的高度 ...
- MVC中实现加载更多
需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示“正在 ...
- MVC实现加载更多
MVC中实现加载更多 作者 欢醉 关注 2016.01.25 08:48 字数 945 阅读 136评论 0喜欢 2 需要实现的功能: 数据太多想初次加载部分数据,在底部加上“加载更多”按钮 点击后加 ...
- react-native ListView 封装 实现 下拉刷新/上拉加载更多
1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...
- 手机端 : js设置table内容 加载更多,并头部锁定悬浮
<script src="js/jquery.min.js" type="text/javascript"></script> < ...
- iOS开发UI篇—在UItableview中实现加载更多功能
一.实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明 当在页面(视图部分)点击加载更多按钮的时候,主页面(主控制器 ...
- Android中自定义ListView实现上拉加载更多和下拉刷新
ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...
随机推荐
- 离场定高转弯DF与CF的对比
也许是刚学会CAD的缘故,配合风螺旋插件,画图的感觉真是蛮爽的,忍不住画了一张又一张. 接着昨天的离场保护区,我们来聊一下PBN指定高度转弯保护区的画法.指定高度转弯的计算本身没有太多复杂的地方,真正 ...
- java: 类 RegisterController 是公共的, 应在名为 RegisterController.java 的文
public声明的类名需要和文件名一致,检查一下
- Vue脚手架中默认的margin怎么清除
问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置ma ...
- C++教程01:计算机系统的组成
教程首发 | 公众号:lunvey 学习C++之前,需要先了解一点基础的计算机知识.毕竟C++是跑在计算机系统上的,我们写的程序都是一段段的指令集. 首台计算机ENIAC问世之后,缺少原理指导.冯诺依 ...
- 【经验】Rufus制作Win10启动盘支持UEFI:比使用UltraISO(软碟通)制作Win10操作系统U盘启动盘更快捷的工具完整教程-
ultraiso中文称之为软碟通,是一款功能强大的光盘映像文件制作/编辑/转换工具,通过它,用户可以直接编辑ISO文件和从ISO中提取文件和目录,也可以从CD-ROM制作光盘映像或者将硬盘上的文件制作 ...
- SSRF攻击原理
目录 什么是SSRF 原理 防护 什么是SSRF 一个对外的Web接口,改接口能让用户控制curl命令,去访问别的web服务. 简图如下 想象一下当用户请求的baidu.com/x.php?image ...
- arti车是大幅度发地方大幅度发
转: arti车是大幅度发地方大幅度发 arti车是大幅度发地方大幅度发 转: arti车是大幅度发地方大幅度发
- 10. vue之webpack打包详解
一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...
- 清华大学-成绩排序(排序+解决MLE问题)
成绩排序 成绩排序 这里需要注意的就是超内存的问题. 解决方法就是通过指针的方式,每次动态开n大小的内存,而不是一开始就分配. #include<bits/stdc++.h> using ...
- 【粉丝问答10】C语言关键字static的使用详解
视频地址:https://www.ixigua.com/6935761378816819748 粉丝提问 粉丝问题,总结一下: 关键字static的使用方法. 要想搞清楚关键字static的使用方法, ...