uni-app 就是没找到能几行几列表格展示信息的插件
uni-app 就是没找到能几行几列表格展示信息的插件
麻烦哪个老哥有现成的写好的表格展示信息的吗。
1 回复
在uni-app中,虽然没有现成的插件可以直接实现几行几列表格展示信息的功能,但我们可以通过自定义组件和简单的样式布局来实现这一需求。以下是一个基本的表格展示信息的代码示例,可以帮助你快速搭建一个简单的表格展示功能。
1. 创建表格组件(Table.vue)
首先,我们创建一个自定义组件Table.vue
,用于展示表格。
<template>
<view class="table">
<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="table-row">
<view v-for="(cell, cellIndex) in row" :key="cellIndex" class="table-cell">
{{ cell }}
</view>
</view>
</view>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
.table {
width: 100%;
border-collapse: collapse;
}
.table-row {
display: flex;
}
.table-cell {
flex: 1;
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
</style>
2. 使用表格组件(App.vue 或其他页面)
然后,在你的主页面或需要展示表格的页面中引入并使用这个组件。
<template>
<view>
<Table :tableData="tableData" />
</view>
</template>
<script>
import Table from '@/components/Table.vue';
export default {
components: {
Table
},
data() {
return {
tableData: [
['Header1', 'Header2', 'Header3'],
['Row1 Col1', 'Row1 Col2', 'Row1 Col3'],
['Row2 Col1', 'Row2 Col2', 'Row2 Col3'],
// 可以根据需要添加更多行和列
]
}
}
}
</script>
<style>
/* 你可以在这里添加全局样式 */
</style>
3. 运行项目
将上述代码添加到你的uni-app项目中,并运行项目。你将看到一个简单的表格,展示了传入的数据。
通过这种方式,你可以根据实际需求调整表格的样式和功能,比如添加表头、合并单元格、排序等。虽然这不是一个完整的插件,但自定义组件的方式为你提供了更高的灵活性和可定制性。