ysj-plus-table/README.md

A Vue 3 table component based on Element Plus

# PlusTable

基于 Element Plus 的增强表格组件，提供了更强大的功能和更简单的使用方式。

## 特性

- 支持搜索栏配置
- 支持工具栏配置
- 支持表格列配置
- 支持分页配置
- 支持树形表格
- 支持自定义列渲染
- 支持表格事件处理
- 支持表格样式配置

## 安装

```bash
npm install @yunshuju/plus-table
```

## 使用

```vue
<template>
  <plus-table
    :columns="columns"
    :search-columns="searchColumns"
    :tool-bar-render="toolBarRender"
    :data-source="tableData"
    :loading="loading"
    @query="handleQuery"
    @selection-change="handleSelectionChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import PlusTable from '@yunshuju/plus-table'

// 表格列配置
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120
  },
  {
    title: '年龄',
    dataIndex: 'age',
    width: 80
  },
  {
    title: '地址',
    dataIndex: 'address'
  }
]

// 搜索列配置
const searchColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    showSearch: {
      type: 'input',
      placeholder: '请输入姓名',
      width: 200
    }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    showSearch: {
      type: 'select',
      placeholder: '请选择年龄',
      width: 200,
      valueEnum: [
        { label: '18', value: 18 },
        { label: '19', value: 19 },
        { label: '20', value: 20 }
      ]
    }
  }
]

// 工具栏配置
const toolBarRender = [
  {
    title: '新增',
    icon: 'Plus',
    onClick: () => {
      console.log('新增')
    }
  },
  {
    title: '删除',
    icon: 'Delete',
    type: 'danger',
    onClick: () => {
      console.log('删除')
    }
  }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    age: 18,
    address: '北京市朝阳区'
  },
  {
    id: 2,
    name: '李四',
    age: 19,
    address: '北京市海淀区'
  }
])

// 加载状态
const loading = ref(false)

// 查询方法
const handleQuery = (params) => {
  console.log('查询参数：', params)
}

// 选择变化
const handleSelectionChange = (selection) => {
  console.log('选中数据：', selection)
}
</script>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 表格列配置 | array | [] |
| searchColumns | 搜索列配置 | array | [] |
| toolBarRender | 工具栏配置 | array | [] |
| showIndex | 是否显示序号 | boolean | true |
| selection | 是否显示选择框 | boolean | false |
| pagination | 分页配置 | boolean/object | true |
| dataSource | 表格数据 | array | [] |
| loading | 加载状态 | boolean | false |
| border | 是否显示边框 | boolean | true |
| stripe | 是否显示斑马纹 | boolean | true |
| height | 表格高度 | string/number | - |
| maxHeight | 表格最大高度 | string/number | - |
| rowKey | 行数据的 Key | string/function | 'id' |
| treeProps | 树形表格配置 | object | {} |
| defaultExpandAll | 是否默认展开所有行 | boolean | false |
| expandRowKeys | 展开行的 keys 数组 | array | [] |
| rowClassName | 行的 className | string/function | - |
| rowStyle | 行的 style | object/function | - |
| cellClassName | 单元格的 className | string/function | - |
| cellStyle | 单元格的 style | object/function | - |
| headerRowClassName | 表头行的 className | string/function | - |
| headerRowStyle | 表头行的 style | object/function | - |
| headerCellClassName | 表头单元格的 className | string/function | - |
| headerCellStyle | 表头单元格的 style | object/function | - |
| highlightCurrentRow | 是否高亮当前行 | boolean | false |
| currentRowKey | 当前行的 key | string/number | - |
| emptyText | 空数据时显示的文本 | string | '暂无数据' |
| defaultSort | 默认的排序列的 prop 和顺序 | object | - |
| tooltipEffect | tooltip effect 属性 | string | 'dark' |
| showSummary | 是否在表尾显示合计行 | boolean | false |
| sumText | 合计行第一列的文本 | string | '合计' |
| summaryMethod | 自定义的合计计算方法 | function | - |
| spanMethod | 合并行或列的计算方法 | function | - |
| selectOnIndeterminate | 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为 | boolean | true |
| indent | 展示树形数据时，树节点的缩进 | number | 16 |
| lazy | 是否懒加载子节点数据 | boolean | false |
| load | 加载子节点数据的方法 | function | - |
| style | 表格的 style | string/object | - |
| class | 表格的 class | string/object | - |
| tableLayout | 表格的 table-layout 属性 | string | 'auto' |
| scrollbarAlwaysOn | 是否总是显示滚动条 | boolean | false |
| showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | boolean | true |
| fit | 列的宽度是否自撑开 | boolean | true |
| size | 表格的尺寸 | string | 'default' |
| resizeObserver | 是否启用 resize 监听 | boolean | true |
| flex | 是否启用 flex 布局 | boolean | false |

### Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| update:dataSource | 表格数据更新时触发 | (dataSource: array) |
| update:loading | 加载状态更新时触发 | (loading: boolean) |
| update:pagination | 分页配置更新时触发 | (pagination: object) |
| select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | (selection: array, row: object) |
| select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | (selection: array) |
| selection-change | 当选择项发生变化时触发的事件 | (selection: array) |
| cell-click | 当某个单元格被点击时触发的事件 | (row: object, column: object, cell: HTMLElement, event: Event) |
| row-click | 当某一行被点击时触发的事件 | (row: object, column: object, event: Event) |
| row-contextmenu | 当某一行被鼠标右键点击时触发的事件 | (row: object, column: object, event: Event) |
| row-dblclick | 当某一行被双击时触发的事件 | (row: object, column: object, event: Event) |
| header-click | 当某一列的表头被点击时触发的事件 | (column: object, event: Event) |
| header-contextmenu | 当某一列的表头被鼠标右键点击时触发的事件 | (column: object, event: Event) |
| sort-change | 当表格的排序条件发生变化的时候触发的事件 | ({ column: object, prop: string, order: string }) |
| filter-change | 当表格的筛选条件发生变化的时候触发的事件 | (filters: object) |
| expand-change | 当用户对某一行展开或者关闭的时候触发的事件 | (row: object, expanded: boolean) |
| current-change | 当表格的当前行发生变化的时候触发的事件 | (currentRow: object) |
| size-change | 当每页条数改变时触发 | (size: number) |
| page-change | 当页码改变时触发 | ({ page: number, size: number }) |

## 许可证

[MIT](LICENSE)