539 lines
15 KiB
Vue
539 lines
15 KiB
Vue
<template>
|
|
<view class="content">
|
|
<uni-card title="全部功能" >
|
|
<view style="height: 300px">
|
|
<zb-table
|
|
@sort-change="sortChange"
|
|
:pullUpLoading="pullUpLoading"
|
|
:isShowLoadMore="true"
|
|
:highlight="true"
|
|
:show-header="true"
|
|
:columns="column"
|
|
:fit="false"
|
|
row-key="id"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@custom="custom"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
<uni-card title="普通表格" >
|
|
<view style="height: 200px">
|
|
<zb-table
|
|
:columns="column1"
|
|
:stripe="true"
|
|
@rowClick="rowClick"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
<uni-card title="带边框表格" >
|
|
<view style="height: 200px">
|
|
<zb-table
|
|
:columns="column1"
|
|
:stripe="true"
|
|
@rowClick="rowClick"
|
|
:border="true"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
<uni-card title="多选，多行数据时使用 Checkbox" >
|
|
<view style="height: 200px">
|
|
<zb-table
|
|
:columns="column2"
|
|
:stripe="true"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
<uni-card title="固定多列和表头" >
|
|
<view style="height: 200px">
|
|
<zb-table
|
|
:columns="column3"
|
|
:stripe="true"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
<uni-card title="年纪、日期排序" >
|
|
<view style="height: 200px">
|
|
<zb-table
|
|
:show-header="true"
|
|
:columns="column4"
|
|
:stripe="true"
|
|
:fit="false"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
|
|
<uni-card title="表尾合计" >
|
|
<view style="height: 300px">
|
|
<zb-table
|
|
:show-header="true"
|
|
:columns="column"
|
|
:fit="false"
|
|
:show-summary="true"
|
|
:summary-method="getSummaries"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data1"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
|
|
<uni-card title="上拉加载" >
|
|
<view style="height: 300px">
|
|
<zb-table
|
|
:show-header="true"
|
|
:columns="column"
|
|
:isShowLoadMore="true"
|
|
ref="zbTable"
|
|
@pullUpLoading="pullUpLoadingAction"
|
|
:summary-method="getSummaries"
|
|
@rowClick="rowClick"
|
|
@toggleRowSelection="toggleRowSelection"
|
|
@toggleAllSelection="toggleAllSelection"
|
|
:border="true"
|
|
@edit="buttonEdit"
|
|
@dele="dele"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
|
|
|
|
<uni-card title="选择单行数据时使用色块表示" >
|
|
<view style="height: 300px">
|
|
<zb-table
|
|
:show-header="true"
|
|
:columns="column1"
|
|
@currentChange="currentChange"
|
|
:highlight="true"
|
|
:border="true"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
|
|
<uni-card title="支持设置单元格样式" >
|
|
<view style="height: 300px">
|
|
<zb-table
|
|
:cell-style="cellStyle"
|
|
:show-header="true"
|
|
:columns="column1"
|
|
@currentChange="currentChange"
|
|
:highlight="true"
|
|
:border="true"
|
|
:data="data"></zb-table>
|
|
</view>
|
|
</uni-card>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {column1,column2,column3,column4} from './all.js'
|
|
let that = null
|
|
export default {
|
|
components:{
|
|
},
|
|
data() {
|
|
return {
|
|
column1,
|
|
column2,
|
|
column3,
|
|
column4,
|
|
title: 'Hello',
|
|
column:[
|
|
{ type:'selection', fixed:true,width:60 },
|
|
{ name: 'name', label: '姓名',fixed:true,width:80,emptyString:'--' },
|
|
{ name: 'age', label: '年龄',sorter:'custom',align:'right',fixed:false, },
|
|
{ name: 'sex', label: '性别',filters:{0:'男',1:'女'}},
|
|
{ name: 'price', label: '价格'},
|
|
{ name: 'admin', label: '账号'},
|
|
{ name: 'address', label: '地址' },
|
|
{ name: 'date', label: '日期',sorter:true },
|
|
{ name: 'province', label: '省份' },
|
|
{ name: 'city', label: '城市' },
|
|
{ name: 'zip', label: '邮编' },
|
|
{ name: 'img', label: '图片',type:"img",align: "center" },
|
|
{ name: 'operation', type:'operation',label: '操作',renders:[
|
|
{
|
|
name:'编辑',
|
|
class:'edit',
|
|
type:"primary",
|
|
func:'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
|
|
},
|
|
{
|
|
name:'自定义按钮',
|
|
type:'custom', // type 为custom的时候自定义按钮
|
|
class:"custom",
|
|
func:'custom'
|
|
},
|
|
{
|
|
name:'删除',
|
|
type:'warn', // type 为custom的时候自定义按钮
|
|
class:"del",
|
|
func:'dele',
|
|
},
|
|
]},
|
|
],
|
|
data:[
|
|
{
|
|
date: '2016-05-02',
|
|
name: '',
|
|
price: 0,
|
|
province: '上海',
|
|
admin:"admin",
|
|
sex:'1',
|
|
checked:true,
|
|
id:"20",
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
age:0,
|
|
city: '普陀区',
|
|
address: '上海市普上海市普上海市普上海市普',
|
|
zip: 200333
|
|
},
|
|
{
|
|
date: '2016-05-01',
|
|
name: '王小虎2',
|
|
province: '上海',
|
|
sex:'0',
|
|
price: 0,
|
|
id:"2",
|
|
age:12,
|
|
city: '普陀区',
|
|
img:"https://img.pddpic.com/mms-material-img/2020-11-27/84c7fad3-d945-4e71-ab09-7a1ed80f6055.jpeg.a.jpeg",
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},
|
|
{
|
|
date: '2022-03-25T09:27:42',
|
|
name: '王小虎3',
|
|
province: '上海',
|
|
sex:1,
|
|
price: 33,
|
|
id:"3",
|
|
age:'15',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333555
|
|
},
|
|
{
|
|
date: '2016-04-02',
|
|
name: '王小虎4',
|
|
province: '上海',
|
|
sex:1,
|
|
age:'11',
|
|
price: 33,
|
|
id:"4",
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},
|
|
{
|
|
date: '2016-03-02',
|
|
name: '王小虎5',
|
|
province: '上海',
|
|
price: 0,
|
|
sex:1,
|
|
age:'14',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
id:"5",
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},{
|
|
date: '2014-05-02',
|
|
name: '王小虎6',
|
|
province: '上海',
|
|
price: 33,
|
|
sex:1,
|
|
id:"6",
|
|
age:'12',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 0
|
|
},{
|
|
date: '2019-05-02',
|
|
name: '王小虎7',
|
|
price: 33,
|
|
province: '上海',
|
|
sex:1,
|
|
age:0,
|
|
id:"7",
|
|
city: '普陀区',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},{
|
|
date: '2012-05-02',
|
|
name: '王小虎8',
|
|
province: '上海',
|
|
price: 0,
|
|
sex:1,
|
|
age:'29',
|
|
id:"8",
|
|
city: '普陀区',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},{
|
|
date: '2011-05-02',
|
|
name: '王小虎91',
|
|
price: 33,
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
province: '上海',
|
|
sex:1,
|
|
id:"9",
|
|
age:'30',
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},{
|
|
date: '2011-05-02',
|
|
name: '王小虎10',
|
|
province: '上海',
|
|
sex:1,
|
|
id:"10",
|
|
age:'30',
|
|
img:"https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
},{
|
|
date: '2011-05-02',
|
|
name: '王小虎20',
|
|
province: '上海',
|
|
sex:1,
|
|
price: 33,
|
|
id:"11",
|
|
age:'30',
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
}
|
|
],
|
|
data1:[],
|
|
flag1:true,
|
|
flag2:true,
|
|
num:0,
|
|
num1:0,
|
|
isShowLoadMore:true
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
created(){
|
|
that = this
|
|
},
|
|
mounted(){
|
|
this.data1 = JSON.parse(JSON.stringify(this.data))
|
|
let data2 = JSON.parse(JSON.stringify(this.data))
|
|
setTimeout(()=>{
|
|
// data2.forEach(item=>{
|
|
// item.checked = true
|
|
// })
|
|
// this.data = data2
|
|
},3000)
|
|
},
|
|
methods:{
|
|
sortChange(item,sorterMode,index){
|
|
|
|
console.log('触发排序',item,sorterMode,index)
|
|
},
|
|
cellStyle({row, column, rowIndex, columnIndex}){
|
|
// console.log('row, column, rowIndex, columnIndex')
|
|
if(columnIndex === 1 || columnIndex === 4) {
|
|
return{
|
|
color:'red'
|
|
}
|
|
}
|
|
},
|
|
pullUpLoading(done){
|
|
if(!this.flag1){
|
|
return
|
|
}
|
|
setTimeout(()=>{
|
|
this.data.push({
|
|
date: '2011-05-02',
|
|
name: '王小虎23',
|
|
province: '上海',
|
|
sex:1,
|
|
price: 33,
|
|
id:11111+this.num,
|
|
age:'30',
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
})
|
|
|
|
this.num ++
|
|
if(this.num===3){
|
|
done('ok')
|
|
this.flag1 = false
|
|
}else {
|
|
done()
|
|
}
|
|
},2000)
|
|
},
|
|
|
|
pullUpLoadingAction(done){
|
|
if(!this.flag2){
|
|
return
|
|
}
|
|
setTimeout(()=>{
|
|
this.data.push({
|
|
date: '2011-05-02',
|
|
name: '王小虎23',
|
|
province: '上海',
|
|
sex:1,
|
|
price: 33,
|
|
id:"11111",
|
|
age:'30',
|
|
city: '普陀区',
|
|
address: '上海市普',
|
|
zip: 200333
|
|
})
|
|
|
|
this.num1 ++
|
|
if(this.num1===3){
|
|
this.$refs.zbTable.pullUpCompleteLoading('ok')
|
|
this.flag2 = false
|
|
}else {
|
|
this.$refs.zbTable.pullUpCompleteLoading()
|
|
}
|
|
},1000)
|
|
},
|
|
buttonEdit(ite,index){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'点击编辑'
|
|
})
|
|
console.log(ite,index)
|
|
},
|
|
dele(ite,index){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'点击删除'
|
|
})
|
|
// alert('点击删除')
|
|
console.log(ite,index)
|
|
},
|
|
custom(){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'点击自定义'
|
|
})
|
|
},
|
|
toggleAllSelection(checked,arr){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'点击全选'
|
|
})
|
|
console.log('全选',checked,arr)
|
|
},
|
|
toggleRowSelection(checked,arr){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'点击单选'
|
|
})
|
|
console.log('单选',checked,arr)
|
|
},
|
|
currentChange(row,index){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'选中当前一行'
|
|
})
|
|
console.log('单选',row,index)
|
|
},
|
|
rowClick(row,index){
|
|
uni.showToast({
|
|
icon:'none',
|
|
duration:3000,
|
|
title:'单击某行'
|
|
})
|
|
console.log('单击某行',row,index)
|
|
},
|
|
getSummaries(param){
|
|
const { columns, data } = param;
|
|
const sums = [];
|
|
columns.forEach((column, index) => {
|
|
if (index === 0) {
|
|
sums[index] = '总价';
|
|
return;
|
|
}
|
|
if(column.name==='price'){
|
|
const values = data.map(item => Number(item[column.name]));
|
|
if (!values.every(value => isNaN(value))) {
|
|
sums[index] = values.reduce((prev, curr) => {
|
|
const value = Number(curr);
|
|
if (!isNaN(value)) {
|
|
return prev + curr;
|
|
} else {
|
|
return prev;
|
|
}
|
|
}, 0);
|
|
sums[index] += ' 元';
|
|
}
|
|
}else{
|
|
sums[index] = 'N/A';
|
|
}
|
|
});
|
|
return sums;
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep{
|
|
.uni-card{
|
|
margin: 8px!important;
|
|
padding: 0!important;
|
|
.uni-card__content{
|
|
padding: 0!important;
|
|
}
|
|
}
|
|
}
|
|
.content{
|
|
//height: 600rpx;
|
|
//.title{
|
|
// font-weight: bold;
|
|
// padding: 20rpx 0;
|
|
//}
|
|
}
|
|
|
|
</style>
|