support cell edit

Author: 黄书伟

README.md

@@ -23,6 +23,8 @@ Based on vue2.x flexible table components.
    自定义列、自定义单元格样式、loading效果等
 6. With paging components  
    自带分页组件
+7. Cell edit
+   单元格编辑
 
 ## Install
 

examples/app.js

@@ -16,8 +16,8 @@ import demoBox from './comp/DemoBox.vue'
 Vue.component('demo-box', demoBox);
 
 
-import '../packages/themes-base/index.css'
-import {VTable,VPagination} from '../packages/index.js'
+import '../libs/themes-base/index.css'
+import {VTable,VPagination} from '../libs/index.js'
 
 Vue.component(VTable.name, VTable)
 Vue.component(VPagination.name, VPagination)

examples/doc/strart.md

@@ -10,6 +10,7 @@
 4. 排序，支持单个、多个字段排序
 5. 自定义列、自定义单元格样式、loading效果等
 6. 自带分页组件
+7. 单元格编辑
 
 ### 安装
 

examples/doc/table/api.md

@@ -60,10 +60,11 @@
 ### Table Event
 | 事件名称 | 说明 | 回调参数 |
 |---------- |-------- |---------- |
-| on-row-click | 行点击回调 | — |
+| on-row-click | 行点击回调 | rowIndex, rowData, column |
 | row-mouse-enter|  鼠标进入表体行的回调| rowIndex |
 | row-mouse-leave|  鼠标离开表体行的回调| rowIndex |
 | sort-change|  点击排序回调| sortColumns（排序的列对象信息） |
+| cell-edit-done|  单元格编辑完成回调|  newValue,oldValue,rowData,column,index|
 
 
 

examples/doc/table/cell-edit.md

@@ -0,0 +1,52 @@
+
+:::demo 实例
+
+```html
+<template>
+    <v-table
+            :columns="tableConfig.columns"
+            :table-data="tableConfig.tableData"
+            row-hover-color="#eee"
+            row-click-color="#edf7ff"
+            :cell-edit-done="cellEditDone"
+    ></v-table>
+</template>
+
+<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},
+                             {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:{
+               // 单元格编辑回调
+               cellEditDone(newValue,oldValue,rowData,field,index){
+                    console.log(newValue)
+                    console.log(oldValue)
+                    console.log(rowData)
+                    console.log(field)
+                    console.log(index)
+               }
+        },
+        created(){
+
+            this.tableConfig.tableData = mockData;
+        }
+    }
+</script>
+```
+:::
+

examples/doc/table/main.md

@@ -37,6 +37,14 @@
 
         </div>
 
+        <div class="mt30">
+            <h3>单元格编辑</h3>
+
+            <div class="mt30">
+                <div class="bold">支持单元格编辑</div>
+                <cell-edit></cell-edit>
+            </div>
+        </div>
 
         <div class="mt30">
             <h3>表格排序</h3>
@@ -128,6 +136,8 @@
     import setCellClassName from './set-cell-class-name.md'
     import customColumns from './custom-columns.md'
 
+    import cellEdit from './cell-edit.md'
+
     import sortBySingleColumns from './sort-by-single-columns.md'
     import sortByMultipleColumns from './sort-by-multiple-columns.md'
 
@@ -160,6 +170,8 @@
             complexHeaderFixedColumn,
             frozenTitleColumns,
 
+            cellEdit,
+
             sortByMultipleColumns,
             sortBySingleColumns,
 

libs/themes-base/index.css

@@ -4,6 +4,11 @@
 @import "v-select.css";
 @import "v-table.css";
 
+/*多主题放开后，此处作废*/
+@import "../themes-blue/v-pagination.css";
+@import "../themes-blue/v-select.css";
+@import "../themes-blue/v-table.css";
+
 
 
 

libs/themes-base/v-table.css

@@ -121,36 +121,40 @@
     padding:0 3px;
     vertical-align: middle;
     word-break: break-all;
+    overflow: hidden;
+    line-height: 1.2em;
 }
 
 .v-table-sort-icon {
     position: relative;
     display: inline-block;
     vertical-align: middle;
-    font-size:16px;
+    /*font-size:16px;*/
     width:16px;
-    height: 16px;
+    height: 19px;
+    margin-left: -8px;
     overflow: hidden;
+    cursor: pointer;
 }
 
 .v-table-sort-icon i {
 
     position: absolute;
     display: block;
     width:16px;
-    height: 12px;
-    line-height: 12px;
+    height: 15px;
+    /*line-height: 12px;*/
     overflow: hidden;
     color: #a6a6a6;
     transition: color .2s ease-in-out;
 }
 
 .v-table-sort-icon i:first-child {
-    top: -3px;
+    top: -4px;
 }
 
 .v-table-sort-icon i:last-child {
-    bottom: -1px;
+    bottom: -0px;
 }
 
 .v-table-header .cursorPointer{
@@ -161,11 +165,6 @@
     -ms-user-select: none;
 }
 
-.v-table-sort-icon .checked{
-    color:#48576a;
-}
-
-
 .vertical-border{
     border-right-width: 1px !important;
 }

libs/v-table/src/drag-width-mixin.js

@@ -47,13 +47,14 @@ exports.default = {
 
                                     target = event.target;
 
-                                    while (target && target.className && target.className.indexOf('v-table-title-cell') === -1) {
+                                    while (target && (target.className && target.className.indexOf('v-table-title-cell') === -1 || !target.className)) {
                                                 target = target.parentNode;
                                     }
 
                                     rect = target.getBoundingClientRect();
 
                                     var bodyStyle = document.body.style;
+
                                     if (rect.width >= this.minColumnWidth && rect.right - event.pageX < 10) {
 
                                                 if (!this.isDragging) {

libs/v-table/src/table-empty.vue

@@ -1,4 +1,4 @@
-<template>
+npm <template>
 
     <div class="v-table-empty">
         <!--表格无数据的提示信息-->