Commit ba3dfc720d5ba822460bdea503461354ef4d3b3c
1 parent
9d9622cd
Exists in
master
and in
1 other branch
feat: 更新表格文档
Showing
2 changed files
with
290 additions
and
26 deletions
Show diff stats
examples/views/docs/component/schema-table.md
| @@ -130,11 +130,13 @@ export default { | @@ -130,11 +130,13 @@ export default { | ||
| 130 | </template> | 130 | </template> |
| 131 | </el-table-column> | 131 | </el-table-column> |
| 132 | </template> | 132 | </template> |
| 133 | - <el-table-column label="右侧的列" width="120"> | ||
| 134 | - <template #default="{ $index }"> | ||
| 135 | - 第{{ $index + 1 }}行 | ||
| 136 | - </template> | ||
| 137 | - </el-table-column> | 133 | + <template #right> |
| 134 | + <el-table-column label="右侧的列" width="120"> | ||
| 135 | + <template #default="{ $index }"> | ||
| 136 | + 第{{ $index + 1 }}行 | ||
| 137 | + </template> | ||
| 138 | + </el-table-column> | ||
| 139 | + </template> | ||
| 138 | </z-schema-table> | 140 | </z-schema-table> |
| 139 | </template> | 141 | </template> |
| 140 | 142 |
examples/views/docs/component/table.md
| @@ -2,21 +2,23 @@ | @@ -2,21 +2,23 @@ | ||
| 2 | 2 | ||
| 3 | 拓展ElementUI的`el-table` | 3 | 拓展ElementUI的`el-table` |
| 4 | 4 | ||
| 5 | -## 基础用法 | 5 | +## 原始用法 |
| 6 | 6 | ||
| 7 | 基本参数与ElementUI的`el-table`相同。 | 7 | 基本参数与ElementUI的`el-table`相同。 |
| 8 | 8 | ||
| 9 | -::: snippet 支持来自表单的`size`继承 | 9 | +::: snippet 相当于直接使用`el-table` |
| 10 | 10 | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | - <el-form size="mini"> | ||
| 14 | - <z-table :data="tableData" border> | ||
| 15 | - <el-table-column prop="name" label="姓名"></el-table-column> | ||
| 16 | - <el-table-column prop="age" label="年龄"></el-table-column> | ||
| 17 | - <el-table-column prop="gender" label="性别"></el-table-column> | ||
| 18 | - </z-table> | ||
| 19 | - </el-form> | 13 | + <z-table size="mini" :data="tableData" border> |
| 14 | + <el-table-column prop="name" label="姓名" /> | ||
| 15 | + <el-table-column prop="age" label="年龄" /> | ||
| 16 | + <el-table-column prop="gender" label="性别"> | ||
| 17 | + <template #default="{ row }"> | ||
| 18 | + <el-tag size="mini">{{ row.gender }}</el-tag> | ||
| 19 | + </template> | ||
| 20 | + </el-table-column> | ||
| 21 | + </z-table> | ||
| 20 | </template> | 22 | </template> |
| 21 | 23 | ||
| 22 | <script> | 24 | <script> |
| @@ -76,26 +78,37 @@ export default { | @@ -76,26 +78,37 @@ export default { | ||
| 76 | 78 | ||
| 77 | ## 追加列 | 79 | ## 追加列 |
| 78 | 80 | ||
| 79 | -使用配置项时，**新增的列**则默认追加在**配置项列**之后，使用`left`插槽可在表格的最左侧插入列，顺序在**配置项列**之前 | 81 | +使用配置项时，可以在配置项的左右两边追加列 |
| 80 | 82 | ||
| 81 | -::: snippet 设置`columns`配置表格列，插槽`header-列字段名`可自定义表头的内容，插槽`cell-列字段名`可自定义列单元格的内容。 | 83 | +::: snippet 使用`left`插槽在表格配置项的左侧插入列，使用`right`插槽在表格配置项的右侧插入列。 |
| 82 | 84 | ||
| 83 | ```html | 85 | ```html |
| 84 | <template> | 86 | <template> |
| 85 | <z-table :data="tableData" border size="small" :columns="columns"> | 87 | <z-table :data="tableData" border size="small" :columns="columns"> |
| 86 | - <template #left> | 88 | + <template #prepend> |
| 87 | <el-table-column type="selection" width="40"></el-table-column> | 89 | <el-table-column type="selection" width="40"></el-table-column> |
| 90 | + </template> | ||
| 91 | + <template #left> | ||
| 88 | <el-table-column label="左侧的列"> | 92 | <el-table-column label="左侧的列"> |
| 89 | <template #default="{ $index }"> | 93 | <template #default="{ $index }"> |
| 90 | - 内容 {{ $index }} | 94 | + 左侧内容 {{ $index }} |
| 95 | + </template> | ||
| 96 | + </el-table-column> | ||
| 97 | + </template> | ||
| 98 | + <template #right> | ||
| 99 | + <el-table-column label="右侧的列"> | ||
| 100 | + <template #default="{ $index }"> | ||
| 101 | + 右侧内容 {{ $index }} | ||
| 102 | + </template> | ||
| 103 | + </el-table-column> | ||
| 104 | + </template> | ||
| 105 | + <template #append> | ||
| 106 | + <el-table-column label="后置列" width="80"> | ||
| 107 | + <template #default> | ||
| 108 | + <el-button type="text">编辑</el-button> | ||
| 91 | </template> | 109 | </template> |
| 92 | </el-table-column> | 110 | </el-table-column> |
| 93 | </template> | 111 | </template> |
| 94 | - <el-table-column label="新增的列" width="80"> | ||
| 95 | - <template #default> | ||
| 96 | - <el-button type="text">编辑</el-button> | ||
| 97 | - </template> | ||
| 98 | - </el-table-column> | ||
| 99 | </z-table> | 112 | </z-table> |
| 100 | </template> | 113 | </template> |
| 101 | 114 | ||
| @@ -121,7 +134,9 @@ export default { | @@ -121,7 +134,9 @@ export default { | ||
| 121 | 134 | ||
| 122 | ::: | 135 | ::: |
| 123 | 136 | ||
| 124 | -## 可编辑表格 | 137 | +## 可编辑表格（即将废弃） |
| 138 | + | ||
| 139 | +> 由于创建时间较早且性能不佳，在2.0.1版本之后不推荐使用，并在若干版本之后废弃 | ||
| 125 | 140 | ||
| 126 | 一般用于表格的静态数据编辑，设置`editable`开启可编辑模式，设置`clickable`开启双击编辑 | 141 | 一般用于表格的静态数据编辑，设置`editable`开启可编辑模式，设置`clickable`开启双击编辑 |
| 127 | 142 | ||
| @@ -188,6 +203,254 @@ export default { | @@ -188,6 +203,254 @@ export default { | ||
| 188 | 203 | ||
| 189 | ::: | 204 | ::: |
| 190 | 205 | ||
| 206 | +## 编辑器 | ||
| 207 | + | ||
| 208 | +表格单元格可通过`editor`参数来配置编辑器，默认与表格数据值双向绑定 | ||
| 209 | + | ||
| 210 | +::: snippet 设置`items`配置编辑器列 | ||
| 211 | + | ||
| 212 | +```html | ||
| 213 | +<template> | ||
| 214 | + <div> | ||
| 215 | + <div>{{ tableData }}</div> | ||
| 216 | + <z-table :data="tableData" border size="small" :columns="columns" :editor="editor" /> | ||
| 217 | + </div> | ||
| 218 | +</template> | ||
| 219 | + | ||
| 220 | +<script> | ||
| 221 | +export default { | ||
| 222 | + data() { | ||
| 223 | + return { | ||
| 224 | + tableData: [ | ||
| 225 | + { name: '张三', age: '31', gender: '男' }, | ||
| 226 | + { name: '李四', age: '27', gender: '女' }, | ||
| 227 | + { name: '王五', age: '16', gender: '男' }, | ||
| 228 | + ], | ||
| 229 | + columns: [ | ||
| 230 | + { prop: 'name', label: '姓名' }, | ||
| 231 | + { prop: 'age', label: '年龄' }, | ||
| 232 | + { prop: 'gender', label: '性别' }, | ||
| 233 | + ], | ||
| 234 | + editor: { | ||
| 235 | + items: [ | ||
| 236 | + { is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true } }, | ||
| 237 | + { is: 'el-input-number', prop: 'age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true } }, | ||
| 238 | + ] | ||
| 239 | + } | ||
| 240 | + }; | ||
| 241 | + }, | ||
| 242 | +} | ||
| 243 | +</script> | ||
| 244 | +``` | ||
| 245 | + | ||
| 246 | +::: | ||
| 247 | + | ||
| 248 | +## 编辑器对象取值与赋值 | ||
| 249 | + | ||
| 250 | +编辑器可对深层对象进行双向绑定，通过`deep`参数来配置 | ||
| 251 | + | ||
| 252 | +::: snippet 表格配置项也支持对象的深层取值 | ||
| 253 | + | ||
| 254 | +```html | ||
| 255 | +<template> | ||
| 256 | + <div> | ||
| 257 | + <div>{{ tableData }}</div> | ||
| 258 | + <z-table :data="tableData" border size="small" :columns="columns" :editor="editor" /> | ||
| 259 | + </div> | ||
| 260 | +</template> | ||
| 261 | + | ||
| 262 | +<script> | ||
| 263 | +export default { | ||
| 264 | + data() { | ||
| 265 | + return { | ||
| 266 | + tableData: [ | ||
| 267 | + { name: '张三', info: { age: 27, gender: '女', district: { city: '上海市' } } }, | ||
| 268 | + { name: '李四', info: { age: 19, gender: '男', district: { city: '北京市' } } }, | ||
| 269 | + ], | ||
| 270 | + columns: [ | ||
| 271 | + { prop: 'name', label: '姓名' }, | ||
| 272 | + { prop: 'info.age', label: '年龄' }, | ||
| 273 | + { prop: 'info.gender', label: '性别' }, | ||
| 274 | + ], | ||
| 275 | + editor: { | ||
| 276 | + deep: true, | ||
| 277 | + items: [ | ||
| 278 | + { is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true } }, | ||
| 279 | + { is: 'el-input-number', prop: 'info.age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true } }, | ||
| 280 | + ] | ||
| 281 | + } | ||
| 282 | + }; | ||
| 283 | + }, | ||
| 284 | +} | ||
| 285 | +</script> | ||
| 286 | +``` | ||
| 287 | + | ||
| 288 | +::: | ||
| 289 | + | ||
| 290 | +## 编辑器条件渲染 | ||
| 291 | + | ||
| 292 | +编辑器支持通过行内的某些数值来进行条件渲染，支持配置`if`来进行条件渲染。 | ||
| 293 | + | ||
| 294 | +::: snippet `if`同时支持**boolean**和**function**两种类型，其中**function**可拿到当前行数据 | ||
| 295 | + | ||
| 296 | +```html | ||
| 297 | +<template> | ||
| 298 | + <z-table :data="tableData" border size="small" :columns="columns" :editor="editor" /> | ||
| 299 | +</template> | ||
| 300 | + | ||
| 301 | +<script> | ||
| 302 | +export default { | ||
| 303 | + data() { | ||
| 304 | + return { | ||
| 305 | + tableData: [ | ||
| 306 | + { name: '张三', info: { age: 27, gender: '女', district: { city: '上海市' } } }, | ||
| 307 | + { name: '李四', info: { age: 19, gender: '男', district: { city: '北京市' } } }, | ||
| 308 | + ], | ||
| 309 | + columns: [ | ||
| 310 | + { prop: 'name', label: '姓名' }, | ||
| 311 | + { prop: 'info.age', label: '年龄' }, | ||
| 312 | + { prop: 'info.gender', label: '性别' }, | ||
| 313 | + ], | ||
| 314 | + editor: { | ||
| 315 | + deep: true, | ||
| 316 | + items: [ | ||
| 317 | + { is: 'el-input', prop: 'name', attrs: { placeholder: '请输入' }, props: { size: 'mini', clearable: true }, if: ({ row, index }) => index > 0 }, | ||
| 318 | + { is: 'el-input-number', prop: 'info.age', attrs: { style: 'width: 100%' }, props: { size: 'mini', clearable: true }, if: false }, | ||
| 319 | + ] | ||
| 320 | + } | ||
| 321 | + }; | ||
| 322 | + }, | ||
| 323 | +} | ||
| 324 | +</script> | ||
| 325 | +``` | ||
| 326 | + | ||
| 327 | +::: | ||
| 328 | + | ||
| 329 | +## 编辑器条件渲染扩展 | ||
| 330 | + | ||
| 331 | +除了`if`之外，`props`、`attrs`、`on`都支持条件渲染 | ||
| 332 | + | ||
| 333 | +::: snippet 同时支持**boolean**和**function**两种类型，其中**function**可拿到当前行数据 | ||
| 334 | + | ||
| 335 | +```html | ||
| 336 | +<template> | ||
| 337 | + <z-table :data="tableData" border size="small" :columns="columns" :editor="editor" /> | ||
| 338 | +</template> | ||
| 339 | + | ||
| 340 | +<script> | ||
| 341 | +export default { | ||
| 342 | + data() { | ||
| 343 | + return { | ||
| 344 | + tableData: [ | ||
| 345 | + { name: '', info: { age: 18, gender: '女', district: { city: '上海市' } } }, | ||
| 346 | + { name: '', info: { age: 27, gender: '男', district: { city: '北京市' } } }, | ||
| 347 | + ], | ||
| 348 | + columns: [ | ||
| 349 | + { prop: 'name', label: '姓名' }, | ||
| 350 | + { prop: 'info.age', label: '年龄' }, | ||
| 351 | + { prop: 'info.gender', label: '性别' }, | ||
| 352 | + ], | ||
| 353 | + editor: { | ||
| 354 | + deep: true, | ||
| 355 | + items: [ | ||
| 356 | + { is: 'el-input', prop: 'name', attrs: ({ row }) => ({ placeholder: '请输入' + (row.info.gender === '女' ? 'MM' : 'GG') + '的姓名' }), props: { size: 'mini', clearable: true } }, | ||
| 357 | + { is: 'el-input', prop: 'info.age', props: ({ row }) => (row.info.gender === '女' ? { size: 'mini', disabled: true } : { size: 'mini', clearable: true }) }, | ||
| 358 | + ] | ||
| 359 | + } | ||
| 360 | + }; | ||
| 361 | + }, | ||
| 362 | +} | ||
| 363 | +</script> | ||
| 364 | +``` | ||
| 365 | + | ||
| 366 | +::: | ||
| 367 | + | ||
| 368 | +## 编辑器校验 | ||
| 369 | + | ||
| 370 | +编辑器默认支持`el-form`的单元格校验，配置`editor`参数中的`validate`开启校验模式，配置`editor`参数中的`path`设置当前表格在form表单中的路径，表头会根据rules自动判断是否必填项追加`*`号 | ||
| 371 | + | ||
| 372 | +::: snippet 配置编辑器`editor`下的`rules`设置单元格的校验规则，也可以在`items`的`rules`中配置用以支持条件渲染 | ||
| 373 | + | ||
| 374 | +```html | ||
| 375 | +<template> | ||
| 376 | + <el-form ref="form" :model="form"> | ||
| 377 | + <el-form-item label="ID" prop="id"> | ||
| 378 | + <el-input :value="form.id" type="text" disabled /> | ||
| 379 | + </el-form-item> | ||
| 380 | + <z-table :data="form.list" border size="small" :columns="columns" :editor="editor" /> | ||
| 381 | + <el-form-item> | ||
| 382 | + <el-button size="mini" @click="handleValidate">校验</el-button> | ||
| 383 | + </el-form-item> | ||
| 384 | + </el-form> | ||
| 385 | +</template> | ||
| 386 | + | ||
| 387 | +<script> | ||
| 388 | +export default { | ||
| 389 | + data() { | ||
| 390 | + return { | ||
| 391 | + form: { | ||
| 392 | + id: 'test', | ||
| 393 | + list: [ | ||
| 394 | + { name: '', age: 18, gender: '女', }, | ||
| 395 | + { name: '', age: 27, gender: '男' }, | ||
| 396 | + ] | ||
| 397 | + }, | ||
| 398 | + columns: [ | ||
| 399 | + { prop: 'name', label: '姓名', showOverflowTooltip: true }, | ||
| 400 | + { prop: 'age', label: '年龄', showOverflowTooltip: true }, | ||
| 401 | + { prop: 'gender', label: '性别', showOverflowTooltip: true }, | ||
| 402 | + ], | ||
| 403 | + editor: { | ||
| 404 | + path: 'list', | ||
| 405 | + validate: true, | ||
| 406 | + rules: { | ||
| 407 | + name: [{ required: true, message: '请输入姓名' }], | ||
| 408 | + }, | ||
| 409 | + items: [ | ||
| 410 | + { is: 'el-input', prop: 'name', attrs: { placeholder: '请输入姓名' }, props: { size: 'mini', clearable: true } }, | ||
| 411 | + { | ||
| 412 | + is: 'el-input', | ||
| 413 | + prop: 'age', | ||
| 414 | + props: { size: 'mini', clearable: true }, | ||
| 415 | + rules: ({ row = {} }) => { | ||
| 416 | + if (row.gender === '女') { | ||
| 417 | + return [{ | ||
| 418 | + validator: (rule, value, callback) => { | ||
| 419 | + if (value < 14) { | ||
| 420 | + callback(new Error('还年轻')); | ||
| 421 | + } | ||
| 422 | + if (value > 18) { | ||
| 423 | + callback(new Error('永远18岁')); | ||
| 424 | + } | ||
| 425 | + callback(); | ||
| 426 | + }, | ||
| 427 | + }]; | ||
| 428 | + } else { | ||
| 429 | + return [{ required: true, message: '请输入年龄' }] | ||
| 430 | + } | ||
| 431 | + } | ||
| 432 | + }, | ||
| 433 | + ] | ||
| 434 | + } | ||
| 435 | + }; | ||
| 436 | + }, | ||
| 437 | + methods: { | ||
| 438 | + handleValidate() { | ||
| 439 | + this.$refs.form.validate(valid => { | ||
| 440 | + if (valid) { | ||
| 441 | + this.$message.success('校验通过'); | ||
| 442 | + } else { | ||
| 443 | + this.$message.error('校验失败'); | ||
| 444 | + } | ||
| 445 | + }); | ||
| 446 | + } | ||
| 447 | + } | ||
| 448 | +} | ||
| 449 | +</script> | ||
| 450 | +``` | ||
| 451 | + | ||
| 452 | +::: | ||
| 453 | + | ||
| 191 | ## API | 454 | ## API |
| 192 | 455 | ||
| 193 | ## Attribute 属性 | 456 | ## Attribute 属性 |
| @@ -195,6 +458,5 @@ export default { | @@ -195,6 +458,5 @@ export default { | ||
| 195 | 参数|说明|类型|可选值|默认值 | 458 | 参数|说明|类型|可选值|默认值 |
| 196 | -|-|-|-|- | 459 | -|-|-|-|- |
| 197 | data | 表格数据 | Array | - | - | 460 | data | 表格数据 | Array | - | - |
| 198 | -value | 表格数据（支持v-model） | Array | - | [] | ||
| 199 | columns | 表格列配置 | Array | - | [] | 461 | columns | 表格列配置 | Array | - | [] |
| 200 | -type | 表格类型 | String | normal、editable | normal | ||
| 201 | \ No newline at end of file | 462 | \ No newline at end of file |
| 463 | +editor | 编辑器配置 | Object | - | - | ||
| 202 | \ No newline at end of file | 464 | \ No newline at end of file |