说明

hzzt-table封装了vxe-table和element-plus的el-table，兼容两者的API,使他们保持一致的用法

注：内部没有引用vxe-table和el-table相关的样式，需要单独引用

安装方式

npm install hzzt-table

import HzztTable from 'hzzt-table';
import 'hzzt-table/dist/index.css'
import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(HzztTable, {
    size: 'small', // 表格尺寸大小
    // i18n: i18n  vue-i18n实例,
    config: {   // 参考vxe-table的全局参数配置
        table: {},
    }
})

app.mount('#app')

VxeJsxTable和JsxTable组件

Props

| 属性 | 类型 | 默认值 | 说明 | |-------------------|---------------------------------------------------------------|---------|------------------------| | loading | boolean | false | 表格是否显示加载中 | | data | Record<string, any>[] | [] | 表格数据 | | columns | ColumnItem[] | [] | 表格列配置 | | rowKey | string | null | 自定义行数据唯一主键的字段名（默认自动生成） | | size | enum 'large' \| 'medium' \| 'default' \| 'small' \| 'mini' | default | 表格尺寸 | | enableCollapseAll | boolean | false | tree和expand表格是否支持一键展开 | | defaultExpandAll | boolean | false | 默认全部展开 | | enableDrag | boolean | false | 启用行拖拽 | | shiftPick | boolean | true | 启用shift键快速选择（树形表格需要指定isChild和parentField字段） | | height | string | number | 表格高度 | | tableProps | Record<string, any> | null | vxe-table和el-table的参数 | | expandOnClick | boolean | false | 点击行展开tree和expand表格 | | selectOnClick | boolean | false | 点击行进行选中 | | selectOnCellClick | boolean | true | 点击checkbox单元格进行选中 | | expandOnCellClick | boolean | true | 点击tree和expand单元格进行选中 | | selection | Record<string, any>[] | [] | 选择行的数据 |

ColumnItem 参数说明

| 属性名 | 类型 | 说明 | |----------|-----------------------------------------------------------------------------|-------------| | type | enum 'checkbox' \| 'selection' \| 'seq' \| 'tree' \| 'expand' \| 'index' | 名称 | | label | string | 列名称 | | title | string | 列名称，同label | | prop | string | 列属性值 | | field | string | 列属性值，同field | | slots | Record<string, any> | 插槽 | | children | ColumnItem[] | 多级表头配置 |

Event

sort-change

表格排序变化时触发

参数：

• params.column: 排序列配置信息
• params.order: 排序顺序 ('asc' | 'desc' | null)
• params.prop: 排序字段名

update:selection

选中行数据更新时触发（支持 v-model:selection）

参数：

• selection: 当前选中的行数据数组

row-drag

行拖拽操作完成时触发

参数：

• draggedId: 被拖拽行的ID
• targetId: 目标位置的行的ID
• type: 拖拽位置类型 ('before' | 'after')
• newIndex: 新的索引位置
• oldIndex: 原始索引位置

header-click

表头点击时触发

参数：

• column: 列配置信息
• event: 原生事件对象

cell-click

单元格点击时触发

参数：

• row: 行数据
• column: 列配置
• cell: 单元格信息
• event: 原生事件对象

row-click

整行点击时触发

参数：

• row: 行数据
• column: 列配置
• cell: 单元格信息
• event: 原生事件对象

checkbox-change

复选框状态变化时触发

参数：

• params.records: 涉及的行记录数组
• params.row: 当前行数据（单个复选框时）
• params.column: 列配置
• params.checked: 选中状态

checkbox-all

全选复选框变化时触发

参数：

• params.records: 所有选中的行记录

cell-dblclick

单元格双击时触发

参数：

• params.row: 行数据
• params.column: 列配置

示例

<template>
  <!--  <el-table>
      <el-table-column label="title" prop="title"></el-table-column>
      <el-table-column label="name" prop="name"></el-table-column>
    </el-table>-->
  <div>VxeJsxTable</div>
  <vxe-jsx-table ref="tableRef" v-model:selection="selection" enable-drag enable-collapse-all :data="data"
                 :columns="columns"
                 :table-props="{
                    treeConfig: {
                      childrenField: 'children',
                      // isChild: 'isChild',      // 标识是否为子节点的字段名
                      // parentField: 'parent',   // 标识父节点引用的字段名（用于shift多选）
                    }
                 }"
                 default-expand-all
                 select-on-click expand-on-click
                 @selection-change="selectionChange"></vxe-jsx-table>
  <div>JsxTable</div>
  <jsx-table ref="tableRef" row-key="id" v-model:selection="selection" enable-drag enable-collapse-all :data="data"
             :columns="columns" default-expand-all
             select-on-click expand-on-click
             @selection-change="selectionChange"></jsx-table>
</template>
<script setup>

  import {ref} from 'vue'
  import {VxeJsxTable, JsxTable} from "hzzt-table";

  const tableRef = ref(null);
  const selection = ref([]);
  const data = ref([])

  const columns = ref([{
    type: 'checkbox',
    width: '50px',
  }, {
    type: 'index',
    width: '50px',
  }, {
    label: 'Title',
    prop: 'title',
    treeNode: true,
    type: 'tree',
  }, {
    label: 'Name',
    prop: 'name',
    children: [{
      label: 'Name1',
      prop: 'name1',
    }, {
      label: 'Name2',
      prop: 'name2',
    }]
  }, {
    label: 'Age',
    prop: 'age',
  }])

  function selectionChange(selection) {
    console.log(selection);
  }

  setTimeout(() => {
    data.value = [{
      id: 1,
      title: '标题1',
      name1: '姓名1-1',
      name2: '姓名1-2',
      age: '11',
    }, {
      id: 2,
      title: '标题2',
      name1: '姓名2-1',
      name2: '姓名2-2',
      age: '22',
      children: [{
        id: 22,
        title: '标题2-2',
        name1: '姓名2-1-1',
        name2: '姓名2-2-2',
        age: '22-2',
      }]
    }, {
      id: 3,
      title: '标题3',
      name1: '姓名3-1',
      name2: '姓名3-2',
      age: '33',
    }]
  }, 1000);

</script>

<style scoped>

</style>