Table 表格组件

基于 VXE Table 封装的表格组件，支持列宽缓存、自定义列、分页等功能。

注意事项

本组件基于 VXE Table 封装，如需了解更多高级功能，请参考官方文档。

基础用法

::: demo

<template>
  <div>
    <by-table
      :grid-options="gridOptions"
      name="demo-table"
      :loading="loading"
      @page-change="handlePageChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

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

const loading = ref(false)

const gridOptions = reactive({
  columns: [
    { field: 'name', title: '姓名', width: 120 },
    { field: 'age', title: '年龄', width: 80 },
    { field: 'email', title: '邮箱', width: 200 },
    { field: 'address', title: '地址', width: 300 },
    { field: 'phone', title: '电话', width: 150 },
  ],
  data: [
    { name: '张三', age: 25, email: 'zhangsan@example.com', address: '北京市朝阳区', phone: '13800138001' },
    { name: '李四', age: 30, email: 'lisi@example.com', address: '上海市浦东新区', phone: '13800138002' },
    { name: '王五', age: 28, email: 'wangwu@example.com', address: '广州市天河区', phone: '13800138003' },
  ],
  pagerConfig: {
    currentPage: 1,
    pageSize: 10,
    total: 100,
  },
})

const handlePageChange = (pager) => {
  console.log('分页变化:', pager)
}

const handleCurrentChange = (row) => {
  console.log('当前行变化:', row)
}
</script>

:::

可编辑表格

::: demo

<template>
  <div>
    <by-table :grid-options="gridOptions" name="editable-table" :loading="loading" @edit-closed="handleEditClosed" />
  </div>
</template>

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

const loading = ref(false)

const gridOptions = reactive({
  columns: [
    { field: 'name', title: '姓名', width: 120, editRender: { name: 'input' } },
    { field: 'age', title: '年龄', width: 80, editRender: { name: 'input', attrs: { type: 'number' } } },
    { field: 'email', title: '邮箱', width: 200, editRender: { name: 'input' } },
    {
      field: 'status',
      title: '状态',
      width: 100,
      editRender: {
        name: 'select',
        options: [
          { label: '启用', value: 'active' },
          { label: '禁用', value: 'inactive' },
        ],
      },
    },
  ],
  data: [
    { name: '张三', age: 25, email: 'zhangsan@example.com', status: 'active' },
    { name: '李四', age: 30, email: 'lisi@example.com', status: 'inactive' },
  ],
  editConfig: {
    trigger: 'click',
    mode: 'cell',
  },
})

const handleEditClosed = (params) => {
  console.log('编辑完成:', params)
}
</script>

:::

自定义列宽缓存

::: demo

<template>
  <div>
    <el-button @click="resetColumns" v-if="showReset">重置列宽</el-button>
    <by-table :grid-options="gridOptions" name="cache-table" :loading="loading" @set-columns="handleSetColumns" />
  </div>
</template>

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

const loading = ref(false)
const showReset = ref(false)

const gridOptions = reactive({
  columns: [
    { field: 'id', title: 'ID', width: 80 },
    { field: 'name', title: '姓名', width: 120 },
    { field: 'department', title: '部门', width: 150 },
    { field: 'position', title: '职位', width: 120 },
    { field: 'salary', title: '薪资', width: 100 },
    { field: 'email', title: '邮箱', width: 200 },
    { field: 'phone', title: '电话', width: 150 },
    { field: 'address', title: '地址', width: 300 },
  ],
  data: [
    {
      id: 1,
      name: '张三',
      department: '技术部',
      position: '前端工程师',
      salary: '15000',
      email: 'zhangsan@example.com',
      phone: '13800138001',
      address: '北京市朝阳区',
    },
    {
      id: 2,
      name: '李四',
      department: '产品部',
      position: '产品经理',
      salary: '20000',
      email: 'lisi@example.com',
      phone: '13800138002',
      address: '上海市浦东新区',
    },
  ],
})

const handleSetColumns = (columns) => {
  console.log('列配置变化:', columns)
}

const resetColumns = () => {
  // 重置列宽缓存
  showReset.value = false
}
</script>

:::

排序和筛选

::: demo

<template>
  <div>
    <by-table
      :grid-options="gridOptions"
      name="sort-filter-table"
      :loading="loading"
      @sort-change="handleSortChange"
      @filter-change="handleFilterChange"
    />
  </div>
</template>

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

const loading = ref(false)

const gridOptions = reactive({
  columns: [
    { field: 'name', title: '姓名', width: 120, sortable: true },
    { field: 'age', title: '年龄', width: 80, sortable: true },
    {
      field: 'department',
      title: '部门',
      width: 150,
      filters: [
        { label: '技术部', value: 'tech' },
        { label: '产品部', value: 'product' },
        { label: '设计部', value: 'design' },
      ],
      filterMethod: 'is',
    },
    { field: 'salary', title: '薪资', width: 100, sortable: true },
  ],
  data: [
    { name: '张三', age: 25, department: 'tech', salary: 15000 },
    { name: '李四', age: 30, department: 'product', salary: 20000 },
    { name: '王五', age: 28, department: 'design', salary: 18000 },
  ],
})

const handleSortChange = (params) => {
  console.log('排序变化:', params)
}

const handleFilterChange = (params) => {
  console.log('筛选变化:', params)
}
</script>

:::

API

Props

参数	说明	类型	默认值
gridOptions	表格配置选项	object	-
name	表格名称，用于列宽缓存	string	''
autoHeight	是否自动高度	boolean	false
loading	是否显示加载状态	boolean	false

Events

事件名	说明	回调参数
pageChange	分页变化时触发	(pager: object)
currentChange	当前行变化时触发	(row: object)
sortChange	排序变化时触发	(params: object)
filterChange	筛选变化时触发	(params: object)
editClosed	编辑完成时触发	(params: object)
setColumns	列配置变化时触发	(columns: array)
setGroupColumn	分组列变化时触发	(columns: array)

gridOptions 配置

属性	说明	类型	默认值
columns	列配置	array	[]
data	表格数据	array	[]
pagerConfig	分页配置	object	-
editConfig	编辑配置	object	-
sortConfig	排序配置	object	{ remote: true, trigger: 'cell' }
rowConfig	行配置	object	{ height: 41, isHover: true }
columnConfig	列配置	object	{ resizable: true }
resizableConfig	列宽调整配置	object	{ minWidth: 50 }

列配置 (columns)

属性	说明	类型	默认值
field	字段名	string	-
title	列标题	string	-
width	列宽度	number	-
sortable	是否可排序	boolean	false
filters	筛选选项	array	-
filterMethod	筛选方法	string	-
editRender	编辑渲染器	object	-
fixed	是否固定列	string	-
align	对齐方式	string	'center'