更新记录

0.0.0（2026-04-22） 下载此版本

好的，根据你的要求，以下为版本 0.0.0 的更新日志内容，可直接追加到插件根目录的 changelog.md 文件中，与插件市场自动同步。

## [0.0.0] - 2026-04-21

### 

平台兼容性

HBuilderX插件通用注意事项

HBuilderX-2.7.12以下版本安装插件市场内的插件后，卸载时需手动卸载，详细教程参考：如何手动卸载插件

# xq-table-plus （即组合了 xq-table 与 xq-pagination 的增强组件）的全部特性、配置、方法和示例。

xq-table-plus 组合表格组件

xq-table-plus 是一个集成了 增强表格 (xq-table) 与 分页器 (xq-pagination) 的 uni-app 组合组件。它旨在为后台管理系统提供一站式的数据展示与交互解决方案，只需少量配置即可拥有：

• ✅ 自定义全选/半选样式
• ✅ 列显示隐藏 + 本地记忆
• ✅ 排序、筛选事件代理
• ✅ 跨端文本溢出省略
• ✅ 灵活的分页布局

📦 安装与引入

组件采用 easycom 规范，将整个文件夹放入项目 uni_modules/ 目录即可自动识别，无需手动 import。

components/
├── xq-table/
│   ├── index.vue
│   └── utils.js
├── xq-pagination/
│   └── index.vue
└── xq-table-plus/
    └── index.vue      # 本组件

依赖 @dcloudio/uni-ui 中的 uni-table、uni-icons、uni-popup、uni-tooltip、uni-data-picker。请确保项目已安装或通过插件市场导入时自动安装。

🚀 快速开始

<template>
  <xq-table-plus
    v-model:columns="columns"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :table-data="tableData"
    :total="total"
    type="selection"
    row-key="id"
    local-cloumn-keys="user_table"
    @selection-change=""
    @current-change="onPageChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const columns = ref([
  { prop: 'name', label: '姓名', width: 100 },
  { prop: 'age', label: '年龄', sortable: true },
  { prop: 'status', label: '状态', slot: 'status' }
])

const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const  = (rows) => console.log('选中行:', rows)
const onPageChange = (page) => fetchData(page)
</script>

⚙️ Props

表格相关（xq-table）

分页相关（xq-pagination）

layout 可用标识

标识的顺序决定了它们在分页栏中的排列顺序。

📤 Events

🧩 Slots

通过列配置中的 slot 字段定义插槽名，然后在组件内使用对应名称的插槽自定义单元格内容。

<template>
  <xq-table-plus :columns="columns" :table-data="tableData">
    <template #status="{ row }">
      <u-tag v-if="row.status === '0'" text="启用" type="success" />
      <u-tag v-else text="禁用" type="error" />
    </template>
  </xq-table-plus>
</template>

🛠️ 方法 (通过 ref 调用)

调用示例：

const tableRef = ref(null)
tableRef.value.selectionAll()
tableRef.value.toggleRowSelection([0])      // 切换第一行
tableRef.value.clearSelection()

📋 列配置详解 (columns)

每个列对象支持的属性如下：

events 示例：

{
  prop: 'postId',
  sortable: true,
  events: {
    'sort-change': ({ column, event }) => {
      console.log(`排序字段: ${column.prop}, 顺序: ${event.order}`)
    }
  }
}

🌐 跨端文本省略

组件内置了 u-line-1 至 u-line-5 样式类，可直接用于表格单元格内容的多行省略：

<text class="u-line-2">{{ veryLongText }}</text>

• 非 nvue：使用 -webkit-line-clamp 实现
• nvue：使用 lines 属性适配

📱 平台兼容性

📄 完整示例

<template>
  <view>
    <xq-table-plus
      ref="tableRef"
      v-model:columns="columns"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :table-data="tableData"
      :total="total"
      type="selection"
      row-key="id"
      local-cloumn-keys="demo_table"
      layout="total, sizes, prev, pager, next, ct"
      @selection-change=""
      @current-change="fetchData"
    >
      <template #status="{ row }">
        <u-tag :text="row.status === '0' ? '启用' : '禁用'" :type="row.status === '0' ? 'success' : 'error'" />
      </template>
    </xq-table-plus>

    <button @click="handleClear">清空选中</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tableRef = ref(null)
const columns = ref([
  { prop: 'name', label: '姓名', width: 100 },
  { prop: 'status', label: '状态', slot: 'status' }
])
const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const fetchData = (page = 1) => {
  // 模拟请求
  setTimeout(() => {
    tableData.value = [
      { id: 1, name: '张三', status: '0' },
      { id: 2, name: '李四', status: '1' }
    ]
    total.value = 100
  }, 300)
}

onMounted(() => fetchData())

const  = (rows) => console.log('选中:', rows)

const handleClear = () => tableRef.value.clearSelection()
</script>

🔗 相关链接

• xq-table 独立文档：参考 xq-tablexq-table 组件内的 README
• xq-pagination 独立文档：参考 xq-paginationxq-pagination 组件内的 README
• 问题反馈：请在插件市场评论区或 GitHub Issues 留言

文档版本：v1.0.0
最后更新：2026-04-22