Skip to content

Commit 3763b5d

Browse files
author
黄书伟
committed
实例修改
1 parent a6d1f6c commit 3763b5d

File tree

5 files changed

+14
-24
lines changed

5 files changed

+14
-24
lines changed

examples/doc/table/api.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
| isResize | 此列是否要自适应,前提是设置了`is-horizontal-resize:true` | boolean|| false |
4545
| orderBy | 排序规则 | string | asc/desc ||
4646
| isEdit | 是否启用单元格编辑 | boolean || false |
47+
| overflowTitle | 是否内容超出显示title提示 | boolean || false |
48+
4749

4850
### title-rows(Table props)
4951
只处理复杂表头信息时用到。需要配置 `columns` 一起使用,具体用法参考复杂表头实例
@@ -65,7 +67,7 @@
6567
| row-mouse-enter| 鼠标进入表体行的回调| rowIndex |
6668
| row-mouse-leave| 鼠标离开表体行的回调| rowIndex |
6769
| sort-change| 点击排序回调| sortColumns(排序的列对象信息) |
68-
| cell-edit-formatter| 单元格编辑格式化回调(可以对编辑的结果设置样式等)| newValue,oldValue,rowIndex,rowData,field|
70+
| ~~cell-edit-formatter~~ [1.3.5](https://github.com/huangshuwei/vue-easytable/releases/tag/1.3.5) 版本废除| ~~单元格编辑格式化回调(可以对编辑的结果设置样式等)~~| ~~newValue,oldValue,rowIndex,rowData,field~~|
6971
| cell-edit-done| 单元格编辑完成回调| newValue,oldValue,rowIndex,rowData,field|
7072
| cell-merge| 单元格合并,支持rowSpan、colSpan,返回值`{colSpan: 1,rowSpan: 1,content: '',componentName: ''}`;合并后单元格的内容可以通过`content`(html)设置也可以通过,`componentName`(自定义组件)设置| rowIndex,rowData,field|
7173
| select-all| 全选时触发 | selection 当前选中的项集合 |

examples/doc/table/cell-edit-advanced.md

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
:::demo 默认单元格的编辑只接收文本格式,但是可以通过 `cell-edit-formatter` 回调函数对单元格的编辑后的结果进行二次处理。
2+
:::demo 通过给 `columns` 设置 `isEdit:true` 开启单元格编辑。<br> **回调事件**: <br> - `cell-edit-done`回调函数,回调参数为 `newValue``oldValue``rowIndex``rowData``field`,并给`table-data`当前编辑的列赋值 <br> **提示**:由于直接通过操作DOM 会破坏响应式,通过在`cell-edit-done`回调函数中给 `table-data`编辑的列赋值,达到响应式的目的
33

44
```html
55
<template>
@@ -10,7 +10,6 @@
1010
:table-data="tableData"
1111
row-hover-color="#eee"
1212
row-click-color="#edf7ff"
13-
:cell-edit-formatter="cellEditFormatter"
1413
:cell-edit-done="cellEditDone"
1514
></v-table>
1615
</template>
@@ -47,21 +46,13 @@
4746
}
4847
},
4948
methods:{
50-
// 单元格编辑格式化回调
51-
cellEditFormatter(newValue,oldValue,rowIndex,rowData,field){
52-
53-
if (field === 'name'){
54-
return `<span class="cell-edit-color">${newValue}</span>`
55-
}
56-
},
5749
5850
// 单元格编辑回调
5951
cellEditDone(newValue,oldValue,rowIndex,rowData,field){
60-
console.log(newValue)
61-
console.log(oldValue)
62-
console.log(rowIndex)
63-
console.log(rowData)
64-
console.log(field)
52+
53+
this.tableData[rowIndex][field] = newValue;
54+
55+
// 接下来处理你的业务逻辑,数据持久化等...
6556
}
6657
}
6758
}

examples/doc/table/cell-edit.md renamed to examples/doc/table/cell-edit-废弃.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
:::demo 通过给 `columns` 设置 `isEdit:true` 开启单元格编辑。<br> **回调事件**: <br> - `cell-edit-done`回调函数,接收编辑结果,回调参数为 `newValue``oldValue``rowIndex``rowData``field`
2+
:::demo 通过给 `columns` 设置 `isEdit:true` 开启单元格编辑。<br> **回调事件**: <br> - `cell-edit-done`回调函数,回调参数为 `newValue``oldValue``rowIndex``rowData``field`,并给`table-data`当前编辑的列赋值 <br> **提示**:由于直接通过操作DOM 会破坏响应式,通过在`cell-edit-done`回调函数中给 `table-data`编辑的列赋值,达到响应式的目的
33

44
```html
55
<template>

examples/doc/table/main.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,7 @@
5656
<h3>单元格编辑</h3>
5757

5858
<div class="mt30">
59-
<anchor id="table-cell-edit" label="单元格编辑简单用法" h4 ></anchor>
60-
<cell-edit></cell-edit>
61-
</div>
62-
63-
<div class="mt30">
64-
<anchor id="table-cell-edit-advanced" label="单元格编辑高级用法" h4 ></anchor>
59+
<anchor id="table-cell-edit-advanced" label="单元格编辑用法" h4 ></anchor>
6560
<cell-edit-advanced></cell-edit-advanced>
6661
</div>
6762
</div>
@@ -158,7 +153,6 @@
158153
import setCellClassName from './set-cell-class-name.md'
159154
import customColumns from './custom-columns.md'
160155
161-
import cellEdit from './cell-edit.md'
162156
import cellEditAdvanced from './cell-edit-advanced.md'
163157
164158
import sortBySingleColumns from './sort-by-single-columns.md'
@@ -200,7 +194,6 @@
200194
201195
cellMerge,
202196
203-
cellEdit,
204197
cellEditAdvanced,
205198
206199
sortByMultipleColumns,

examples/doc/updateLog.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2017-10-24
2+
1、修复table组件单元格编辑后分页单元格内容不变化的问题 #24
3+
2、废除单元格编辑格式化回调函数 `cell-edit-formatter`(破坏了响应式)
4+
3、列宽拖动在IE9下失效的问题 #20

0 commit comments

Comments
 (0)