uniapp 使用vue3写法写一个简易表格
时间: 2024-09-15 09:03:36 浏览: 91
在uni-app中使用Vue 3的写法来创建一个简易表格,你可以利用Vue 3的Composition API来定义响应式数据,同时使用模板语法来构建HTML结构。以下是一个基本的例子:
1. 首先,确保你的项目是基于Vue 3版本的,因为在uni-app中可以通过配置选择Vue 2或Vue 3。
2. 在页面的`<script setup>`中定义表格数据和列信息。
```vue
<template>
<view>
<view class="table">
<view class="table-row header">
<view class="table-cell" v-for="(column, index) in columns" :key="index">{{ column.title }}</view>
</view>
<view class="table-row" v-for="(row, rowIndex) in rows" :key="rowIndex">
<view class="table-cell" v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive } from 'vue';
// 表格列信息
const columns = reactive([
{ title: '姓名' },
{ title: '年龄' },
{ title: '职业' },
]);
// 表格数据
const rows = reactive([
['张三', 30, '工程师'],
['李四', 24, '设计师'],
['王五', 28, '产品经理'],
]);
</script>
<style>
.table {
display: block;
}
.table-row {
display: flex;
border-bottom: 1px solid #eee;
}
.table-row.header {
font-weight: bold;
}
.table-cell {
flex: 1;
padding: 5px;
}
</style>
```
在上面的代码中,我们使用了`<script setup>`语法,它是Vue 3 Composition API的一部分,用于编写更简洁的组件代码。我们定义了表格的列标题和数据,并且使用了`v-for`指令来循环渲染表格行和列。
`<style>`标签包含了简单的CSS样式来布局表格。
请确保在实际的uni-app项目中,根据你的实际需求调整样式和数据结构。此外,你可能需要根据实际平台(H5、App、小程序等)进行适配和样式调整。
阅读全文