@scenetechnology/cj_iview_table 0.0.63 → 0.0.65
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/CHANGELOG.md +16 -16
- package/README.en.md +36 -36
- package/README.md +165 -165
- package/dist/cj_iview_table.common.js +520 -354
- package/dist/cj_iview_table.common.js.map +1 -1
- package/dist/cj_iview_table.css +2 -2
- package/dist/cj_iview_table.umd.js +520 -354
- package/dist/cj_iview_table.umd.js.map +1 -1
- package/dist/cj_iview_table.umd.min.js +4 -4
- package/dist/cj_iview_table.umd.min.js.map +1 -1
- package/package.json +79 -74
package/CHANGELOG.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# 更新日志
|
|
2
|
-
### 修复
|
|
3
|
-
- 添加级联组件
|
|
4
|
-
|
|
5
|
-
## 0.0.8 (2025-4-8 15:50:09)
|
|
6
|
-
|
|
7
|
-
## 0.0.2 (2023-10-15)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
### 修复
|
|
11
|
-
- 修复了表格tooplip排序问题
|
|
12
|
-
- 解决了tooplip浮动问题
|
|
13
|
-
|
|
14
|
-
## 0.0.1 (2023-10-01)
|
|
15
|
-
|
|
16
|
-
### 初始版本
|
|
1
|
+
# 更新日志
|
|
2
|
+
### 修复
|
|
3
|
+
- 添加级联组件
|
|
4
|
+
|
|
5
|
+
## 0.0.8 (2025-4-8 15:50:09)
|
|
6
|
+
|
|
7
|
+
## 0.0.2 (2023-10-15)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### 修复
|
|
11
|
+
- 修复了表格tooplip排序问题
|
|
12
|
+
- 解决了tooplip浮动问题
|
|
13
|
+
|
|
14
|
+
## 0.0.1 (2023-10-01)
|
|
15
|
+
|
|
16
|
+
### 初始版本
|
|
17
17
|
- 初始发布
|
package/README.en.md
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
# cj_iview_table
|
|
2
|
-
|
|
3
|
-
#### Description
|
|
4
|
-
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
|
|
5
|
-
|
|
6
|
-
#### Software Architecture
|
|
7
|
-
Software architecture description
|
|
8
|
-
|
|
9
|
-
#### Installation
|
|
10
|
-
|
|
11
|
-
1. xxxx
|
|
12
|
-
2. xxxx
|
|
13
|
-
3. xxxx
|
|
14
|
-
|
|
15
|
-
#### Instructions
|
|
16
|
-
|
|
17
|
-
1. xxxx
|
|
18
|
-
2. xxxx
|
|
19
|
-
3. xxxx
|
|
20
|
-
|
|
21
|
-
#### Contribution
|
|
22
|
-
|
|
23
|
-
1. Fork the repository
|
|
24
|
-
2. Create Feat_xxx branch
|
|
25
|
-
3. Commit your code
|
|
26
|
-
4. Create Pull Request
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
#### Gitee Feature
|
|
30
|
-
|
|
31
|
-
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
|
32
|
-
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
|
33
|
-
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
|
34
|
-
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
|
35
|
-
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
|
36
|
-
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
|
1
|
+
# cj_iview_table
|
|
2
|
+
|
|
3
|
+
#### Description
|
|
4
|
+
{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
|
|
5
|
+
|
|
6
|
+
#### Software Architecture
|
|
7
|
+
Software architecture description
|
|
8
|
+
|
|
9
|
+
#### Installation
|
|
10
|
+
|
|
11
|
+
1. xxxx
|
|
12
|
+
2. xxxx
|
|
13
|
+
3. xxxx
|
|
14
|
+
|
|
15
|
+
#### Instructions
|
|
16
|
+
|
|
17
|
+
1. xxxx
|
|
18
|
+
2. xxxx
|
|
19
|
+
3. xxxx
|
|
20
|
+
|
|
21
|
+
#### Contribution
|
|
22
|
+
|
|
23
|
+
1. Fork the repository
|
|
24
|
+
2. Create Feat_xxx branch
|
|
25
|
+
3. Commit your code
|
|
26
|
+
4. Create Pull Request
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
#### Gitee Feature
|
|
30
|
+
|
|
31
|
+
1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
|
|
32
|
+
2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
|
|
33
|
+
3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
|
|
34
|
+
4. The most valuable open source project [GVP](https://gitee.com/gvp)
|
|
35
|
+
5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
|
|
36
|
+
6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
|
package/README.md
CHANGED
|
@@ -1,165 +1,165 @@
|
|
|
1
|
-
# cj_iview_table
|
|
2
|
-
|
|
3
|
-
## 项目概述
|
|
4
|
-
|
|
5
|
-
cj_iview_table 是一个基于 Vue.js 和 ViewUI (原 iView) 的表格组件项目。该项目提供了增强的表格功能，简化了表格的使用和配置。
|
|
6
|
-
|
|
7
|
-
## 安装说明
|
|
8
|
-
|
|
9
|
-
### 环境要求
|
|
10
|
-
- Node.js (建议 v12 或更高版本)
|
|
11
|
-
- Yarn 包管理器
|
|
12
|
-
|
|
13
|
-
### 安装步骤
|
|
14
|
-
|
|
15
|
-
1. 克隆或下载项目代码
|
|
16
|
-
2. 在项目根目录运行以下命令安装依赖：
|
|
17
|
-
```
|
|
18
|
-
npm install @scenetechnology/cj_iview_table --legacy-peer-deps
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
### 引入
|
|
22
|
-
|
|
23
|
-
1. 在main.js中 引入UI库 引入UI样式
|
|
24
|
-
```
|
|
25
|
-
import cj_iview_table from '@scenetechnology/cj_iview_table'
|
|
26
|
-
import '@scenetechnology/cj_iview_table/dist/cj_iview_table.css'
|
|
27
|
-
Vue.use(cj_iview_table)
|
|
28
|
-
```
|
|
29
|
-
2.在页面使用
|
|
30
|
-
```
|
|
31
|
-
<cj_iview_table :border="true" ref="proTable" :tool-bar="toolBar" @onToolBar="onToolBar" :request="getTableData" :columns="columns" maxHeight='550' :filterLabelWidth="100" ></cj_iview_table>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
### Customize configuration
|
|
36
|
-
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
37
|
-
# Pro Table 组件文档
|
|
38
|
-
|
|
39
|
-
## 组件介绍
|
|
40
|
-
cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、自定义列等高级特性。
|
|
41
|
-
|
|
42
|
-
## 基础用法
|
|
43
|
-
```vue
|
|
44
|
-
<cj_iview_table
|
|
45
|
-
:columns="columns"
|
|
46
|
-
:data="tableData"
|
|
47
|
-
:loading="loading"
|
|
48
|
-
:border="true"
|
|
49
|
-
/>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## 属性配置
|
|
53
|
-
|
|
54
|
-
### 基础属性
|
|
55
|
-
| 属性名 | 类型 | 默认值 | 说明 |
|
|
56
|
-
|--------|------|--------|------|
|
|
57
|
-
| columns | Array | [] | 表格列配置项 |
|
|
58
|
-
| data | Object | - | 表格数据源 |
|
|
59
|
-
| loading | Boolean | false | 加载状态 |
|
|
60
|
-
| border | Boolean | false | 是否显示边框 |
|
|
61
|
-
| height | String | - | 表格高度 |
|
|
62
|
-
| maxHeight | String | - | 最大高度 |
|
|
63
|
-
| toolBar | Array/Boolean | true | 工具栏配置 |
|
|
64
|
-
| defaultSize | Number | - | 默认分页大小 |
|
|
65
|
-
| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
|
|
66
|
-
| filterLabelWidth | Number | 80 | 筛选标签宽度 |
|
|
67
|
-
| fields | Array | [] | 导出数据时需要包含的属性名 |
|
|
68
|
-
|
|
69
|
-
### 列配置项
|
|
70
|
-
每个column支持以下属性：
|
|
71
|
-
|
|
72
|
-
| 属性名 | 类型 | 说明 |
|
|
73
|
-
|--------|------|------|
|
|
74
|
-
| title | String | 列标题 |
|
|
75
|
-
| key | String | 列数据字段 |
|
|
76
|
-
| filter | Boolean | 是否可筛选 |
|
|
77
|
-
| filterLable | String | 筛选项标签 |
|
|
78
|
-
| valueType | String | 值类型(text/select/date/daterange/datetime/datetimerange/year) |
|
|
79
|
-
| valueEnum | Array | 选择项数据(valueType为select时有效) |
|
|
80
|
-
| hideInTable | Boolean | 是否在表格中隐藏 |
|
|
81
|
-
| slot | Boolean | 是否使用自定义插槽 |
|
|
82
|
-
|
|
83
|
-
## 事件
|
|
84
|
-
| 事件名 | 说明 | 回调参数 |
|
|
85
|
-
|--------|------|----------|
|
|
86
|
-
| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
|
|
87
|
-
|
|
88
|
-
## 插槽
|
|
89
|
-
| 插槽名 | 说明 |
|
|
90
|
-
|--------|------|
|
|
91
|
-
| toolbar | 自定义工具栏 |
|
|
92
|
-
| [column.key] | 自定义列内容渲染 |
|
|
93
|
-
|
|
94
|
-
## 高级特性
|
|
95
|
-
|
|
96
|
-
### 1. 筛选功能
|
|
97
|
-
组件支持多种筛选类型：
|
|
98
|
-
- 文本输入筛选
|
|
99
|
-
- 下拉选择筛选
|
|
100
|
-
- 日期选择筛选
|
|
101
|
-
|
|
102
|
-
### 2. 列设置
|
|
103
|
-
支持通过列设置功能动态控制表格显示列：
|
|
104
|
-
- 列显示/隐藏
|
|
105
|
-
- 列排序
|
|
106
|
-
- 列固定
|
|
107
|
-
|
|
108
|
-
### 3. 数据请求
|
|
109
|
-
支持两种数据加载方式：
|
|
110
|
-
- 通过data属性直接传入数据
|
|
111
|
-
- 通过request函数异步加载数据
|
|
112
|
-
|
|
113
|
-
## 使用示例
|
|
114
|
-
|
|
115
|
-
```vue
|
|
116
|
-
<template>
|
|
117
|
-
<cj_iview_table
|
|
118
|
-
:columns="columns"
|
|
119
|
-
:request="loadData"
|
|
120
|
-
:toolBar="toolBarConfig"
|
|
121
|
-
>
|
|
122
|
-
<template #toolbar>
|
|
123
|
-
<Button type="primary">自定义按钮</Button>
|
|
124
|
-
</template>
|
|
125
|
-
</cj_iview_table>
|
|
126
|
-
</template>
|
|
127
|
-
|
|
128
|
-
<script>
|
|
129
|
-
export default {
|
|
130
|
-
data() {
|
|
131
|
-
return {
|
|
132
|
-
columns: [
|
|
133
|
-
{
|
|
134
|
-
title: '名称',
|
|
135
|
-
key: 'name',
|
|
136
|
-
filter: true
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
title: '状态',
|
|
140
|
-
key: 'status',
|
|
141
|
-
valueType: 'select',
|
|
142
|
-
valueEnum: [
|
|
143
|
-
{ value: 1, label: '正常' },
|
|
144
|
-
{ value: 0, label: '禁用' }
|
|
145
|
-
]
|
|
146
|
-
}
|
|
147
|
-
],
|
|
148
|
-
toolBarConfig: [
|
|
149
|
-
{ text: '新增', type: 'primary' }
|
|
150
|
-
]
|
|
151
|
-
}
|
|
152
|
-
},
|
|
153
|
-
methods: {
|
|
154
|
-
async loadData(params) {
|
|
155
|
-
// 实现数据加载逻辑
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
</script>
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
## 注意事项
|
|
163
|
-
1. 使用request函数加载数据时，返回的数据格式必须包含data和total字段
|
|
164
|
-
2. 列的key值必须唯一
|
|
165
|
-
3. 使用列设置功能时，必须给每列配置唯一的title值
|
|
1
|
+
# cj_iview_table
|
|
2
|
+
|
|
3
|
+
## 项目概述
|
|
4
|
+
|
|
5
|
+
cj_iview_table 是一个基于 Vue.js 和 ViewUI (原 iView) 的表格组件项目。该项目提供了增强的表格功能，简化了表格的使用和配置。
|
|
6
|
+
|
|
7
|
+
## 安装说明
|
|
8
|
+
|
|
9
|
+
### 环境要求
|
|
10
|
+
- Node.js (建议 v12 或更高版本)
|
|
11
|
+
- Yarn 包管理器
|
|
12
|
+
|
|
13
|
+
### 安装步骤
|
|
14
|
+
|
|
15
|
+
1. 克隆或下载项目代码
|
|
16
|
+
2. 在项目根目录运行以下命令安装依赖：
|
|
17
|
+
```
|
|
18
|
+
npm install @scenetechnology/cj_iview_table --legacy-peer-deps
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### 引入
|
|
22
|
+
|
|
23
|
+
1. 在main.js中 引入UI库 引入UI样式
|
|
24
|
+
```
|
|
25
|
+
import cj_iview_table from '@scenetechnology/cj_iview_table'
|
|
26
|
+
import '@scenetechnology/cj_iview_table/dist/cj_iview_table.css'
|
|
27
|
+
Vue.use(cj_iview_table)
|
|
28
|
+
```
|
|
29
|
+
2.在页面使用
|
|
30
|
+
```
|
|
31
|
+
<cj_iview_table :border="true" ref="proTable" :tool-bar="toolBar" @onToolBar="onToolBar" :request="getTableData" :columns="columns" maxHeight='550' :filterLabelWidth="100" ></cj_iview_table>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### Customize configuration
|
|
36
|
+
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
37
|
+
# Pro Table 组件文档
|
|
38
|
+
|
|
39
|
+
## 组件介绍
|
|
40
|
+
cj_iview_table 是一个功能强大的表格组件，支持筛选、排序、自定义列等高级特性。
|
|
41
|
+
|
|
42
|
+
## 基础用法
|
|
43
|
+
```vue
|
|
44
|
+
<cj_iview_table
|
|
45
|
+
:columns="columns"
|
|
46
|
+
:data="tableData"
|
|
47
|
+
:loading="loading"
|
|
48
|
+
:border="true"
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 属性配置
|
|
53
|
+
|
|
54
|
+
### 基础属性
|
|
55
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
56
|
+
|--------|------|--------|------|
|
|
57
|
+
| columns | Array | [] | 表格列配置项 |
|
|
58
|
+
| data | Object | - | 表格数据源 |
|
|
59
|
+
| loading | Boolean | false | 加载状态 |
|
|
60
|
+
| border | Boolean | false | 是否显示边框 |
|
|
61
|
+
| height | String | - | 表格高度 |
|
|
62
|
+
| maxHeight | String | - | 最大高度 |
|
|
63
|
+
| toolBar | Array/Boolean | true | 工具栏配置 |
|
|
64
|
+
| defaultSize | Number | - | 默认分页大小 |
|
|
65
|
+
| filterGridSpan | Number | 6 | 筛选栏栅格跨度 |
|
|
66
|
+
| filterLabelWidth | Number | 80 | 筛选标签宽度 |
|
|
67
|
+
| fields | Array | [] | 导出数据时需要包含的属性名 |
|
|
68
|
+
|
|
69
|
+
### 列配置项
|
|
70
|
+
每个column支持以下属性：
|
|
71
|
+
|
|
72
|
+
| 属性名 | 类型 | 说明 |
|
|
73
|
+
|--------|------|------|
|
|
74
|
+
| title | String | 列标题 |
|
|
75
|
+
| key | String | 列数据字段 |
|
|
76
|
+
| filter | Boolean | 是否可筛选 |
|
|
77
|
+
| filterLable | String | 筛选项标签 |
|
|
78
|
+
| valueType | String | 值类型(text/select/date/daterange/datetime/datetimerange/year) |
|
|
79
|
+
| valueEnum | Array | 选择项数据(valueType为select时有效) |
|
|
80
|
+
| hideInTable | Boolean | 是否在表格中隐藏 |
|
|
81
|
+
| slot | Boolean | 是否使用自定义插槽 |
|
|
82
|
+
|
|
83
|
+
## 事件
|
|
84
|
+
| 事件名 | 说明 | 回调参数 |
|
|
85
|
+
|--------|------|----------|
|
|
86
|
+
| on-change | 分页、排序等变化时触发 | (pagination, filters, sorter) |
|
|
87
|
+
|
|
88
|
+
## 插槽
|
|
89
|
+
| 插槽名 | 说明 |
|
|
90
|
+
|--------|------|
|
|
91
|
+
| toolbar | 自定义工具栏 |
|
|
92
|
+
| [column.key] | 自定义列内容渲染 |
|
|
93
|
+
|
|
94
|
+
## 高级特性
|
|
95
|
+
|
|
96
|
+
### 1. 筛选功能
|
|
97
|
+
组件支持多种筛选类型：
|
|
98
|
+
- 文本输入筛选
|
|
99
|
+
- 下拉选择筛选
|
|
100
|
+
- 日期选择筛选
|
|
101
|
+
|
|
102
|
+
### 2. 列设置
|
|
103
|
+
支持通过列设置功能动态控制表格显示列：
|
|
104
|
+
- 列显示/隐藏
|
|
105
|
+
- 列排序
|
|
106
|
+
- 列固定
|
|
107
|
+
|
|
108
|
+
### 3. 数据请求
|
|
109
|
+
支持两种数据加载方式：
|
|
110
|
+
- 通过data属性直接传入数据
|
|
111
|
+
- 通过request函数异步加载数据
|
|
112
|
+
|
|
113
|
+
## 使用示例
|
|
114
|
+
|
|
115
|
+
```vue
|
|
116
|
+
<template>
|
|
117
|
+
<cj_iview_table
|
|
118
|
+
:columns="columns"
|
|
119
|
+
:request="loadData"
|
|
120
|
+
:toolBar="toolBarConfig"
|
|
121
|
+
>
|
|
122
|
+
<template #toolbar>
|
|
123
|
+
<Button type="primary">自定义按钮</Button>
|
|
124
|
+
</template>
|
|
125
|
+
</cj_iview_table>
|
|
126
|
+
</template>
|
|
127
|
+
|
|
128
|
+
<script>
|
|
129
|
+
export default {
|
|
130
|
+
data() {
|
|
131
|
+
return {
|
|
132
|
+
columns: [
|
|
133
|
+
{
|
|
134
|
+
title: '名称',
|
|
135
|
+
key: 'name',
|
|
136
|
+
filter: true
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
title: '状态',
|
|
140
|
+
key: 'status',
|
|
141
|
+
valueType: 'select',
|
|
142
|
+
valueEnum: [
|
|
143
|
+
{ value: 1, label: '正常' },
|
|
144
|
+
{ value: 0, label: '禁用' }
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
],
|
|
148
|
+
toolBarConfig: [
|
|
149
|
+
{ text: '新增', type: 'primary' }
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
},
|
|
153
|
+
methods: {
|
|
154
|
+
async loadData(params) {
|
|
155
|
+
// 实现数据加载逻辑
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
</script>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## 注意事项
|
|
163
|
+
1. 使用request函数加载数据时，返回的数据格式必须包含data和total字段
|
|
164
|
+
2. 列的key值必须唯一
|
|
165
|
+
3. 使用列设置功能时，必须给每列配置唯一的title值
|