【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会让写表格...

相关推荐
2501_9160137436 分钟前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone
an__ya__2 小时前
Vue数据响应式reactive
前端·javascript·vue.js
叶落阁主2 小时前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
叫我詹躲躲2 小时前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
@小红花3 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
2501_915918413 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
前端与小赵3 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲3 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
00后程序员张3 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
weixin_456904274 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js