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

相关推荐
王王碎冰冰10 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队2 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好2 小时前
pinia从定义到运用
前端·vue.js
代码小学僧2 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
CHB3 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
东坡白菜3 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥7 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT8 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js