更新记录

1.0.1（2025-12-23） 下载此版本

• 遵守uni_modules规范

1.0.0（2025-12-23） 下载此版本

1.0.0（2025-12-23）

• 首次发布
• 支持触摸/鼠标滑动选择行列数
• 实时高亮显示选中区域
• 支持自定义网格尺寸（maxRows、maxCols、cellSize、cellGap）
• 支持自定义颜色（填充色、边框色、文字色）
• 支持显示/隐藏预览文字
• 提供 reset 方法重置选择状态
• 兼容 Vue2 和 Vue3
• 支持 App、H5、微信等小程序

平台兼容性

uni-app(3.6.15)

tri-table-picker 表格行列选择器

一个用于 uni-app 的表格行列数选择器组件，提供图形化的表格尺寸设置 UI，类似 Word/Google Docs 插入表格时的交互体验。

特性

• 支持触摸滑动选择行列数
• 支持鼠标操作（H5 平台）
• 实时高亮显示选中区域
• 高度可定制（尺寸、颜色、圆角等）
• 支持 Vue2 和 Vue3
• 跨平台：App、H5、微信/支付宝/百度/字节跳动等小程序

安装

方式一：uni_modules 安装（推荐）

1. 在 DCloud 插件市场 搜索 tri-table-picker
2. 点击「使用 HBuilderX 导入插件」

方式二：手动安装

1. 下载组件文件
2. 将 uni_modules/tri-table-picker 目录复制到项目的 uni_modules 目录下

使用方法

基础用法

<template>
  <tri-table-picker @select=""></tri-table-picker>
</template>

<script>
export default {
  methods: {
    (e) {
      console.log(`选择了 ${e.rowCount} 行 ${e.colCount} 列`);
    }
  }
}
</script>

自定义网格尺寸

<tri-table-picker
  :maxRows="6"
  :maxCols="8"
  :cellSize="36"
  :cellGap="6"
  @select=""
></tri-table-picker>

自定义颜色

<tri-table-picker
  cellColor="#FFFFFF"
  cellBorderColor="#E0E0E0"
  selectedCellColor="#E8F5E9"
  selectedBorderColor="#4CAF50"
  textColor="#4CAF50"
  @select=""
></tri-table-picker>

隐藏预览文字

<tri-table-picker
  :showPreview="false"
  @select=""
></tri-table-picker>

通过 ref 重置选择

<template>
  <tri-table-picker ref="picker" @select=""></tri-table-picker>
  <button @click="resetPicker">重置</button>
</template>

<script>
export default {
  methods: {
    (e) {
      console.log(e);
    },
    resetPicker() {
      this.$refs.picker.reset();
    }
  }
}
</script>

API

Props

Events

Methods

交互说明

1. 触摸/点击：在网格区域按下开始选择
2. 滑动/拖动：移动手指或鼠标，实时更新选中区域
3. 抬起：松开手指或鼠标，触发 select 事件并返回选中的行列数

注意事项

• 组件使用 rpx 作为尺寸单位，会自动适配不同屏幕
• 在小程序中，组件需要放置在可滚动容器外，或设置 @touchmove.stop 防止滚动冲突
• nvue 页面暂不支持