iview中table多选、加载更多、下载等使用
2024-09-02 17:50:25
记录工作中的点点滴滴，为回忆过往添加片片记忆...
一、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 // 不显示加载按钮
}
})
},
最新文章
- 如何理解vue.js组件的作用域是独立的
- Android开发常见问题小结
- Android静默安装实现方案
- [Linux] - Docker 常用命令
- hadoop: hbase1.0.1.1 伪分布安装
- 从就业面分析web前端开发工程师就业前景（2011.6)
- Select的深入应用（2）
- 剑指Offer23 二叉树中和为sum的路径
- [EntLib]微软企业库5.0 学习之路——第一步、基本入门
- [学习笔记]设计模式之Bridge
- Linux下的echo服务器
- 没有login页面
- FACE++学习二、获得face属性
- PHP页面间的参数传递
- Spring源码分析(一)--BeanProcessor
- day-10初级函数
- oracle 索引提升查询速度, in 和 exist 效率
- ajax跨域，携带cookie
- bootstrap中的行和列布局
- Jmeter笔记：响应断言详解