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

本文主要是介绍【APP VTable】和市面上的 Table 组件一样，都是接收表格[] 以及数据源[]，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

博主：_LJaXi Or 東方幻想郷
专栏： uni-app | 小程序开发
开发工具：HBuilderX

表格组件

<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

<VTable :columns="maintenanceFeedbackTableData" :dataSource="tableData"@update:show="handleShow" @update:handleOperate="handleOperate" 
/>

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

这篇关于【APP VTable】和市面上的 Table 组件一样，都是接收表格[] 以及数据源[]的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---