博主:_LJaXi Or 東方幻想郷
专栏: uni-app | 小程序开发
开发工具:HBuilderX
这里写目录标题
- 表格组件
- USE
表格组件
<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会让写表格…