update

x-extends · Jun 12, 2019 · f3ae2c3 · f3ae2c3
1 parent 9cb723d
commit f3ae2c3
Show file tree

Hide file tree

Showing 34 changed files with 1,468 additions and 209 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.3e4ac245.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.ff6acf77.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.3e4ac245.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.9d232144.js></script><script src=/vxe-table/static/js/index.ff6acf77.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=preload as=style><link href=/vxe-table/static/css/index.acd44b99.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.9d232144.js rel=preload as=script><link href=/vxe-table/static/js/index.c2246ca2.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.73f3d338.css rel=stylesheet><link href=/vxe-table/static/css/index.acd44b99.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.9d232144.js></script><script src=/vxe-table/static/js/index.c2246ca2.js></script></body></html>
diff --git a/docs/static/css/index.3e4ac245.css b/docs/static/css/index.3e4ac245.css
diff --git a/docs/static/css/index.acd44b99.css b/docs/static/css/index.acd44b99.css
diff --git a/docs/static/js/index.c2246ca2.js b/docs/static/js/index.c2246ca2.js
diff --git a/docs/static/js/index.ff6acf77.js b/docs/static/js/index.ff6acf77.js
diff --git a/examples/api/grid.js b/examples/api/grid.js
@@ -153,14 +153,6 @@ const apis = [
         enum: '',
         defVal: '',
         list: [
-          {
-            name: 'size',
-            desc: '尺寸',
-            type: 'String',
-            enum: 'medium,small,mini',
-            defVal: '',
-            list: []
-          },
           {
             name: 'current-page',
             desc: '当前页',
@@ -228,12 +220,20 @@ const apis = [
           },
           {
             name: 'alert',
-            desc: '默认的提示框',
+            desc: '使用自带的提示框',
             type: 'Boolean,Object',
             enum: '',
             defVal: 'true',
             list: []
           },
+          {
+            name: 'index',
+            desc: '存在 type=index 列时有效，是否代理动态序号（根据分页动态变化）',
+            type: 'Boolean',
+            enum: '',
+            defVal: 'false',
+            list: []
+          },
           {
             name: 'sort',
             desc: '是否代理排序',

diff --git a/examples/api/table.js b/examples/api/table.js
@@ -214,7 +214,7 @@ const apis = [
       },
       {
         name: 'startIndex',
-        desc: '只对 type=index 时有效，自定义序号的起始值',
+        desc: '只对 type=index 时有效，动态索引序号的起始值',
         type: 'Number',
         enum: '',
         defVal: '0',
@@ -421,6 +421,14 @@ const apis = [
         enum: '',
         defVal: '',
         list: [
+          {
+            name: 'zIndex',
+            desc: '自定义 tooltip 的堆叠顺序（对于在弹框中使用是由于堆叠被覆盖时可能会用到）',
+            type: 'Number',
+            enum: '',
+            defVal: '99',
+            list: []
+          },
           {
             name: 'theme',
             desc: '列 tooltip 的主题',
@@ -1470,7 +1478,7 @@ const apis = [
       },
       {
         name: 'clearAll()',
-        desc: '清除表格所有条件，还原到初始状态',
+        desc: '清除表格所有条件，还原到初始状态（对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存）',
         type: 'Promise',
         enum: '',
         defVal: '',

diff --git a/examples/mock/api/helper.js b/examples/mock/api/helper.js
@@ -223,8 +223,6 @@ class Helper {
         let removeRecords = request.body[page && page.remove ? page.remove : 'removeRecords'] || []
         let pendingRecords = request.body[page && page.remove ? page.remove : 'pendingRecords'] || []
         let insertRecords = request.body[page && page.insert ? page.insert : 'insertRecords'] || []
-        removeRecords = removeRecords.concat(pendingRecords)
-        removeRest = XEUtils.remove(list, item => removeRecords.some(row => row[key] === item[key]))
         updateRecords.forEach(data => {
           let item = list.find(item => item[key] === data[key])
           if (item) {
@@ -237,6 +235,8 @@ class Helper {
           insertRest.push(rest)
           list.push(rest)
         })
+        removeRecords = removeRecords.concat(pendingRecords)
+        removeRest = XEUtils.remove(list, item => removeRecords.some(row => row[key] === item[key]))
       }
       response.body = { insertRest, updateRest, removeRest }
       return response
@@ -254,14 +254,8 @@ class Helper {
         let updateTime = Date.now()
         let updateRecords = request.body[page && page.update ? page.update : 'updateRecords'] || []
         let removeRecords = request.body[page && page.remove ? page.remove : 'removeRecords'] || []
+        let pendingRecords = request.body[page && page.remove ? page.remove : 'pendingRecords'] || []
         let insertRecords = request.body[page && page.insert ? page.insert : 'insertRecords'] || []
-        // 删除树
-        let removes = XEUtils.remove(list, item => removeRecords.some(row => row[key] === item[key]))
-        removeRest = removeRest.concat(removes)
-        while (removes.length) {
-          removes = XEUtils.remove(list, item => removes.some(row => row[key] === item[parentKey]))
-          removeRest = removeRest.concat(removes)
-        }
         // 更新树
         updateRecords.forEach(data => {
           let item = list.find(item => item[key] === data[key])
@@ -283,6 +277,14 @@ class Helper {
           })
         }
         insertTree(XEUtils.toArrayTree(insertRecords, { key, parentKey }))
+        // 删除树
+        removeRecords = removeRecords.concat(pendingRecords)
+        let removes = XEUtils.remove(list, item => removeRecords.some(row => row[key] === item[key]))
+        removeRest = removeRest.concat(removes)
+        while (removes.length) {
+          removes = XEUtils.remove(list, item => removes.some(row => row[key] === item[parentKey]))
+          removeRest = removeRest.concat(removes)
+        }
       }
       response.body = { insertRest, updateRest, removeRest }
       return response

diff --git a/examples/views/table/advanced/Page.vue b/examples/views/table/advanced/Page.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <p>使用自带的分页 <pager-api-link name="vxe-pager"/></p>
-    <p>对于分页场景下，如果现有序号递增，可以通过 <table-api-link prop="start-index"/> 属性设置起始值</p>
-    <p>对于分页场景下，如果想要保留选中状态，可以通过设置 <table-api-link prop="select-config"/> 的 <table-api-link prop="reserve"/> 属性</p>
+    <p>如果要支持动态序号，可以通过 <table-api-link prop="start-index"/> 属性设置起始值</p>
+    <p>如果要支持保留选中状态，可以通过设置 <table-api-link prop="select-config"/> 的 <table-api-link prop="reserve"/> 属性</p>
     <p class="red">设置 reserve 需要指定 <table-api-link prop="row-key"/> 或者 ( <table-api-link prop="select-config"/>、<table-api-link prop="tree-config"/>、<table-api-link prop="expand-config"/>、<table-api-link prop="edit-config"/> ) 中的 key 任意配置一个即可</p>
 
     <vxe-table

diff --git a/examples/views/table/advanced/Toolbar.vue b/examples/views/table/advanced/Toolbar.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>使用自带的工具栏 <toolbar-api-link name="vxe-toolbar"/>，配合模板可以非常简单的实现强大的功能</p>
+    <p>组成一套完整的表格，工具栏和表格必须是上下相邻关系，不允许更换位置（如果是复杂的布局不建议使用工具栏，自行写模板即可）</p>
 
     <vxe-toolbar>
       <template v-slot:buttons>

diff --git a/examples/views/table/edit/CellValid.vue b/examples/views/table/edit/CellValid.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>通过调用 <table-api-link prop="validate"/> 函数校验数据，<table-api-link prop="edit-rules"/> 校验规则配置</p>
+    <p>如果是在弹出框中使用，可能校验提示信息的 z-index 堆叠顺序会被覆盖，可以通过设置 <table-api-link prop="tooltip-config"/> 属性的 zIndex 解决</p>
 
     <vxe-toolbar>
       <template v-slot:buttons>

diff --git a/examples/views/table/edit/Keyboard.vue b/examples/views/table/edit/Keyboard.vue
@@ -9,7 +9,9 @@
       :data.sync="tableData"
       :mouse-config="{selected: true}"
       :keyboard-config="{isArrow: true, isDel: true, isTab: true, isEdit: true}"
-      :edit-config="{key: 'id', trigger: 'dblclick', mode: 'cell'}">
+      :edit-config="{key: 'id', trigger: 'dblclick', mode: 'cell'}"
+      @edit-actived="editActivedEvent"
+      @edit-closed="editClosedEvent">
       <vxe-table-column type="index" width="60"></vxe-table-column>
       <vxe-table-column prop="name" label="Name" :edit-render="{name: 'input'}"></vxe-table-column>
       <vxe-table-column prop="sex" label="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
@@ -87,6 +89,14 @@ export default {
     Array.from(this.$el.querySelectorAll('pre code')).forEach((block) => {
       hljs.highlightBlock(block)
     })
+  },
+  methods: {
+    editActivedEvent ({ row, column }, event) {
+      console.log(`打开 ${column.label} 列编辑`)
+    },
+    editClosedEvent ({ row, column }, event) {
+      console.log(`关闭 ${column.label} 列编辑`)
+    }
   }
 }
 </script>
diff --git a/examples/views/table/edit/RowValid.vue b/examples/views/table/edit/RowValid.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <p>通过调用 <table-api-link prop="validate"/> 函数校验数据，<table-api-link prop="edit-rules"/> 校验规则配置</p>
+    <p>如果是在弹出框中使用，可能校验提示信息的 z-index 堆叠顺序会被覆盖，可以通过设置 <table-api-link prop="tooltip-config"/> 属性的 zIndex 解决</p>
 
     <vxe-toolbar>
       <template v-slot:buttons>

diff --git a/examples/views/table/grid/FullEdit.vue b/examples/views/table/grid/FullEdit.vue
@@ -9,7 +9,7 @@
       resizable
       highlight-hover-row
       height="530"
-      :pager-config="tablePage"
+      :pager-config="{pageSize: 15}"
       :toolbar="toolbar"
       :proxy-config="tableProxy"
       :columns="tableColumn"
@@ -33,10 +33,8 @@ import XEUtils from 'xe-utils'
 export default {
   data () {
     return {
-      tablePage: {
-        pageSize: 15
-      },
       tableProxy: {
+        index: true, // 启用动态序号代理
         sort: true, // 启用排序代理
         filter: true, // 启用筛选代理
         ajax: {
@@ -91,7 +89,7 @@ export default {
           resizable
           highlight-hover-row
           height="530"
-          :pager-config="tablePage"
+          :pager-config="{pageSize: 15}"
           :toolbar="toolbar"
           :proxy-config="tableProxy"
           :columns="tableColumn"
@@ -101,10 +99,8 @@ export default {
         export default {
           data () {
             return {
-              tablePage: {
-                pageSize: 15
-              },
               tableProxy: {
+                index: true, // 启用动态序号代理
                 sort: true, // 启用排序代理
                 filter: true, // 启用筛选代理
                 ajax: {
@@ -129,9 +125,7 @@ export default {
                   { code: 'save', name: '保存' },
                   { code: 'export', name: '导出.csv' }
                 ],
-                setting: {
-                  immediate: true
-                }
+                setting: true
               },
               tableColumn: [
                 { type: 'selection', width: 50 },

diff --git a/examples/views/table/grid/FullQuery.vue b/examples/views/table/grid/FullQuery.vue
@@ -7,7 +7,7 @@
       ref="xGrid"
       border
       height="548"
-      :pager-config="tablePage"
+      :pager-config="{pageSize: 15}"
       :columns="tableColumn"
       :proxy-config="tableProxy"
       :select-config="{key: 'id', reserve: true}"
@@ -34,10 +34,8 @@ export default {
         sort: '',
         order: ''
       },
-      tablePage: {
-        pageSize: 15
-      },
       tableProxy: {
+        index: true, // 启用动态序号代理
         ajax: {
           query: ({ page }) => XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, this.formData)
         }
@@ -70,7 +68,7 @@ export default {
           ref="xGrid"
           border
           height="548"
-          :pager-config="tablePage"
+          :pager-config="{pageSize: 15}"
           :columns="tableColumn"
           :proxy-config="tableProxy"
           @sort-change="sortChangeEvent"
@@ -84,10 +82,8 @@ export default {
                 sort: '',
                 order: ''
               },
-              tablePage: {
-                pageSize: 15
-              },
               tableProxy: {
+                index: true, // 启用动态序号代理
                 ajax: {
                   query: ({ page }) => XEAjax.getJSON(\`/api/user/page/list/\${page.pageSize}/\${page.currentPage}\`, this.formData)
                 }

diff --git a/examples/views/table/grid/Page.vue b/examples/views/table/grid/Page.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>通过配置 <grid-api-link prop="pager-config"/> 参数开启分页功能</p>
-    <p>对于分页场景下，如果现有序号递增，可以通过 <table-api-link prop="start-index"/> 属性设置起始值</p>
+    <p>对于分页场景下，如果要实现分页动态序号，可以通过 <table-api-link prop="start-index"/> 属性设置起始值</p>
 
     <vxe-grid
       border

diff --git a/examples/views/table/grid/PageProxy.vue b/examples/views/table/grid/PageProxy.vue
@@ -31,6 +31,7 @@ export default {
         pageSize: 15
       },
       tableProxy: {
+        index: true, // 启用动态序号代理
         ajax: {
           query: ({ page }) => XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`)
         }
@@ -60,6 +61,7 @@ export default {
                 pageSize: 10
               },
               tableProxy: {
+                index: true, // 启用动态序号代理
                 ajax: {
                   // 任何支持 Promise API 的库都可以对接
                   query: ({ page }) => XEAjax.getJSON(\`/api/user/page/list/\${page.pageSize}/\${page.currentPage}\`)

diff --git a/examples/views/table/grid/TreeEdit.vue b/examples/views/table/grid/TreeEdit.vue
@@ -9,7 +9,7 @@
       :columns="tableColumn"
       :toolbar="toolbar"
       :select-config="{labelProp: 'id'}"
-      :tree-config="{key: 'id', children: 'children', expandAll: true}"
+      :tree-config="{key: 'id', children: 'children'}"
       :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"></vxe-grid>
 
     <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
@@ -65,7 +65,7 @@ export default {
           :columns="tableColumn"
           :toolbar="toolbar"
           :select-config="{labelProp: 'id'}"
-          :tree-config="{key: 'id', children: 'children', expandAll: true}"
+          :tree-config="{key: 'id', children: 'children'}"
           :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"></vxe-grid>
         `,
         `

diff --git a/examples/views/table/plugin/ElementPage.vue b/examples/views/table/plugin/ElementPage.vue
@@ -230,10 +230,10 @@ export default {
             saveEvent () {
               let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
               if (insertRecords.length || removeRecords.length || updateRecords.length) {
-                this.$message({ message: '保存成功！', type: 'success' })
+                this.$alert('保存成功！')
                 this.searchEvent()
               } else {
-                this.$message({ message: '数据未改动！' })
+                this.$alert('数据未改动！')
               }
             },
             dropdownMenuEvent (name) {
@@ -243,7 +243,7 @@ export default {
                   if (selectRecords.length) {
                     this.$refs.xTable.removeSelecteds()
                   } else {
-                    this.$message({ message: '请至少选择一条数据！' })
+                    this.$alert('请至少选择一条数据！')
                   }
                   break
                 }
@@ -331,10 +331,10 @@ export default {
     saveEvent () {
       let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
       if (insertRecords.length || removeRecords.length || updateRecords.length) {
-        this.$message({ message: '保存成功！', type: 'success' })
+        this.$alert('保存成功！')
         this.searchEvent()
       } else {
-        this.$message({ message: '数据未改动！' })
+        this.$alert('数据未改动！')
       }
     },
     dropdownMenuEvent (name) {
@@ -344,7 +344,7 @@ export default {
           if (selectRecords.length) {
             this.$refs.xTable.removeSelecteds()
           } else {
-            this.$message({ message: '请至少选择一条数据！' })
+            this.$alert('请至少选择一条数据！')
           }
           break
         }

diff --git a/examples/views/table/start/Advanced.vue b/examples/views/table/start/Advanced.vue
@@ -3,6 +3,9 @@
     <h3>高级函数</h3>
     <p>通过渲染器你可以轻松实现渲染的单元格组件，可以根据不同业务实现不一样的组件，这个功能将非常实用</p>
     <p>比如这些插件 <a href="https://www.npmjs.com/package/vxe-table-plugin-element">vxe-table-plugin-element</a> 等插件都是使用渲染器实现的</p>
+    <p>添加单个 renderer.add(name, options)</p>
+    <p>混合多个 renderer.mixin(opts)</p>
+    <p>删除 renderer.delete(name)</p>
     <p>例子：使用 render 实现单元格组件</p>
     <pre>
       <code class="javascript">{{ demoCodes[0] }}</code>
@@ -14,7 +17,9 @@
       <code class="html">{{ demoCodes[3] }}</code>
     </pre>
     <p>通过内置拦截器可以解决当表格交互与其他组件存在冲突的，可以通过拦截器去阻止默认的行为，从而可以集成其他组件互相兼容</p>
-    <p>例子：比如集成某个日期组件后，由于面板不在对单元格之内，按键事件的交互行为存在冲突，对于这些场景就很有用了</p>
+    <p>添加单个 interceptor.add(name, handle)</p>
+    <p>name: event.clear_actived（清除激活单元格时触发，返回 false 阻止默认的清除行为）</p>
+    <p>例子：比如自定义渲染某个组件后，由于弹出层面板不在单元格之内，按键事件的交互行为存在冲突，对于这些场景就很有用了</p>
     <pre>
       <code class="javascript">{{ demoCodes[4] }}</code>
     </pre>
@@ -106,7 +111,7 @@ export default {
 
         VXETable.interceptor.add('event.clear_actived', (params, event) => {
           // 比如点击了某日期组件的面板，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
-          if (event.target.className.indexOf('cascader-popper') > -1) {
+          if (event.target.className.indexOf('other-popper') > -1) {
             return false
           }
         })