【uniapp】通用列表封装组件

uniapp页面一般都会有像以下的列表页面，封装通用组件，提高开发效率；
（基于uView前端框架）

首先，通过设计图来分析一下页面展示和数据结构定义

w-table组件参数说明

prop-list具体参数说明

propList数据格式

propList:[
	{label:'废物名称',prop:'title',show:true},
	{label:'数字识别码',prop:'name',show:true},
	{label:'危废标识',prop:'tag',show:true},
	{label:'废物代码',prop:'code',show:true},
	{label:'废物重量',prop:'weight',formatValue:true,show:true},//格式化值
	{label:'废物形态',prop:'name'},
	{label:'主要成分',prop:'name'},
	{label:'有害成分',prop:'name'},
	{label:'危险特性',prop:'name'},
	{label:'注意事项',prop:'name'},
	{label:'产生/收集单位',prop:'comp'},
	{label:'联系人',prop:'userName'},
	{label:'联系方式',prop:'phone'},
	{label:'产生日期',prop:'date'},
	{label:'备注',prop:'remark'},
	{label:'状态',prop:'status',formatItem:true,show:true},//格式化列默认展示
	{label:'二维码',prop:'qrcode',formatItem:true,show:false}//格式化列默认不展示
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

tableData数据格式

tableData:[{
	title:'HWCS20230908003',
	time:'2023-09-18 14:00',
	name:'废物名称',
	code:'1234567890123456789000030420230915101',
	tag:'7b9e9d22ca714365a1f6a6b338fc8fa3',
	code1:'900-041-49',
	weight:'30',
	unit:'kg',
	wasteStatus:1,
	reportStatus:0,
}]
1
2
3
4
5
6
7
8
9
10
11
12

具体代码

基础用法

<w-table :table-data="tableData" :prop-list="propList" :toggle="true">w-table>
1

有格式化值和列的情况

<w-table :table-data="tableData" :prop-list="propList" :toggle="true">
	<template slot="header" slot-scope="scope">
		<view class="width w-flex row row-between borderB padding16">
			<view class="flex1 w-flex row">
				<text class="fs24 c-blue fwBold marginR10 flex-none"> {{scope.index < 10 ?'0'+(scope.index+1):scope.index+1}} text>
					<text class="flex1 text-overflow c-text fs16">{{scope.row.title}}text>
					view>
				<text class="marginLR10 flex-none">{{scope.row.time}}text>
			view>
		template>
		<template slot="weight" slot-scope="scope">
			<span>{{scope.row.weight}}{{scope.row.unit}}span>
		template>
		<template slot="status" slot-scope="scope">
			<view class="w-flex row row-between paddingLR30 paddingTB10">
				<u-tag text="待入库" mode="plain"/>
				<view v-if="scope.row.status == 0" class="" style="color:#FF7D00">
					<u-icon name="clock">u-icon>
					<text class="marginL10">未上报text>
				view>
				<view v-else class="" style="color:#00B42A">
					<u-icon name="checkbox-mark">u-icon>
					<text class="marginL10">已上报text>
				view>
			view>
		template>
		
		<template slot="qrcode" slot-scope="scope">
			<view class="w-flex"> 
				<img class="width160 height160" src="/static/img/qrcode.png" alt="">
			view>
		template>
	w-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

w-table组件源码

<template>
	<view class="width w-table">
		<view
			v-if="tableData.length > 0"
			class="w-flex col item-list marginB20 marginLR20 radius8 relative"
			v-for="(item, index) in tableData"
			:key="index">
			<slot name="header" :row="item" :index="index">slot>
			<view class="width w-flex col paddingT15">
				
					<u-cell-group>
						<template v-for="(cellItem,i) in propList">
							<template v-if="!cellItem.formatItem">
								
								<view class="default-show" v-if="cellItem.show || !toggle">
									<u-cell-item :title="cellItem.label" :key="i" :arrow="false">
										<slot v-if="typeof cellItem.formatValue === 'boolean' ? cellItem.formatValue : false"
											:row="item" :name="cellItem.prop" :index="index">slot>
										<text v-else>{{$util.formatTextEmpty(item[cellItem.prop])}}text>
									u-cell-item>
								view>
								
								<view class="default-notshow" v-if="!cellItem.show && item.isShow">
									<u-cell-item :title="cellItem.label" :key="i" :arrow="false">
										<slot v-if="typeof cellItem.formatValue === 'boolean' ? cellItem.formatValue : false"
											:row="item" :name="cellItem.prop" :index="index">slot>
										<text v-else>{{$util.formatTextEmpty(item[cellItem.prop])}}text>
									u-cell-item>
								view>
							template>
							<template v-if="cellItem.formatItem">
								
								<slot v-if="cellItem.show" :name="cellItem.prop" :row="item" :index="index">slot>
								
								<slot v-if="!cellItem.show && item.isShow" :name="cellItem.prop" :row="item" :index="index">slot>
							template>
						template>
						<view v-show="toggle" class="width padding20 textCenter">
							<span v-show="!item.isShow" @click="toggleCell(index,true)">更多<u-icon name="arrow-down" class="marginL5">u-icon>span>
							<span v-show="item.isShow" @click="toggleCell(index,false)">收起<u-icon name="arrow-up" class="marginL5">u-icon>span>
						view>
					u-cell-group>
				
			view>
		view>
	view>
template>

<script>
	export default{
		props:{
			tableData:{
				default:[],
				type:Array,
			},
			propList:{
				default:[],
				type:Array,
			},
			showHeight:{
				default:500,
				type:Number,
			},
			toggle:{
				default:true,
				type:Boolean,
			}
		},
		data(){
			return{
				
			}
		},
		mounted(){
			if(this.toggle){
				// 可以展开收起时，给表格默认增加isShow属性
				this.tableData.forEach(item=>{
					this.$set(item,'isShow',!this.toggle)
				})
			}else{
				// 不需要收缩功能时，每一列数据默认是true，即展示，
				// 也就是toggle为false时，propList设置show属性无效，均为true
				this.propList.forEach(item=>{
					this.$set(item,'show',!this.toggle)
				})
			}
		},
		methods:{
			toggleCell(i,value){
				this.$set(this.tableData[i],'isShow',value)
			}
		}
	}
script>

<style lang="scss" scoped>
	::v-deep.u-cell{
		align-items: flex-start;
	}
	::v-deep.u-cell-box{
		text-indent: initial;
	}
	::v-deep.w-table .u-content__showmore-wrap{
		background-image:none !important;
	}
	::v-deep.w-table .u-cell_title{
		width: 90px !important;
		flex: none;
		font-size: 13px !important;
	}
	::v-deep.w-table .u-cell__value{
		text-align: left !important;
		overflow-wrap: break-word;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115