uniapp简单的表格实现

Uniapp可以使用u-table组件来实现简单的表格。

首先在页面中引入u-table组件：

<template>
  <view>
    <u-table :columns="columns" :data="tableData"></u-table>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '性别',
            key: 'gender'
          }
        ],
        tableData: [
          {
            name: '张三',
            age: 18,
            gender: '男'
          },
          {
            name: '李四',
            age: 20,
            gender: '女'
          },
          {
            name: '王五',
            age: 22,
            gender: '男'
          }
        ]
      }
    }
  }
</script>

其中`columns`是表头信息，`data`是表格数据。在这个例子中，我们定义了一个包含三个列的表格，分别是姓名、年龄和性别，然后定义了三条数据。这样就可以在页面中显示一个简单的表格了。