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 ...
随机推荐
- Java的super、this、重写
Java的super.this.重写 一.super的注意点: super调用父类的构造方法,必须在构造方法的第一个: super只能出现在子类的构造方法或者方法中: this和super不能同时调用 ...
- (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- CSS布局,div居中,文字居中
.main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...
- JAVA 批量下载服务器文件到本地指定文件夹并重命名
/** * @功能 下载文件到指定文件夹并重命名 * @param url 请求的路径 * @param filePath 文件将要保存的目录 * @param filename 保存到本地的文件名 ...
- 【Notes】现代图形学入门_01
跟着闫令琪老师的课程学习,总结自己学习到的知识点 课程网址GAMES101 B站课程地址GAMES101 课程资料百度网盘[提取码:0000] 计算机图形学概述 计算机图形学是一门将模型转化到屏幕上图 ...
- go语言-csp模型-并发通道
[前言]go语言的并发机制以及它所使用的CSP并发模型 一.CSP并发模型 CSP模型是上个世纪七十年代提出的,用于描述两个独立的并发实体通过共享的通讯 channel(管道)进行通信的并发模型. C ...
- (十二)数据库查询处理之Query Execution(1)
(十二)数据库查询处理之Query Execution(1) 1. 写在前面 这一大部分就是为了Lab3做准备的 每一个query plan都要实现一个next函数和一个init函数 对于next函数 ...
- 在16G笔记本上安装GaussDB 200
云主机太贵(最便宜的每月几千吧),长期如果需要GaussDB200有个功能测试或学习环境,那么性价比最高的方式还是在自己的笔记本电脑上尝试安装一个本地的数据库进行学习和功能验证. 01 安装环境信息 ...
- Leaflet 带箭头轨迹以及沿轨迹带方向的动态marker
前面写了篇文章,mapboxgl实现带箭头轨迹线,介绍了如何基于mapboxgl实现类似高德地图导航轨迹效果. 下图是我基于leaflet实现的效果. 接下来分享一下在我基于leaflet实现该效果时 ...
- c++ vector对象
下面随笔讲解c++ vector对象. vector对象 为什么需要vector? 封装任何类型的动态数组,自动创建和删除. 数组下标越界检查. 封装的如ArrayOfPoints也提供了类似功能,但 ...