uni-app是否支持表格组件，uniapp-X中能否使用，没找到相关表格组件？

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app是否支持表格组件，uniapp-X中能否使用，没找到相关表格组件？

如何使用uniapp X实现Element UI风格的表格

UI设计师给我一个Element UI风格的Table表格，要用uniapp X原生实现，请问如何使用uniapp X实现表格？我看了没有表格组件， 如果自己写，我用scroll-view，但是又不能支持fixed右侧操作栏，以及垂直和水平滑动，请问有什么第三方插件支持呢？

Harmonyos Next教程
3 回复

去插件市场搜table看看有没有，你看看这个table插件支持unix不 https://ext.dcloud.net.cn/plugin?id=7511


谢谢，不支持uniapp X，没事，我自己封装一下

在uni-app中，虽然官方没有直接提供一个内置的表格组件，但你完全可以通过自定义组件的方式来实现表格功能。uni-app框架本身基于Vue.js，因此你可以利用Vue的组件化思想来构建表格组件。同时，uni-app-X（通常指的是uni-app的增强版或特定扩展，比如App平台的一些增强特性）也支持这种方式，因为它依然兼容标准的uni-app开发方式。

以下是一个简单的表格组件实现示例，你可以根据需要进行扩展：

1. 创建表格组件 MyTable.vue

<template>
  <view class="table">
    <view class="table-header">
      <view v-for="(header, index) in headers" :key="index" class="table-cell">{{ header }}</view>
    </view>
    <view v-for="(row, rowIndex) in data" :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: {
    headers: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
}
.table-header, .table-row {
  display: flex;
}
.table-cell {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>

2. 使用表格组件

在你的页面组件中引入并使用这个表格组件：

<template>
  <view>
    <MyTable :headers="headers" :data="tableData" />
  </view>
</template>

<script>
import MyTable from '@/components/MyTable.vue';

export default {
  components: {
    MyTable
  },
  data() {
    return {
      headers: ['Name', 'Age', 'City'],
      tableData: [
        ['Alice', 30, 'New York'],
        ['Bob', 25, 'Los Angeles'],
        ['Charlie', 35, 'Chicago']
      ]
    };
  }
}
</script>

以上代码展示了如何创建一个简单的表格组件，并在页面中使用它。你可以根据实际需求进一步美化样式、添加功能（如排序、筛选等），或者集成第三方表格库（如果它们支持uni-app）。总之，虽然uni-app没有内置的表格组件，但通过自定义组件的方式，你可以轻松实现所需的表格功能。

回到顶部