uniapp中如何实现表格组件

1. 简介

表格是前端开发中常用的一个组件，它能够展示数据并使数据更加易于阅读。在uniapp中，我们可以使用u-table组件来实现表格的功能。

2. u-table组件

u-table是uniapp官方提供的表格组件，它通过传递不同的数据源和设置不同的属性，能够实现各种不同风格和功能的表格。

2.1 基本用法

通过设置columns和rows属性，我们可以创建一个最基本的表格，如下所示：

<u-table :columns="columns" :rows="rows"></u-table>
// data
<script>
  export default {
    data() {
      return {
        columns: [
          {title: '姓名', key: 'name'},
          {title: '年龄', key: 'age'},
          {title: '性别', key: 'gender'}
        ],
        rows: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'}
        ]
      }
    }
  }
</script>

上述代码中，我们定义了一个包含三个列头和两行数据的表格。columns属性中每个对象代表一列的信息，包含列的标题和key值，rows属性中每个对象代表一行数据，包含每列对应的数据。

2.2 自定义模板

在表格中，我们可能需要自定义每个单元格的展示内容。这个时候，我们可以通过slot来实现自定义模板，如下所示：

<u-table :columns="columns" :rows="rows">
  <template #name="{ row }">
    <span v-if="row.age > 18">{{ row.name }} <strong>(成年人)</strong></span>
    <span v-else>{{ row.name }}</span>
  </template>
</u-table>
// data
<script>
  export default {
    data() {
      return {
        columns: [
          {title: '姓名', key: 'name'},
          {title: '年龄', key: 'age'},
          {title: '性别', key: 'gender'}
        ],
        rows: [
          {name: '张三', age: 20, gender: '男'},
          {name: '李四', age: 16, gender: '女'}
        ]
      }
    }
  }
</script>

上述代码中，我们通过定义name为slot的template，并传递一个row参数来实现自定义模板。在模板中，我们判断了当前行的age是否大于18，如果大于18，则会在name后面添加(成年人)。

2.3 表格样式

u-table组件提供了丰富的属性来自定义表格的样式，包括表格边框、背景色、行高等。下面是一些常用的表格样式设置：

2.3.1 设置表格边框

通过border属性，可以设置表格的边框。例如将表格边框颜色设置为红色，可以这样实现：

<u-table :columns="columns" :rows="rows" border="red"></u-table>

2.3.2 设置表格背景色

通过设置stripe属性，可以给表格添加斑马线效果，通过设置backgroundColor属性可以设置表格的背景色。例如将表格背景色设置为灰色，可以这样实现：

<u-table :columns="columns" :rows="rows" stripe backgroundColor="#eee"></u-table>

2.3.3 设置表格行高

通过设置rowHeight属性，可以设置表格的行高。例如将表格的行高设置为50px，可以这样实现：

<u-table :columns="columns" :rows="rows" rowHeight="50"></u-table>

3. 总结

通过u-table组件，我们可以非常方便地实现表格的功能，并通过自定义模板和样式属性来满足不同的需求。希望本文对你能够有所帮助。