uni-app 需要带横向滚动条的表格插件和文件管理插件

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

uni-app 需要带横向滚动条的表格插件和文件管理插件

uni-app里写table tr td等等这些标签都会被替换成view，然后表格就变成一行一格的列表了，我们需要表格， 另外文件管理的插件也需要，很多时候需要指定上传或者下载的位置，但是uni-app没有提供读取文件系统的接口…

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20190111/dc430efb4bf91173f36a1bed85aef6f9.png

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20190111/504869233cfb3f3a72def25c57fb8df6.jpg


Harmonyos Next教程
4 回复

同意,需要表格


同求表格

插件市场有table。 上传指定目录的文件，插件市场也有。Android上基于Native.js实现。 plus.io可以访问沙盒内的文件系统。

在uni-app中，虽然官方组件库并没有直接提供带横向滚动条的表格插件和文件管理插件，但我们可以通过自定义组件和第三方库来实现这些功能。下面我将给出一些代码示例，帮助你实现这两个功能。

带横向滚动条的表格插件

要实现带横向滚动条的表格，我们可以使用view组件配合scroll-x="true"属性来实现。以下是一个简单的示例：

<template>
  <view class="table-container">
    <view class="table">
      <view class="table-header">
        <view v-for="(header, index) in headers" :key="index" class="table-cell">{{ header }}</view>
      </view>
      <view class="table-body">
        <view v-for="(row, rowIndex) in rows" :key="rowIndex" class="table-row">
          <view v-for="(cell, cellIndex) in row" :key="cellIndex" class="table-cell">{{ cell }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age', 'Address', 'Phone'],
      rows: [
        [1, 'John Doe', 30, '123 Main St', '555-5555'],
        // 更多行数据...
      ]
    };
  }
};
</script>

<style>
.table-container {
  width: 100%;
  overflow-x: auto;
}
.table {
  display: flex;
  flex-direction: column;
}
.table-header, .table-row {
  display: flex;
}
.table-cell {
  min-width: 100px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

文件管理插件

对于文件管理插件，我们可以使用uni-app的文件系统API来实现一个基本的文件管理界面。以下是一个简单的示例，用于列出和删除文件：

<template>
  <view>
    <view v-for="(file, index) in files" :key="index" class="file-item">
      {{ file.name }}
      <button @click="deleteFile(file.path)">Delete</button>
    </view>
    <button @click="listFiles">Refresh</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    async listFiles() {
      try {
        const res = await uni.getFileSystemManager().readdir({
          dirPath: uni.env.USER_DATA_PATH,
          success: (result) => {
            this.files = result.files.map(file => ({ name: file, path: `${uni.env.USER_DATA_PATH}/${file}` }));
          },
          fail: (err) => {
            console.error(err);
          }
        });
      } catch (error) {
        console.error(error);
      }
    },
    async deleteFile(path) {
      try {
        await uni.getFileSystemManager().unlink({
          filePath: path,
          success: () => {
            this.listFiles();
          },
          fail: (err) => {
            console.error(err);
          }
        });
      } catch (error) {
        console.error(error);
      }
    }
  },
  onLoad() {
    this.listFiles();
  }
};
</script>

这两个示例分别展示了如何创建带横向滚动条的表格和简单的文件管理界面。你可以根据自己的需求进一步扩展这些功能。

回到顶部