morghulis 1.0.22 → 1.0.23
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/README.md +148 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,154 @@ app.mount('#app')
|
|
|
32
32
|
|
|
33
33
|
## 组件
|
|
34
34
|
|
|
35
|
+
### MTable 表格组件
|
|
36
|
+
|
|
37
|
+
高度可定制的表格组件，适用于数据展示和操作。
|
|
38
|
+
|
|
39
|
+
#### 基本用法
|
|
40
|
+
|
|
41
|
+
```vue
|
|
42
|
+
<template>
|
|
43
|
+
<m-table
|
|
44
|
+
:view="tableView"
|
|
45
|
+
:loading="loading"
|
|
46
|
+
:buttons="tableButtons"
|
|
47
|
+
>
|
|
48
|
+
<!-- 自定义单元格 -->
|
|
49
|
+
<template #cell="{ field, row, prop }">
|
|
50
|
+
<m-cell
|
|
51
|
+
:field="field"
|
|
52
|
+
:bean="row"
|
|
53
|
+
:disabled="false"
|
|
54
|
+
></m-cell>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<!-- 自定义头部 -->
|
|
58
|
+
<template #header>
|
|
59
|
+
<h3>表格标题</h3>
|
|
60
|
+
</template>
|
|
61
|
+
|
|
62
|
+
<!-- 自定义底部 -->
|
|
63
|
+
<template #footer>
|
|
64
|
+
<el-pagination :total="total" />
|
|
65
|
+
</template>
|
|
66
|
+
</m-table>
|
|
67
|
+
</template>
|
|
68
|
+
|
|
69
|
+
<script setup>
|
|
70
|
+
import { ref } from 'vue'
|
|
71
|
+
|
|
72
|
+
// 表格视图定义
|
|
73
|
+
const tableView = ref({
|
|
74
|
+
fields: {
|
|
75
|
+
name: { label: '姓名', domain: 'string' },
|
|
76
|
+
age: { label: '年龄', domain: 'number' },
|
|
77
|
+
birthday: { label: '生日', domain: 'date' }
|
|
78
|
+
}
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
// 表格按钮定义
|
|
82
|
+
const tableButtons = [
|
|
83
|
+
{
|
|
84
|
+
title: '编辑',
|
|
85
|
+
type: 'primary',
|
|
86
|
+
handler: (row) => {
|
|
87
|
+
console.log('编辑行:', row)
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
title: '删除',
|
|
92
|
+
type: 'danger',
|
|
93
|
+
handler: (row) => {
|
|
94
|
+
console.log('删除行:', row)
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
]
|
|
98
|
+
|
|
99
|
+
const loading = ref(false)
|
|
100
|
+
const total = ref(100)
|
|
101
|
+
</script>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### 属性
|
|
105
|
+
|
|
106
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
107
|
+
| --- | --- | --- | --- |
|
|
108
|
+
| loading | boolean | false | 是否显示加载状态 |
|
|
109
|
+
| view | MetaView | - | 表格视图定义，包含字段配置 |
|
|
110
|
+
| buttons | MTableButton[] | [] | 表格行操作按钮配置 |
|
|
111
|
+
| columns | MTableColumn[] | [] | 自定义列配置 |
|
|
112
|
+
| sortableCallback | Function | - | 排序回调函数 |
|
|
113
|
+
| border | boolean | true | 是否显示边框 |
|
|
114
|
+
| fit | boolean | true | 列的宽度是否自撑开 |
|
|
115
|
+
| showHeader | boolean | true | 是否显示表头 |
|
|
116
|
+
| highlightCurrentRow | boolean | false | 是否高亮当前行 |
|
|
117
|
+
|
|
118
|
+
#### 插槽
|
|
119
|
+
|
|
120
|
+
| 插槽名 | 说明 |
|
|
121
|
+
| --- | --- |
|
|
122
|
+
| header | 表格顶部区域 |
|
|
123
|
+
| header-tool | 表格顶部工具区域 |
|
|
124
|
+
| footer | 表格底部区域 |
|
|
125
|
+
| footer-tool | 表格底部工具区域 |
|
|
126
|
+
| cell | 自定义单元格内容，参数包含 field, row, prop |
|
|
127
|
+
| pop-meta | 元数据弹出框内容 |
|
|
128
|
+
| pop-search | 搜索弹出框内容 |
|
|
129
|
+
| pop-field | 字段弹出框内容 |
|
|
130
|
+
| pop-cell | 单元格弹出框内容 |
|
|
131
|
+
| pop-index | 索引弹出框内容 |
|
|
132
|
+
|
|
133
|
+
#### 方法
|
|
134
|
+
|
|
135
|
+
| 方法名 | 参数 | 说明 |
|
|
136
|
+
| --- | --- | --- |
|
|
137
|
+
| getSelection | - | 获取当前选中的行 |
|
|
138
|
+
| setSelection | (rows) | 设置选中的行 |
|
|
139
|
+
| closePopover | - | 关闭当前打开的弹出框 |
|
|
140
|
+
|
|
141
|
+
### MCell 单元格组件
|
|
142
|
+
|
|
143
|
+
根据字段类型自动渲染不同类型的单元格组件。
|
|
144
|
+
|
|
145
|
+
#### 基本用法
|
|
146
|
+
|
|
147
|
+
```vue
|
|
148
|
+
<template>
|
|
149
|
+
<m-cell
|
|
150
|
+
:field="field"
|
|
151
|
+
:bean="dataItem"
|
|
152
|
+
:disabled="false"
|
|
153
|
+
></m-cell>
|
|
154
|
+
</template>
|
|
155
|
+
|
|
156
|
+
<script setup>
|
|
157
|
+
import { ref } from 'vue'
|
|
158
|
+
|
|
159
|
+
// 字段定义
|
|
160
|
+
const field = ref({
|
|
161
|
+
prop: 'name',
|
|
162
|
+
label: '姓名',
|
|
163
|
+
domain: 'string' // 可选值: string, number, boolean, date, time, select, color 等
|
|
164
|
+
})
|
|
165
|
+
|
|
166
|
+
// 数据项
|
|
167
|
+
const dataItem = ref({
|
|
168
|
+
name: '张三',
|
|
169
|
+
age: 30,
|
|
170
|
+
isActive: true
|
|
171
|
+
})
|
|
172
|
+
</script>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
#### 属性
|
|
176
|
+
|
|
177
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
178
|
+
| --- | --- | --- | --- |
|
|
179
|
+
| field | MetaField | - | 字段定义，包含prop、domain等属性 |
|
|
180
|
+
| bean | DataItem | - | 数据对象 |
|
|
181
|
+
| disabled | boolean | false | 是否禁用编辑 |
|
|
182
|
+
|
|
35
183
|
### MDialog 对话框组件
|
|
36
184
|
|
|
37
185
|
高度可定制的对话框组件，适用于数据库操作交互。
|