【APP VTable】和市面上的 Table 组件一样,都是接收表格[] 以及数据源[]

博主:_LJaXi Or 東方幻想郷

专栏: uni-app | 小程序开发

开发工具:HBuilderX

这里写目录标题

表格组件

html 复制代码
<template>
	<view class="scroll-table-wrapper">
		<view class="scroll-table-container">
			<table class="scroll-table">
				<thead>
					<tr>
						<th v-for="(item, index) in columns" :key="index">
							{{ item.title }}
						</th>
					</tr>
				</thead>
				<!-- 表格内容 -->
				<tbody v-if="dataSource.length > 0">
					<tr v-for="(row, rowIndex) in dataSource" :key="rowIndex">
						<td v-for="(cell, cellIndex) in columns" :key="cellIndex">
							<view v-if="cell.title !== '操作'"
								:style="{'width': cell.width, 'white-space': cell.width ? 'normal' : 'nowrap', 'text-align': 'center'}"
								@click="handleArrowClick(row, cell, type)">
								{{ row[cell.dataIndex] || '' }}
							</view>
							<view v-else>
								<button @click="handleButtonClick(row)" class="op-after-0">{{operateTitle}}</button>
							</view>
						</td>
					</tr>
				</tbody>
				<tbody v-else>
					<tr style="text-align: center;">
						<td :colspan="columns.length">暂无数据</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		/**
		 * @author _LJaXi
		 * @columns 表头内容
		 * @dataSource 表格数据源
		 * @operateTitle 操作按钮title
		 * @updatehandleOperate 操作栏按钮获取row
		 * @updateshow 单击单元格获取row
		 */
		props: {
			columns: {
				type: Array,
				default: []
			},
			dataSource: {
				type: Array,
				default: []
			},
			// 状态
			type: {
				type: String,
				default: ''
			},
			operateTitle: {
				type: String,
				default: '操作'
			}
		},
		methods: {
			handleArrowClick(item, type) {
				this.$emit('update:show', {
					item,
					type: this.type
				})
			},
			handleButtonClick(item) {
				this.$emit('update:handleOperate', {
					item
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import url('index.less');
</style>

USE

html 复制代码
<VTable 
	:columns="maintenanceFeedbackTableData" 
	:dataSource="tableData"
	@update:show="handleShow" 
	@update:handleOperate="handleOperate" 
/>

总之这个表格和市面上的没有什么不同,都是自适应的,这个我是在APP里面写的一个表格,不知道为什么APP会让写表格...

相关推荐
为风而战1 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
eggcode9 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
@Dream_Chaser10 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊10 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由10 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++