更新记录

1.0.7（2025-11-04） 下载此版本

修复已知bug

1.0.6（2025-10-31） 下载此版本

增加flex配置

1.0.5（2025-10-24） 下载此版本

修复height不生效问题

平台兼容性

uni-app(4.66)

liaction-table

一个功能丰富的UniApp表格组件，支持自定义列配置、智能列宽计算、文本截断、行高自适应、精确高度计算和多种交互功能。

特性

• 支持自定义列配置（标题、宽度、对齐方式等）
• 文本行数控制（lineClamp）
• 行高自适应内容
• 支持统一行高或自适应行高切换
• 支持表格边框、悬停效果
• 支持横向滚动
• 支持行点击事件
• 支持固定显示行数（visibleRows）
• 集成分页功能，支持页码切换和每页条数调整
• 支持最小/最大宽度限制

属性

列配置（columns）

事件

方法

使用示例

flex列配置示例

<template>
  <view>
    <!-- 使用flex配置列宽度 -->
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :border="true"
      :hoverable="true"
      :scroll-x="false" <!-- 非滚动模式 -->
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        // flex列，将按比例分配剩余空间
        { title: '描述1', field: 'description1', flex: 1 },
        { title: '描述2', field: 'description2', flex: 2 } // 此列宽度将是描述1的2倍
      ],
      tableData: [
        { name: '张三', description1: '描述内容1', description2: '描述内容2' },
        { name: '李四', description1: '这是一段描述', description2: '这是更长的描述内容' }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

### 重新计算列宽示例

```html
<template>
  <view>
    <button @click="refreshTableWidth">刷新表格列宽</button>
    <liaction-table 
      ref="tableRef"
      :data="tableData"
      :columns="columns"
      :border="true"
      :hoverable="true"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '描述', field: 'description' }
      ],
      tableData: []
    };
  },
  methods: {
    refreshTableWidth() {
      // 调用recalculateColumnWidths方法重新计算列宽
      if (this.$refs.tableRef && this.$refs.tableRef.recalculateColumnWidths) {
        this.$refs.tableRef.recalculateColumnWidths();
      }
    }
  }
};
</script>

### 自定义容器样式

```html
<template>
  <view>
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :border="true"
      :container-border="true"
      :container-border-color="'#007aff'"
      :container-border-width="'2px'"
      :container-border-radius="'8px'"
      :container-background="'#f0f8ff'"
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '年龄', field: 'age', width: 80, align: 'center' },
        { title: '描述', field: 'description' }
      ],
      tableData: [
        { name: '张三', age: 25, description: '这是一段详细描述...' },
        { name: '李四', age: 30, description: '这是另一段详细描述...' },
        { name: '王五', age: 35, description: '简短描述' }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

固定显示行数

<template>
  <view>
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :visible-rows="3" <!-- 固定显示3行 -->
      :border="true"
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '年龄', field: 'age', width: 80, align: 'center' },
        { title: '描述', field: 'description' }
      ],
      tableData: [
        { name: '张三', age: 25, description: '这是一段详细描述...' },
        { name: '李四', age: 30, description: '这是另一段详细描述...' },
        { name: '王五', age: 35, description: '简短描述' },
        { name: '赵六', age: 40, description: '这是第四行数据' },
        { name: '钱七', age: 45, description: '这是第五行数据' }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

使用分页功能

<template>
  <view>
    <liaction-table 
      :data="pageData"
      :columns="columns"
      :border="true"
      :show-pagination="true"
      :pagination-current="currentPage"
      :pagination-total="totalItems"
      :pagination-page-size="pageSize"
      :pagination-show-page-size="true"
      :pagination-page-size-range="[10, 20, 50, 100]"
      @pagination-change="handlePaginationChange"
      @pagination-page-size-change="handlePageSizeChange"
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '年龄', field: 'age', width: 80, align: 'center' },
        { title: '描述', field: 'description' }
      ],
      pageData: [], // 当前页数据
      totalItems: 100, // 总数据量
      currentPage: 1, // 当前页码
      pageSize: 10 // 每页条数
    };
  },
  created() {
    // 初始化时加载第一页数据
    this.loadPageData();
  },
  methods: {
    // 加载分页数据
    loadPageData() {
      // 这里模拟从服务器获取数据
      // 实际应用中应该调用API获取数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;

      // 模拟数据
      this.pageData = Array.from({ length: Math.min(this.pageSize, this.totalItems - start) }, (_, i) => ({
        name: `用户${start + i + 1}`,
        age: 20 + Math.floor(Math.random() * 20),
        description: `这是第${start + i + 1}条数据的详细描述`
      }));
    },

    // 处理页码变化
    handlePaginationChange(e) {
      this.currentPage = e.current;
      this.loadPageData();
    },

    // 处理每页条数变化
    handlePageSizeChange(e) {
      this.pageSize = e.pageSize;
      this.currentPage = 1; // 重置到第一页
      this.loadPageData();
    },

    // 处理行点击
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

智能列宽计算示例

<template>
  <view>
    <!-- 非滚动模式下，未设置宽度的列将均分剩余空间 -->
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :border="true"
      :hoverable="true"
      :scroll-x="false" <!-- 非滚动模式 -->
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '年龄', field: 'age', width: 80, align: 'center' },
        // 这两列未设置宽度，在非滚动模式下将均分剩余空间
        { title: '描述1', field: 'description1' },
        { title: '描述2', field: 'description2' }
      ],
      tableData: [
        { name: '张三', age: 25, description1: '描述内容1', description2: '描述内容2' },
        { name: '李四', age: 30, description1: '这是一段较长的描述', description2: '另一段描述' }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

### 基本使用

```html
<template>
  <view>
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :border="true"
      :hoverable="true"
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '年龄', field: 'age', width: 80, align: 'center' },
        { title: '描述', field: 'description', lineClamp: 3 }
      ],
      tableData: [
        { name: '张三', age: 25, description: '这是一段详细描述...' },
        { name: '李四', age: 30, description: '这是另一段详细描述，内容可能会很长...' },
        { name: '王五', age: 35, description: '简短描述' }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row, '索引:', rowIndex);
    }
  }
};
</script>

启用行高自适应

<template>
  <view>
    <liaction-table 
      :data="contentControlData"
      :columns="contentControlColumns"
      height="300px"
      :border="true"
      :hoverable="true"
      :enable-unified-row-height="false" <!-- 禁用统一行高，启用内容自适应 -->
      @row-click="handleRowClick"
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentControlColumns: [
        { title: '姓名', field: 'name', width: 120 },
        { title: '详细描述', field: 'description', lineClamp: 2 },
        { title: '备注', field: 'remark', lineClamp: 3 }
      ],
      contentControlData: [
        {
          name: '张三',
          description: '这是一段很长的详细描述文本，用于测试表格内容的行数限制功能。当文本内容超过设置的行数限制时，会自动截断并显示省略号。',
          remark: '备注信息也可以很长，用于测试表格内容的显示效果。'
        },
        {
          name: '李四',
          description: '简短描述',
          remark: '简短备注'
        }
      ]
    };
  },
  methods: {
    handleRowClick(row, rowIndex) {
      console.log('点击了行:', row.name, '索引:', rowIndex);
    }
  }
};
</script>

自定义文本截断行数

<template>
  <view>
    <liaction-table 
      :data="tableData"
      :columns="columns"
      :line-clamp="2" <!-- 全局设置文本显示2行 -->
    ></liaction-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '正常显示', field: 'normal', width: 100 },
        { title: '显示1行', field: 'single', width: 100, lineClamp: 1 }, // 覆盖全局设置
        { title: '显示3行', field: 'triple', width: 100, lineClamp: 3 }, // 覆盖全局设置
        { title: '不限制', field: 'unlimited', width: 100, lineClamp: 0 } // 不限制行数
      ],
      tableData: [
        {
          normal: '这是一段可能超过2行的文本内容，会被截断显示省略号。',
          single: '这是一段文本，只会显示第一行。',
          triple: '这是一段较长的文本，会显示完整的三行内容，如果超过三行才会截断。',
          unlimited: '这是一段不限制行数的文本，可以完整显示所有内容。'
        }
      ]
    };
  }
};
</script>

注意事项

1. 滚动视图使用限制：使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给添***hite-space: nowrap;样式，具体参考uni-app官方文档。
2. 当 enableUnifiedRowHeight 设置为 false 时，行高会根据内容自动调整，但可能会影响表格的视觉一致性。
3. lineClamp 属性用于控制文本显示的最大行数，超过后会显示省略号，默认值为2。
4. 列配置中的 lineClamp 优先级高于全局 lineClamp 设置。
5. 当设置了表格高度时，内容过多会显示滚动条。
6. visibleRows 属性用于固定显示的行数，设置后表格高度会根据行数自动计算，同时考虑边框和渲染因素，确保所有行都能完整显示。
7. 在非横向滚动模式下（scrollX=false），表格高度计算会自动包含表头高度，确保表头和表体都能完整显示。
8. 表格高度计算采用精确算法：内容区域高度 = 总高度 - 顶部分页高度 - 底部分页高度 - 表头高度 - 边框内边距修正值。
9. 当设置了固定高度时，内容区域会根据可用空间自动计算，确保不超过总高度限制。
10. 分页功能通过 showPagination 属性启用，需要同时设置 paginationTotal、paginationCurrent 和 paginationPageSize 等属性。
11. 通过监听 paginationChange 和 paginationPageSizeChange 事件来实现数据的分页加载，或者使用 paginationChangeAll 统一事件。
12. 容器边框（containerBorder）仅应用于表头和内容区域，分页组件作为独立部分显示在容器外部，默认值为true。
13. 表格高度有两种设置方式：
    • 方式一：直接在表格组件上设置 height 属性，指定表格的固定高度。
    • 方式二：在父容器中设置高度并将其 display 属性设置为 flex，此时表格会自动填充父容器的可用空间，无需主动设置表格的 height 属性。
14. 统一行高（enableUnifiedRowHeight）默认关闭，行高自适应内容；border 和 stripe 属性默认开启。
15. paginationPosition 支持三种取值：'top'、'bottom'或'both'，默认值为'bottom'。
16. align 属性默认值为'center'，支持'left'、'center'、'right'、'flex-start'、'flex-end'几种对齐方式。
17. 表格的滚动功能基于 uni-app 的 scroll-view 组件实现，必须遵循 scroll-view 的相关使用规范，确保滚动功能正常工作。
18. 智能列宽计算规则：
    • 非滚动模式下（scrollX=false）且没有flex列时，未设置宽度的列会均分剩余空间
    • 滚动模式下（scrollX=true）或存在flex列时，未设置宽度的列会使用实际测量宽度或默认宽度
    • 列宽可通过minWidth/maxWidth进行限制，也可通过全局minColumnWidth/maxColumnWidth属性设置全局限制