1、修复table组件单元格编辑后分页单元格内容不变化的问题 #24

2、废除单元格编辑格式化回调函数 `cell-edit-formatter`（破坏了响应式） 3、列宽拖动在IE9下失效的问题 #20
Happy-Coding-Clans · Oct 24, 2017 · a6d1f6c · a6d1f6c
1 parent 6732326
commit a6d1f6c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/packages/v-table/src/cell-edit-mixin.js b/packages/v-table/src/cell-edit-mixin.js
@@ -14,30 +14,42 @@ export default {
                 editInputLen,
                 actionFun,
                 textAlign,
-                formatterVal = '';
+                childTarget;
 
             while ((target.className && target.className.indexOf('v-table-body-cell') === -1) || !target.className) {
                 target = target.parentNode;
             }
 
+            // 子节点（span节点）
+            childTarget = target.children[0];
+
+            // 把子节点影藏掉
+            childTarget.style.display = 'none';
+
             if (hasClass(target, 'cell-editing')) {
                 return false
             }
 
             addClass(target, 'cell-editing');
 
-            oldVal = target.innerText;
+            oldVal = childTarget.innerText.trim();
 
             if (target.style.textAlign) {
 
                 textAlign = target.style.textAlign;
             }
 
-            target.innerHTML = `<input type='text' value="${oldVal}" class='cell-edit-input' style='width:100%;height: 100%;text-align: ${textAlign};'>`;
+            editInput = document.createElement('input');
+            editInput.value = oldVal;
+            editInput.className = 'cell-edit-input';
+            editInput.style.textAlign = textAlign;
+            editInput.style.width = '100%';
+            editInput.style.height = '100%';
+            //editInput.style = `width:100%;height: 100%;text-align: ${textAlign};`;
 
-            editInput = target.querySelector('.cell-edit-input');
-            editInput.focus();
+            target.appendChild(editInput);
 
+            editInput.focus();
 
             editInputLen = editInput.value.length;
             if (document.selection) {
@@ -49,7 +61,6 @@ export default {
                 editInput.selectionStart = editInput.selectionEnd = editInputLen;
             }
 
-
             actionFun = function (e) {
 
                 if (typeof e.keyCode === 'undefined' || e.keyCode === 0 || e.keyCode == 13) {
@@ -61,15 +72,15 @@ export default {
                         return false;
                     }
 
-                    formatterVal = self.cellEditFormatter && self.cellEditFormatter(editInput.value, oldVal, rowIndex, rowData, field);
-
-                    target.innerHTML = formatterVal && formatterVal.length > 0 ? formatterVal : editInput.value;
+                    childTarget.style.display = '';
 
                     // fixed this.value bug in IE9
-                    callback(editInput.value, oldVal)
+                    callback(editInput.value, oldVal);
 
                     utils.unbind(editInput, 'blur', actionFun);
                     utils.unbind(editInput, 'keydown', actionFun);
+
+                    target.removeChild(editInput);
                 }
             };
 
@@ -80,14 +91,13 @@ export default {
 
         // 单元格点击
         cellEditClick(e, isEdit, rowData, field, rowIndex){
-
             if (isEdit) {
 
                 let self = this;
                 // 单元格内容变化后的回调
                 let onCellEditCallBack = function (newValue, oldVal) {
 
-                    self.cellEditDone(newValue, oldVal, rowIndex, rowData, field);
+                    self.cellEditDone && self.cellEditDone(newValue, oldVal, rowIndex, rowData, field);
                 }
 
                 this.cellEdit(e, onCellEditCallBack, rowIndex, rowData, field)

diff --git a/packages/v-table/src/drag-width-mixin.js b/packages/v-table/src/drag-width-mixin.js
@@ -1,5 +1,6 @@
 // 列宽度拖动
 import utils from '../../src/utils/utils.js'
+import {hasClass, addClass, removeClass} from '../../src/utils/dom.js'
 export default {
 
     data(){
@@ -45,7 +46,7 @@ export default {
 
             target = event.target;
 
-            while (target && ((target.className && target.className.indexOf('v-table-title-cell') === -1) || !target.className)) {
+            while (target && ((target.className && !hasClass(target, 'v-table-title-cell')) || !target.className)) {
                 target = target.parentNode;
             }
 
@@ -152,16 +153,17 @@ export default {
             if (this.totalColumnsWidth < this.internalWidth) {
 
                 rightViewBody.style.overflowX = 'hidden';
+
+                removeClass(rightViewBody, 'v-table-rightview-special-border');
                 rightViewBody.classList.remove('v-table-rightview-special-border');
 
-                //this.internalColumns[this.internalColumns.length - 1].width += this.internalWidth - this.totalColumnsWidth - 2;
-            }else{
+            } else {
 
                 rightViewBody.style.overflowX = 'scroll';
 
-                if (!this.hasFrozenColumn){
+                if (!this.hasFrozenColumn) {
 
-                    rightViewBody.classList.add('v-table-rightview-special-border');
+                    addClass(rightViewBody, 'v-table-rightview-special-border');
                 }
             }
 

diff --git a/packages/v-table/src/table.vue b/packages/v-table/src/table.vue
@@ -455,8 +455,6 @@
             rowMouseLeave: Function,
             // 单元格编辑完成回调
             cellEditDone: Function,
-            // 单元格编辑格式化
-            cellEditFormatter: Function,
             // 单元格合并
             cellMerge: Function,
             // select all
@@ -809,24 +807,29 @@
                 this.initColumns();
             },
 
-            'tableData': function (newVal) {
+            // deep watch
+            'tableData': {
 
-                this.internalTableData = this.initInternalTableData(newVal);
+                handler:function (newVal) {
 
-                this.updateCheckboxGroupModel();
+                    this.internalTableData = this.initInternalTableData(newVal);
 
-                this.tableEmpty();
+                    this.updateCheckboxGroupModel();
 
-                if (Array.isArray(newVal) && newVal.length > 0) {
+                    this.tableEmpty();
 
-                    this.initView();
+                    if (Array.isArray(newVal) && newVal.length > 0) {
 
-                    if (!this.hasBindScrollEvent) {
-                        this.scrollControl();
+                        this.initView();
+
+                        if (!this.hasBindScrollEvent) {
+                            this.scrollControl();
+                        }
                     }
-                }
 
-                this.resize();
+                    this.resize();
+                },
+                deep: true
             }
         }
     }