PlusTable

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

特性

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

安装

npm install @yunshuju/plus-table

使用

<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