@cimom/ci-web-plugins-commom 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/VxeTablePro.md +137 -0
- package/package.json +3 -2
package/VxeTablePro.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# VxeTablePro 组件使用说明
|
|
2
|
+
|
|
3
|
+
## 简介
|
|
4
|
+
`VxeTablePro` 是基于 Vue3 + JavaScript 的表格插件模板，集成了 SCSS、CSS、TailwindCSS，适用于 NPM 发布。该组件对 [vxe-table](https://x-extends.github.io/vxe-table/) 进行了二次封装，支持统一扩展功能配置，便于业务快速集成和后续扩展。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install ci-web-plugins-commom-vxetable
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
或直接复制 `src/components/VxeTablePro` 目录到你的项目中。
|
|
13
|
+
|
|
14
|
+
## 使用方法
|
|
15
|
+
|
|
16
|
+
```vue
|
|
17
|
+
<script setup>
|
|
18
|
+
import VxeTablePro from 'ci-web-plugins-commom-vxetable/src/components/VxeTablePro'
|
|
19
|
+
|
|
20
|
+
const columns = [
|
|
21
|
+
{ field: 'name', title: '姓名' },
|
|
22
|
+
{ field: 'age', title: '年龄' }
|
|
23
|
+
]
|
|
24
|
+
const data = [
|
|
25
|
+
{ name: '张三', age: 18 },
|
|
26
|
+
{ name: '李四', age: 20 }
|
|
27
|
+
]
|
|
28
|
+
const proOptions = {
|
|
29
|
+
align: 'center' // 统一设置所有列的对齐方式
|
|
30
|
+
}
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<template>
|
|
34
|
+
<VxeTablePro :columns="columns" :data="data" :proOptions="proOptions" />
|
|
35
|
+
</template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 插槽支持
|
|
39
|
+
|
|
40
|
+
所有 `vxe-grid` 插槽均可透传，使用方式与原生一致：
|
|
41
|
+
|
|
42
|
+
```vue
|
|
43
|
+
<VxeTablePro ...>
|
|
44
|
+
<template #toolbar_buttons>
|
|
45
|
+
<button>自定义按钮</button>
|
|
46
|
+
</template>
|
|
47
|
+
</VxeTablePro>
|
|
48
|
+
```
|
|
49
|
+
```
|
|
50
|
+
<script setup>
|
|
51
|
+
// import VxeTablePro from '../../components/VxeTablePro/index.vue'
|
|
52
|
+
import { VxeTablePro } from '@/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
|
|
53
|
+
import { reactive,ref } from 'vue'
|
|
54
|
+
const gridOptions = reactive({
|
|
55
|
+
columns: [
|
|
56
|
+
{ type: 'seq', width: 70 },
|
|
57
|
+
{ field: 'name', title: 'Name111' ,slots: { header: 'header_name' }},
|
|
58
|
+
{ field: 'sex', title: 'Sex' },
|
|
59
|
+
{ field: 'age', title: 'Age' }
|
|
60
|
+
],
|
|
61
|
+
data: [
|
|
62
|
+
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
|
|
63
|
+
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
|
|
64
|
+
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
|
|
65
|
+
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
|
|
66
|
+
]
|
|
67
|
+
})
|
|
68
|
+
</script>
|
|
69
|
+
|
|
70
|
+
<template>
|
|
71
|
+
<VxeTablePro
|
|
72
|
+
:stripe="true"
|
|
73
|
+
:border="false"
|
|
74
|
+
:rowConfig="{
|
|
75
|
+
isCurrent: true,
|
|
76
|
+
isHover: true
|
|
77
|
+
}"
|
|
78
|
+
:columns="gridOptions.columns"
|
|
79
|
+
:data="gridOptions.data"
|
|
80
|
+
:proOptions="{ align: 'left' }"
|
|
81
|
+
>
|
|
82
|
+
<template #top>
|
|
83
|
+
hello top template
|
|
84
|
+
</template>
|
|
85
|
+
<template #header_name>
|
|
86
|
+
<div class="first-col">
|
|
87
|
+
<div class="first-col-top">名称1</div>
|
|
88
|
+
<div class="first-col-bottom">序号2</div>
|
|
89
|
+
</div>
|
|
90
|
+
</template>
|
|
91
|
+
<template #bottom>
|
|
92
|
+
hello bottom template
|
|
93
|
+
</template>
|
|
94
|
+
</VxeTablePro>
|
|
95
|
+
|
|
96
|
+
</template>
|
|
97
|
+
|
|
98
|
+
<style scoped>
|
|
99
|
+
|
|
100
|
+
</style>
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
## 属性说明
|
|
104
|
+
|
|
105
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
106
|
+
| ----------- | -------------------------- | ------- | -------- |
|
|
107
|
+
| columns | 表格列配置 | Array | [] |
|
|
108
|
+
| data | 表格数据 | Array | [] |
|
|
109
|
+
| proOptions | 扩展功能配置（如统一对齐） | Object | {} |
|
|
110
|
+
| ... | 透传 vxe-grid 所有原有属性 | | |
|
|
111
|
+
|
|
112
|
+
### proOptions 扩展
|
|
113
|
+
- `align`：统一设置所有列的对齐方式（如 'left'、'center'、'right'）。
|
|
114
|
+
|
|
115
|
+
## 后续功能扩展建议
|
|
116
|
+
|
|
117
|
+
1. **更多 proOptions 扩展**：
|
|
118
|
+
- 支持统一设置列宽、表头样式、排序、筛选等。
|
|
119
|
+
- 支持自定义渲染函数、格式化函数等。
|
|
120
|
+
2. **类型增强**：
|
|
121
|
+
- 完善 JavaScript 类型定义，提升开发体验。
|
|
122
|
+
3. **主题与样式**：
|
|
123
|
+
- 支持多主题切换，集成更多 TailwindCSS 实用样式。
|
|
124
|
+
4. **国际化支持**：
|
|
125
|
+
- 提供多语言配置，适配不同地区需求。
|
|
126
|
+
5. **事件透传与增强**：
|
|
127
|
+
- 支持更多事件的透传与自定义事件扩展。
|
|
128
|
+
6. **性能优化**：
|
|
129
|
+
- 针对大数据量表格进行虚拟滚动等优化。
|
|
130
|
+
|
|
131
|
+
## 贡献与反馈
|
|
132
|
+
|
|
133
|
+
欢迎提交 issue 或 PR，提出你的建议和需求！
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
> 本项目为 Vue3+JavaScript 插件模板，适用于 NPM 发布，欢迎二次开发和定制。
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cimom/ci-web-plugins-commom",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Andy Huang",
|
|
7
7
|
"email": "57237184@qq.com"
|
|
8
8
|
},
|
|
9
9
|
"files": [
|
|
10
|
-
"dist"
|
|
10
|
+
"dist",
|
|
11
|
+
"*.md"
|
|
11
12
|
],
|
|
12
13
|
"type": "module",
|
|
13
14
|
"scripts": {
|