Uniapp封装el-table：打造一致的表格体验

前端

2023-09-03 00:06:38

使用 Uniapp 封装 el-table：打造统一的表格体验

在 Uniapp 开发中，表格组件是必不可少的元素。它允许我们展示数据、管理记录并实现诸如排序、筛选和分页等功能。而采用 el-table 作为 Uniapp 表格组件，则能带来更加丰富和优化的体验。

准备工作

封装 el-table 之前，需要进行一些准备工作：

安装 el-table npm 包
在 main.js 文件中引入 el-table 组件

封装步骤

1. 创建新的 Uniapp 组件文件

例如，名为 "MyTable.vue"。

2. 在组件模板中引入 el-table 组件

并指定必要的属性，如下所示：

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    :border="true"
    style="width: 100%"
  />
</template>

3. 在组件脚本中定义数据和方法

控制表格的行为和样式，如下所示：

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John',
          age: 30
        },
        {
          name: 'Mary',
          age: 25
        },
        {
          name: 'Bob',
          age: 35
        }
      ],
      tableColumns: [
        {
          prop: 'name',
          label: 'Name'
        },
        {
          prop: 'age',
          label: 'Age'
        }
      ]
    }
  }
}
</script>

4. 在组件样式中定义样式

实现与 el-table 一致的视觉效果，如下所示：

<style>
.el-table {
  width: 100%;
  border: 1px solid #ccc;
}

.el-table__header {
  background-color: #f5f5f5;
}

.el-table__body {
  height: 300px;
}

.el-table__row {
  border-bottom: 1px solid #ccc;
}

.el-table__cell {
  padding: 10px;
}
</style>