frontend / zee

Download as
Browse Code »

Commit ba3dfc720d5ba822460bdea503461354ef4d3b3c

Authored by liuhanchen
1 parent 9d9622cd
Exists in master and in 1 other branch Feature-渲染优化

feat: 更新表格文档

Showing 2 changed files with 290 additions and 26 deletions   Show diff stats
examples/views/docs/component/schema-table.md
  Diff comments   View file @ba3dfc7
... ... @@ -130,11 +130,13 @@ export default {
130 130 </template>
131 131 </el-table-column>
132 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 140 </z-schema-table>
139 141 </template>
140 142  
... ...
examples/views/docs/component/table.md
  Diff comments   View file @ba3dfc7
... ... @@ -2,21 +2,23 @@
2 2  
3 3 拓展ElementUI的`el-table`
4 4  
5   -## 基础用法
  5 +## 原始用法
6 6  
7 7 基本参数与ElementUI的`el-table`相同。
8 8  
9   -::: snippet 支持来自表单的`size`继承
  9 +::: snippet 相当于直接使用`el-table`
10 10  
11 11 ```html
12 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 22 </template>
21 23  
22 24 <script>
... ... @@ -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 85 ```html
84 86 <template>
85 87 <z-table :data="tableData" border size="small" :columns="columns">
86   - <template #left>
  88 + <template #prepend>
87 89 <el-table-column type="selection" width="40"></el-table-column>
  90 + </template>
  91 + <template #left>
88 92 <el-table-column label="左侧的列">
89 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 109 </template>
92 110 </el-table-column>
93 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 112 </z-table>
100 113 </template>
101 114  
... ... @@ -121,7 +134,9 @@ export default {
121 134  
122 135 :::
123 136  
124   -## 可编辑表格
  137 +## 可编辑表格（即将废弃）
  138 +
  139 +> 由于创建时间较早且性能不佳，在2.0.1版本之后不推荐使用，并在若干版本之后废弃
125 140  
126 141 一般用于表格的静态数据编辑，设置`editable`开启可编辑模式，设置`clickable`开启双击编辑
127 142  
... ... @@ -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 454 ## API
192 455  
193 456 ## Attribute 属性
... ... @@ -195,6 +458,5 @@ export default {
195 458 参数|说明|类型|可选值|默认值
196 459 -|-|-|-|-
197 460 data | 表格数据 | Array | - | -
198   -value | 表格数据（支持v-model） | Array | - | []
199 461 columns | 表格列配置 | Array | - | []
200   -type | 表格类型 | String | normal、editable | normal
201 462 \ No newline at end of file
  463 +editor | 编辑器配置 | Object | - | -
202 464 \ No newline at end of file
... ...