hzzt-table 0.0.1

package/README.md

@@ -0,0 +1,238 @@
+# 说明
+
+hzzt-table封装了vxe-table和element-plus的el-table，兼容两者的API,使他们保持一致的用法
+
+注：内部没有引用vxe-table和el-table相关的样式，需要单独引用
+
+# 安装方式
+
+```shell
+npm install hzzt-table
+```
+
+```javascript
+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建快速选择           |
+| 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`: 列配置
+
+**示例**
+
+```vue3
+<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',
+                    }
+                 }"
+                 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>
+```