单元格编辑支持格式化

黄书伟 · 黄书伟 · commit 103d591f6970 · 2017-09-29T20:17:29.000+08:00
diff --git a/examples/doc/table/api.md b/examples/doc/table/api.md
@@ -60,11 +60,13 @@
 ### Table Event
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| on-row-click | 行点击回调 | rowIndex, rowData, column |
+| on-row-click | 行点击回调 | rowIndex, rowData, field |
 | row-mouse-enter|  鼠标进入表体行的回调| rowIndex |
 | row-mouse-leave|  鼠标离开表体行的回调| rowIndex |
 | sort-change|  点击排序回调| sortColumns（排序的列对象信息） |
 | cell-edit-done|  单元格编辑完成回调|  newValue,oldValue,rowData,column,index|
+| cell-edit-formatter|  单元格编辑格式化回调（可以对编辑的结果设置样式等）|  newValue,oldValue,rowIndex,rowData,field|
+| cell-edit-done|  单元格编辑完成回调|  newValue,oldValue,rowIndex,rowData,field|
 
 
 
diff --git a/examples/doc/table/cell-edit-advanced.md b/examples/doc/table/cell-edit-advanced.md
@@ -0,0 +1,72 @@
+
+:::demo 通过设置列对象中的 isEdit 属性，控制哪些列开启单元格编辑功能。通过传入回调函数 cell-edit-done，接收编辑结果。
+
+```html
+<template>
+    <v-table
+            :columns="tableConfig.columns"
+            :table-data="tableConfig.tableData"
+            row-hover-color="#eee"
+            row-click-color="#edf7ff"
+            :cell-edit-formatter="cellEditFormatter"
+            :cell-edit-done="cellEditDone"
+    ></v-table>
+</template>
+
+<style>
+    .cell-edit-color{
+        color:#2db7f5;
+        font-weight: bold;
+    }
+</style>
+
+<script>
+
+    import mockData from '../../mock/tableData.js'
+
+    export default{
+        data() {
+            return {
+                tableConfig: {
+                    tableData:[],
+                    columns:  [
+                             {field: 'name', title:'姓名', width: 100, titleAlign: 'center',columnAlign:'center',isEdit:true,
+                              formatter: function (rowData,rowIndex,pagingIndex,field) {
+
+                                   return `<span class='cell-edit-color'>${rowData[field]}</span>`;
+                               }},
+                             {field: 'tel', title: '手机号码', width: 260, titleAlign: 'center',columnAlign:'center',isEdit:true},
+                             {field: 'hobby', title: '爱好', width: 380, titleAlign: 'center',columnAlign:'center',isEdit:true},
+                             {field: 'address', title: '地址', width: 358, titleAlign: 'center',columnAlign:'left',isEdit:true}
+                         ],
+                    titleBgColor: "#e1e1e1"
+                }
+            }
+        },
+        methods:{
+           // 单元格编辑格式化回调
+           cellEditFormatter(newValue,oldValue,rowIndex,rowData,field){
+
+                if (field === 'name'){
+                    return `<span class="cell-edit-color">${newValue}</span>`
+                }
+           },
+
+            // 单元格编辑回调
+            cellEditDone(newValue,oldValue,rowIndex,rowData,field){
+                 console.log(newValue)
+                 console.log(oldValue)
+                 console.log(rowIndex)
+                 console.log(rowData)
+                 console.log(field)
+            }
+        },
+        created(){
+
+            this.tableConfig.tableData = mockData;
+        }
+    }
+</script>
+```
+:::
+
diff --git a/examples/doc/table/cell-edit.md b/examples/doc/table/cell-edit.md
@@ -32,14 +32,14 @@
             }
         },
         methods:{
-               // 单元格编辑回调
-               cellEditDone(newValue,oldValue,rowData,field,index){
-                    console.log(newValue)
-                    console.log(oldValue)
-                    console.log(rowData)
-                    console.log(field)
-                    console.log(index)
-               }
+             // 单元格编辑回调
+            cellEditDone(newValue,oldValue,rowIndex,rowData,field){
+                 console.log(newValue)
+                 console.log(oldValue)
+                 console.log(rowIndex)
+                 console.log(rowData)
+                 console.log(field)
+            }
         },
         created(){
 
diff --git a/examples/doc/table/main.md b/examples/doc/table/main.md
@@ -53,9 +53,16 @@
             <div class="mt30">
                 <div class="bold">
                 <a class="anchor" id="table-cell-edit" @click.stop="goAnchor('table-cell-edit')">#</a>
-                支持单元格编辑</div>
+                单元格编辑简单用法</div>
                 <cell-edit></cell-edit>
             </div>
+
+            <div class="mt30">
+                <div class="bold">
+                <a  class="anchor" id="table-cell-edit-advanced" @click.stop="goAnchor('table-cell-edit-advanced')">#</a>
+                单元格编辑高级用法</div>
+                <cell-edit-advanced></cell-edit-advanced>
+            </div>
         </div>
 
         <div class="mt30">
@@ -176,6 +183,7 @@
     import customColumns from './custom-columns.md'
 
     import cellEdit from './cell-edit.md'
+    import cellEditAdvanced from './cell-edit-advanced.md'
 
     import sortBySingleColumns from './sort-by-single-columns.md'
     import sortByMultipleColumns from './sort-by-multiple-columns.md'
@@ -211,6 +219,7 @@
             frozenTitleColumns,
 
             cellEdit,
+            cellEditAdvanced,
 
             sortByMultipleColumns,
             sortBySingleColumns,
diff --git a/libs/v-table/src/cell-edit-mixin.js b/libs/v-table/src/cell-edit-mixin.js
@@ -13,14 +13,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 exports.default = {
 
             methods: {
-                        cellEdit: function cellEdit(e, callback) {
+                        cellEdit: function cellEdit(e, callback, rowIndex, rowData, field) {
 
                                     var target = e.target,
+                                        self = this,
                                         oldVal = void 0,
                                         editInput = void 0,
                                         editInputLen = void 0,
                                         _actionFun = void 0,
-                                        textAlign = void 0;
+                                        textAlign = void 0,
+                                        formatterVal = '';
 
                                     while (target.className && target.className.indexOf('v-table-body-cell') === -1 || !target.className) {
                                                 target = target.parentNode;
@@ -64,7 +66,9 @@ exports.default = {
                                                                         return false;
                                                             }
 
-                                                            target.innerText = this.value;
+                                                            formatterVal = self.cellEditFormatter && self.cellEditFormatter(this.value, oldVal, rowIndex, rowData, field);
+
+                                                            target.innerHTML = formatterVal && formatterVal.length > 0 ? formatterVal : this.value;
 
                                                             callback(this.value, oldVal);
 
@@ -84,10 +88,10 @@ exports.default = {
 
                                                 var onCellEditCallBack = function onCellEditCallBack(newValue, oldVal) {
 
-                                                            self.cellEditDone(newValue, oldVal, rowData, field, rowIndex);
+                                                            self.cellEditDone(newValue, oldVal, rowIndex, rowData, field);
                                                 };
 
-                                                this.cellEdit(e, onCellEditCallBack);
+                                                this.cellEdit(e, onCellEditCallBack, rowIndex, rowData, field);
                                     }
                         }
             }
diff --git a/libs/v-table/src/table.vue b/libs/v-table/src/table.vue
@@ -394,7 +394,9 @@
             // 鼠标离开行的回调
             rowMouseLeave: Function,
             // 单元格编辑完成回调
-            cellEditDone:Function
+            cellEditDone:Function,
+            // 单元格编辑格式化
+            cellEditFormatter:Function
 
         },
         computed: {
diff --git a/packages/v-table/src/cell-edit-mixin.js b/packages/v-table/src/cell-edit-mixin.js
@@ -3,14 +3,16 @@ export default {
 
     methods: {
         // cell edit
-        cellEdit(e,callback){
+        cellEdit(e,callback,rowIndex,rowData,field){
 
             let target = e.target,
+                self = this,
                 oldVal,
                 editInput,
                 editInputLen,
                 actionFun,
-                textAlign;
+                textAlign,
+                formatterVal = '';
 
             while ((target.className && target.className.indexOf('v-table-body-cell') === -1) || !target.className) {
                 target = target.parentNode;
@@ -58,7 +60,9 @@ export default {
                         return false;
                     }
 
-                    target.innerText = this.value;
+                    formatterVal = self.cellEditFormatter && self.cellEditFormatter(this.value,oldVal,rowIndex,rowData,field);
+
+                    target.innerHTML = formatterVal && formatterVal.length > 0 ? formatterVal :this.value;
 
                     callback(this.value,oldVal)
 
@@ -81,10 +85,10 @@ export default {
                 // 单元格内容变化后的回调
                 let onCellEditCallBack = function (newValue,oldVal) {
 
-                    self.cellEditDone(newValue,oldVal,rowData,field,rowIndex);
+                    self.cellEditDone(newValue,oldVal,rowIndex,rowData,field);
                 }
 
-                this.cellEdit(e,onCellEditCallBack)
+                this.cellEdit(e,onCellEditCallBack,rowIndex,rowData,field)
             }
         },
     }
diff --git a/packages/v-table/src/table.vue b/packages/v-table/src/table.vue
@@ -394,7 +394,9 @@
             // 鼠标离开行的回调
             rowMouseLeave: Function,
             // 单元格编辑完成回调
-            cellEditDone:Function
+            cellEditDone:Function,
+            // 单元格编辑格式化
+            cellEditFormatter:Function
 
         },
         computed: {
