uni-app 固定在左侧的列使用 formatter无效

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

uni-app 固定在左侧的列使用 formatter无效

开发环境 版本号 项目创建方式
Windows HBuilderX

操作步骤：

就配置了个固定在左侧的列，column里也加了formatter: true，并且表格标签上也绑了formatter，该函数返回1。但是没有效果，非固定列生效，一固定就变成原来的值了，我看了你们代码里并没有做这部分的处理。

预期结果：

和非固定列一样撒，让formatter生效

实际结果：

未生效

img

bug描述：

固定在左侧的列使用 formatter无效


Harmonyos Next教程
1 回复

在 uni-app 中，如果你遇到固定在左侧的列（通常是表格的左侧固定列）使用 formatter 无效的问题，可能是因为你没有正确地配置 formatter 或者相关属性。以下是一个示例，展示了如何在 uni-app 中使用 formatter 来格式化左侧固定列的内容。

首先，确保你的页面或组件中使用了 u-table 组件，并且正确设置了 fixed 属性来定义左侧固定列。formatter 通常是在列定义中使用的，因此我们需要检查列定义。

示例代码

假设你有一个表格，其中第一列是固定列，并且你想使用 formatter 来格式化这一列的内容。

<template>
  <view>
    <u-table :data="tableData" border>
      <u-table-column prop="id" label="ID" fixed="left" width="100">
        <template slot-scope="scope">
          <view>{{ formatId(scope.row.id) }}</view>
        </template>
      </u-table-column>
      <u-table-column prop="name" label="Name" width="150"></u-table-column>
      <u-table-column prop="age" label="Age" width="100"></u-table-column>
      <!-- 其他列 -->
    </u-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        // 其他数据
      ]
    };
  },
  methods: {
    formatId(id) {
      // 假设你想在ID前加上一个前缀
      return `ID-${id}`;
    }
  }
};
</script>

<style scoped>
/* 样式根据需要调整 */
</style>

解释

  1. 固定列定义：<u-table-column prop="id" label="ID" fixed="left" width="100"> 这行代码定义了左侧固定列，其中 fixed="left" 是关键属性。

  2. 使用 formatter：由于 uni-app 的 u-table 组件可能不支持直接在列定义中使用 formatter 属性（取决于你使用的 u-table 组件版本和具体实现），你可以通过 slot-scope 来手动格式化内容。在 <template slot-scope="scope"> 中，我们调用了 formatId 方法来格式化 id。

  3. 方法定义：在 methods 中定义了 formatId 方法，该方法接收一个 id 参数，并返回一个格式化后的字符串。

通过上述方式，你可以在 uni-app 中为左侧固定列应用自定义的格式化逻辑。如果 u-table 组件的后续版本支持直接在列定义中使用 formatter 属性，那么你可以按照文档更新你的代码。

回到顶部