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 ...
随机推荐
- 【目标检测】用Fast R-CNN训练自己的数据集超详细全过程
目录: 一.环境准备 二.训练步骤 三.测试过程 四.计算mAP 寒假在家下载了Fast R-CNN的源码进行学习,于是使用自己的数据集对这个算法进行实验,下面介绍训练的全过程. 一.环境准备 我这里 ...
- JVM元空间(Metaspace)
本文转载自JVM学习--元空间(Metaspace) 从方法区(PermGen)到元空间(Metaspace) 方法区(PermGen) JDK1.8以前的HotSpot JVM有方法区,也叫永久代( ...
- MacOS下PHP7.1升级到PHP7.4.15
最近写SDK的时候需要用到object类型提示符,PHPStorm智能提示说需要PHP7.2以上才能支持这种类型提示. 我一查我本机的PHP是7.1.30版本,于是考虑升级一下PHP版本. 首先要尝试 ...
- Winform 判断打印机是否可用,实现设置默认打印机功能
Winform 判断打印机是否可用,实现设置默认打印机功能 http://www.cnblogs.com/zfanlong1314/p/3878563.html
- docker数据卷的操作
一般情况下会比较频繁的修改容器内部的文件 频繁docker cp 不太方便 使用数据卷可以将宿机的某个目录映射至容器的目录 修改会方便点 1.创建数据卷 docker volume create 数据 ...
- SpringBoot读取资源目录下的文件
需要读取resources目录下的文件,那么方法如下: 假设在资源目录下的template目录下有一个文件a.txt,获取到文件流的方式 InputStream stream = this.getCl ...
- rar密码破解工具汇总
rar密码破解工具汇总 前言 假如酷爱在网络上找各种资源的你,经历千辛万苦终于找到了一个rar打包的文件,兴奋地慌忙点击,可打开才发现是加密的,相信这样的场景很多人都遇到过,今天就针对压缩文件密码的破 ...
- 1.3.1 apache的配置(下)
(1)httpd.conf的配置 使用文本编辑工具(推荐使用Editplus.UltraEdit等工具),打开httpd.conf. 其中,行首为#的部分为注释部分,不会被apache服务器程序进行读 ...
- 用量子计算模拟器ProjectQ生成随机数,并用pytest进行单元测试与覆盖率测试
技术背景 本文中主要包含有三个领域的知识点:随机数的应用.量子计算模拟产生随机数与基于pytest框架的单元测试与覆盖率测试,这里先简单分别介绍一下背景知识. 随机数的应用 在上一篇介绍量子态模拟采样 ...
- 力扣541. 反转字符串 II
原题 1 class Solution: 2 def reverseStr(self, s: str, k: int) -> str: 3 begin,lens,ans = 0,len(s),' ...