vxe-table/docs/static/js/grid.2eb501c2.js

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["grid"],{"0edb":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var a=window.document,i=a.createElement("textarea");function r(e){var t=i.style;i.id="$XECopy",t.width="48px",t.height="24px",t.position="fixed",t.zIndex="0",t.left="-500px",t.top="-500px",i.value=null===e||void 0===e?"":""+e,i.parentNode||a.body.appendChild(i)}function o(){return i.focus(),i.select(),i.setSelectionRange(0,i.value.length),a.execCommand("copy")}function l(e){var t=!1;try{r(e),t=o()}catch(n){}return t}l.copy=l;var d=l;t["default"]=d},"16ad":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"activeMethod"}}),e._v(" 方法判断单元格是否禁用")],1),n("vxe-grid",{attrs:{border:"","show-overflow":"",columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeCellMethod}},on:{"edit-disabled":e.editDisabledEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("禁用第二行编辑")]),n("vxe-grid",{attrs:{border:"","show-overflow":"",columns:e.tableColumn2,data:e.tableData,"edit-config":{trigger:"click",mode:"cell",activeMethod:e.activeRowMethod}},on:{"edit-disabled":e.editDisabledEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{tableData:[],tableColumn:[{type:"seq",width:50},{field:"name",title:"app.body.label.name",editRender:{name:"input"}},{field:"sex",title:"app.body.label.sex",editRender:{name:"input"}},{field:"age",title:"Age",editRender:{name:"input"}},{field:"address",title:"Address",editRender:{name:"input"}}],tableColumn2:[{type:"seq",width:50},{field:"name",title:"app.body.label.name",editRender:{name:"input"}},{field:"sex",title:"app.body.label.sex",editRender:{name:"input"}},{field:"age",title:"Age",editRender:{name:"input"}},{field:"address",title:"Address",editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          show-overflow\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'cell\', activeMethod: activeCellMethod}"\n          @edit-disabled="editDisabledEvent">\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name', editRender: { name: 'input' } },\n                { field: 'sex', title: 'app.body.label.sex', editRender: { name: 'input' } },\n                { field: 'age', title: 'Age', editRender: { name: 'input' } },\n                { field: 'address', title: 'Address', editRender: { name: 'input' } }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            activeCellMethod ({ column, columnIndex }) {\n              if (columnIndex === 1) {\n                return false\n              }\n              return true\n            },\n            editDisabledEvent ({ row, column }) {\n              alert('禁止编辑')\n            }\n          }\n        }\n        ",'\n        <vxe-grid\n          border\n          show-overflow\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'cell\', activeMethod: activeRowMethod}"\n          @edit-disabled="editDisabledEvent">\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name', editRender: { name: 'input' } },\n                { field: 'sex', title: 'app.body.label.sex', editRender: { name: 'input' } },\n                { field: 'age', title: 'Age', editRender: { name: 'input' } },\n                { field: 'address', title: 'Address', editRender: { name: 'input' } }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            activeRowMethod ({ row, rowIndex }) {\n              if (rowIndex === 1) {\n                return false\n              }\n              return true\n            },\n            editDisabledEvent ({ row, column }) {\n              this.$XModal.alert('禁止编辑')\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{activeCellMethod:function(e){e.column;var t=e.columnIndex;return 1!==t},activeRowMethod:function(e){e.row;var t=e.rowIndex;return 1!==t},editDisabledEvent:function(e){e.row,e.column;this.$XModal.alert("禁止编辑")}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"1a22":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("懒加载树表格、数据代理、快捷菜单")]),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"",toolbar:"","proxy-config":e.tableProxy,columns:e.tableColumn,"context-menu":{body:{options:e.bodyMenus},visibleMethod:e.visibleMethod},"edit-config":{trigger:"click",mode:"row",showStatus:!0},"tree-config":{lazy:!0,children:"children",hasChild:"hasChild",loadMethod:e.loadChildrenMethod}},on:{"context-menu-click":e.contextMenuClickEvent},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("caad"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{ajax:{query:function(){return e.$ajax.get("/api/file/node/list",{parentId:null})}}},bodyMenus:[[{code:"clearLoaded",name:"清除加载状态",disabled:!1},{code:"reloadNodes",name:"重新加载子节点",disabled:!1},{code:"expand",name:"展开节点",disabled:!1},{code:"contract",name:"收起节点",disabled:!1}]],tableColumn:[{field:"id",title:"ID",width:180,treeNode:!0},{field:"name",title:"名称",editRender:{name:"input"}},{field:"size",title:"大小",editRender:{name:"input"}},{field:"createTime",title:"创建时间",formatter:this.formatterDate},{field:"updateTime",title:"修改时间",formatter:this.formatterDate}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          toolbar\n          ref="xGrid"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :context-menu="{body: {options: bodyMenus}, visibleMethod}"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', loadMethod: loadChildrenMethod}"\n          @context-menu-click="contextMenuClickEvent">\n          <template v-slot:buttons>\n            <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n          </template>\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                ajax: {\n                  // 查询根节点\n                  query: () => this.$ajax.get('/api/file/node/list', { parentId: null })\n                }\n              },\n              bodyMenus: [\n                [\n                  {\n                    code: 'clearLoaded',\n                    name: '清除加载状态',\n                    disabled: false\n                  },\n                  {\n                    code: 'reloadNodes',\n                    name: '重新加载子节点',\n                    disabled: false\n                  },\n                  {\n                    code: 'expand',\n                    name: '展开节点',\n                    disabled: false\n                  },\n                  {\n                    code: 'contract',\n                    name: '收起节点',\n                    disabled: false\n                  }\n                ]\n              ],\n              tableColumn: [\n                { field: 'id', title: 'ID', width: 180, treeNode: true },\n                { field: 'name', title: '名称', editRender: { name: 'input' } },\n                { field: 'size', title: '大小', editRender: { name: 'input' } },\n                { field: 'createTime', title: '创建时间', formatter: this.formatterDate },\n                { field: 'updateTime', title: '修改时间', formatter: this.formatterDate }\n              ]\n            }\n          },\n          methods: {\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return this.$ajax.get('/api/file/node/list', { parentId: row.id })\n            },\n            getUpdateEvent () {\n              let updateRecords = this.$refs.xGrid.getUpdateRecords()\n              this.$XModal.alert(updateRecords.length)\n            },\n            visibleMethod  ({ row, type }) {\n              let xGrid = this.$refs.xGrid\n              if (type === 'body') {\n                this.bodyMenus.forEach(list => {\n                  list.forEach(item => {\n                    if (['clearLoaded', 'reloadNodes'].includes(item.code)) {\n                      item.disabled = !row.hasChild || !xGrid.isTreeExpandLoaded(row)\n                    } else if (['expand', 'contract'].includes(item.code)) {\n                      if (row.hasChild) {\n                        let isExpand = xGrid.isTreeExpandByRow(row)\n                        item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand\n                      } else {\n                        item.disabled = true\n                      }\n                    }\n                  })\n                })\n              }\n              return true\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              let xGrid = this.$refs.xGrid\n              switch (menu.code) {\n                case 'clearLoaded':\n                  xGrid.clearTreeExpandLoaded(row)\n                  break\n                case 'reloadNodes':\n                  xGrid.reloadTreeChilds(row)\n                  break\n                case 'expand':\n                  xGrid.setTreeExpansion(row, true)\n                  break\n                case 'contract':\n                  xGrid.setTreeExpansion(row, false)\n                  break\n              }\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return this.$utils.toDateString(t,"yyyy-MM-dd HH:mm:ss")},loadChildrenMethod:function(e){var t=e.row;return this.$ajax.get("/api/file/node/list",{parentId:t.id})},getUpdateEvent:function(){var e=this.$refs.xGrid.getUpdateRecords();this.$XModal.alert(e.length)},visibleMethod:function(e){var t=e.row,n=e.type,a=this.$refs.xGrid;return"body"===n&&this.bodyMenus.forEach((function(e){e.forEach((function(e){if(["clearLoaded","reloadNodes"].includes(e.code))e.disabled=!t.hasChild||!a.isTreeExpandLoaded(t);else if(["expand","contract"].includes(e.code))if(t.hasChild){var n=a.isTreeExpandByRow(t);e.disabled=["expand"].includes(e.code)?n:!n}else e.disabled=!0}))})),!0},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=(e.column,this.$refs.xGrid);switch(t.code){case"clearLoaded":a.clearTreeExpandLoaded(n);break;case"reloadNodes":a.reloadTreeChilds(n);break;case"expand":a.setTreeExpansion(n,!0);break;case"contract":a.setTreeExpansion(n,!1);break}}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"1be0":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("通过 "),n("grid-api-link",{attrs:{prop:"toolbar"}}),e._v(" 属性配置 "),n("grid-api-link",{attrs:{prop:"zoom"}}),e._v(" 开启全屏缩放按钮，按 Esc 可退出全屏")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:15,perfect:!0},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar:{refresh:!0,zoom:!0,custom:!0},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="530"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 15,\n                perfect: true\n              },\n              tableProxy: {\n                // 配置响应的数据属性\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  // page 对象： { pageSize, currentPage }\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n                  // body 对象： { removeRecords }\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              tableToolbar: {\n                refresh: true,\n                zoom: true,\n                custom: true\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name', editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'role', title: 'Role', editRender: { name: 'input' } },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"1e5b":function(e,t,n){"use strict";var a=n("8b7c"),i=n.n(a);i.a},"21be":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("工具栏：通过 "),n("grid-api-link",{attrs:{prop:"toolbar"}}),e._v(" 属性配置，使用 "),n("grid-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义模板")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.toolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("input",{attrs:{type:"text"}}),n("button",[e._v("搜索")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("reload")}}},[e._v("刷新")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("insert_actived")}}},[e._v("新增")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("mark_cancel")}}},[e._v("标记/取消")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("save")}}},[e._v("保存")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.exportData()}}},[e._v("导出.csv")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},toolbar:{id:"toolbar_demo_2",refresh:!0,custom:{storage:!0}},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          ref="xGrid"\n          height="530"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="toolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}">\n          <template v-slot:buttons>\n            <input type="text"/>\n            <vxe-button>搜索</vxe-button>\n            <vxe-button @click="$refs.xGrid.commitProxy(\'reload\')">刷新</vxe-button>\n            <vxe-button @click="$refs.xGrid.commitProxy(\'insert_actived\')">新增</vxe-button>\n            <vxe-button @click="$refs.xGrid.commitProxy(\'mark_cancel\')">标记/取消</vxe-button>\n            <vxe-button @click="$refs.xGrid.commitProxy(\'save\')">保存</vxe-button>\n            <vxe-button @click="$refs.xGrid.exportData()">导出.csv</vxe-button>\n          </template>\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 15\n              },\n              tableProxy: {\n                // 配置响应的数据属性\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  // page 对象： { pageSize, currentPage }\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n                  // body 对象： { removeRecords }\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              toolbar: {\n                id: 'toolbar_demo_2',\n                refresh: true,\n                custom: {\n                  storage: true\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name', editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'role', title: 'Role', editRender: { name: 'input' } },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"23ab":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 使用自定义模板渲染，通过 "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v(" 属性编写 "),n("a",{staticClass:"link",attrs:{href:"https://cn.vuejs.org/v2/guide/render-function.html#JSX",target:"_blank"}},[e._v("JSX")]),e._v(" 模板或 "),n("a",{staticClass:"link",attrs:{href:"https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM",target:"_blank"}},[e._v("VNode")]),n("br"),e._v(" 列："),n("br"),n("table-column-api-link",{attrs:{prop:"default"}}),e._v("：自定义内容模板（提前格式化好数据 > "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" > "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v("）"),n("br"),n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板"),n("br"),n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v(" 工具栏："),n("br"),n("grid-api-link",{attrs:{prop:"buttons"}}),e._v("：自定义按钮模板 ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"400",toolbar:e.tableToolbar,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}}}),n("vxe-modal",{attrs:{title:"查看详情",width:"800",height:"400",resize:""},model:{value:e.showDetails,callback:function(t){e.showDetails=t},expression:"showDetails"}},[[e.selectRow?n("div",{domProps:{innerHTML:e._s(e.selectRow.html3)}}):e._e()]],2),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"vue"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("d81d"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this,t=this.$createElement;return{showDetails:!1,selectRow:null,tableData:[],tableColumn:[{type:"seq",width:100,slots:{header:function(e){e.row;return[t("div",{class:"first-col"},[t("div",{class:"first-col-top"},["名称"]),t("div",{class:"first-col-bottom"},["序号"])])]}}},{field:"name",title:"Name",slots:{default:function(n){var a=n.row,i=n.column;return[t("span",{style:"color: red;"},[a.name]),t("button",{on:{click:function(){return e.showDetailEvent(a,i)}}},["弹框"])]}}},{field:"sex",title:"Sex",showHeaderOverflow:!0,filters:[{data:""}],filterMethod:this.filterSexMethod,editRender:{type:"default"},slots:{default:function(e){var n=e.row;e.column;return[t("a",{class:"link",attrs:{href:"https://xuliangzhan.github.io/vxe-table/"}},["我是超链接：",n.sex])]},header:function(n){var a=n.column;return[t("span",[t("i",["@"]),t("span",{style:"color: red;",on:{click:e.headerClickEvent}},[a.title])])]},filter:function(n){var a=n.column,i=n.context;return a.filters.map((function(n){return t("input",{attrs:{type:"type"},domProps:{value:n.data},on:{input:function(t){return e.changeFilterEvent(t,n,i)}}})}))},edit:function(e){var n=e.row;return[t("input",{attrs:{type:"text"},domProps:{value:n.sex},on:{input:function(e){n.sex=e.target.value}}})]}}},{field:"address",title:"Address",showOverflow:!0,slots:{default:function(t,n){var a=t.row;return[n("span",{style:{color:"blue"},on:{click:function(){return e.addressClickEvent(a)}}},a.address)]}}},{field:"html1",title:"Html片段",showOverflow:!0,slots:{default:function(e,t){var n=e.row;return[t("span",{domProps:{innerHTML:n.html1}})]}}},{field:"img1",title:"图片路径",slots:{default:function(e,t){var n=e.row;return[n.img1?t("img",{attrs:{src:n.img1},style:"width: 100px;"}):t("span",["无"])]}}}],tableToolbar:{custom:!0,slots:{buttons:function(){return[t("vxe-input",{attrs:{size:"small",placeholder:"搜索"}}),t("vxe-button",["搜索"])]},tools:function(){return[t("vxe-input",{attrs:{size:"small",placeholder:"搜索"}})]}}},demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="400"\n          :toolbar="tableToolbar"\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'cell\'}">\n        </vxe-grid>\n\n        <vxe-modal v-model="showDetails" title="查看详情" width="800" height="400" resize>\n          <template>\n            <div v-if="selectRow" v-html="selectRow.html3"></div>\n          </template>\n        </vxe-modal>\n        ',"\n        export default {\n          data () {\n            return {\n              showDetails: false,\n              selectRow: null,\n              tableData: [],\n              tableColumn: [\n                {\n                  type: 'seq',\n                  width: 100,\n                  slots: {\n                    header: ({ row }) => {\n                      return [\n                        <div class=\"first-col\">\n                          <div class=\"first-col-top\">名称</div>\n                          <div class=\"first-col-bottom\">序号</div>\n                        </div>\n                      ]\n                    }\n                  }\n                },\n                {\n                  field: 'name',\n                  title: 'Name',\n                  slots: {\n                    default: ({ row, column }) => {\n                      return [\n                        <span style=\"color: red;\">{ row.name }</span>,\n                        <button onClick={ () => this.showDetailEvent(row, column) }>弹框</button>\n                      ]\n                    }\n                  }\n                },\n                {\n                  field: 'sex',\n                  title: 'Sex',\n                  showHeaderOverflow: true,\n                  filters: [{ data: '' }],\n                  filterMethod: this.filterSexMethod,\n                  editRender: { type: 'default' },\n                  slots: {\n                    default: ({ row, column }) => {\n                      return [\n                        <a class=\"link\" href=\"https://xuliangzhan.github.io/vxe-table/\">我是超链接：{ row.sex }</a>\n                      ]\n                    },\n                    header: ({ column }) => {\n                      return [\n                        <span>\n                          <i>@</i>\n                          <span style=\"color: red;\" onClick={ this.headerClickEvent }>{ column.title }</span>\n                        </span>\n                      ]\n                    },\n                    filter: ({ column, context }) => {\n                      return column.filters.map(option => {\n                        return <input type=\"type\" value={ option.data } onInput={ evnt => this.changeFilterEvent(evnt, option, context) }/>\n                      })\n                    },\n                    edit: ({ row }) => {\n                      return [\n                        <input type=\"text\" value={ row.sex } onInput={ evnt => { row.sex = evnt.target.value } }/>\n                      ]\n                    }\n                  }\n                },\n                {\n                  field: 'address',\n                  title: 'Address',\n                  showOverflow: true,\n                  slots: {\n                    default: ({ row }, h) => {\n                      return [\n                        h('span', {\n                          style: {\n                            color: 'blue'\n                          },\n                          on: {\n                            click: () => this.addressClickEvent(row)\n                          }\n                        }, row.address)\n                      ]\n                    }\n                  }\n                },\n                {\n                  field: 'html1',\n                  title: 'Html片段',\n                  showOverflow: true,\n                  slots: {\n                    default: ({ row }, h) => {\n                      return [\n                        <span domPropsInnerHTML={ row.html1 }></span>\n                      ]\n                    }\n                  }\n                },\n                {\n                  field: 'img1',\n                  title: '图片路径',\n                  slots: {\n                    default: ({ row }, h) => {\n                      return [\n                        row.img1 ? <img src={ row.img1 } style=\"width: 100px;\"/> : <span>无</span>\n                      ]\n                    }\n                  }\n                }\n              ],\n              tableToolbar: {\n                custom: true,\n                slots: {\n                  buttons: () => {\n                    return [\n                      <vxe-input size=\"small\" placeholder=\"搜索\"></vxe-input>,\n                      <vxe-button>搜索</vxe-button>,\n                    ]\n                  },\n                  tools: () => {\n                    return [\n                      <vxe-input size=\"small\" placeholder=\"搜索\"></vxe-input>\n                    ]\n                  }\n                }\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n          },\n          methods: {\n            showDetailEvent (row) {\n              this.selectRow = row\n              this.showDetails = true\n            },\n            headerClickEvent (evnt) {\n              this.$XModal.alert('头部点击事件')\n            },\n            addressClickEvent (row) {\n              this.$XModal.alert(`address点击事件：${row.row}`)\n            },\n            filterSexMethod ({ option, row }) {\n              return row.sex === option.data\n            },\n            changeFilterEvent (evnt, option, context) {\n              option.data = evnt.target.value\n              context.changeMultipleOption(evnt, !!option.data, option)\n            }\n          }\n        }\n        ",'\n        .first-col {\n          position: relative;\n          height: 20px;\n        }\n        .first-col:before {\n          content: "";\n          position: absolute;\n          left: -15px;\n          top: 10px;\n          width: 110px;\n          height: 1px;\n          transform: rotate(28deg);\n          background-color: #e8eaec;\n        }\n        .first-col .first-col-top {\n          position: absolute;\n          right: 4px;\n          top: -10px;\n        }\n        .first-col .first-col-bottom {\n          position: absolute;\n          left: 4px;\n          bottom: -10px;\n        }\n        ']}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,100);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{showDetailEvent:function(e){this.selectRow=e,this.showDetails=!0},headerClickEvent:function(e){this.$XModal.alert("头部点击事件")},addressClickEvent:function(e){this.$XModal.alert("address点击事件：".concat(e.row))},filterSexMethod:function(e){var t=e.option,n=e.row;return n.sex===t.data},changeFilterEvent:function(e,t,n){t.data=e.target.value,n.changeMultipleOption(e,!!t.data,t)}}},d=l,s=(n("38c4"),n("2877")),c=Object(s["a"])(d,a,i,!1,null,"372de30a",null);t["default"]=c.exports},2796:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 高级表格，解决动态数据一切需求（动态列、动态数据、动态个性化...）"),n("br"),e._v(" 渲染性能对比："),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v("（性能最优，不需要为每一列创建实例） > "),n("table-api-link",{attrs:{name:"vxe-table"}}),e._v("（性能略差，需要为每一列创建实例）"),n("br"),e._v(" 通过 "),n("grid-api-link",{attrs:{prop:"columns"}}),e._v(" 动态配置列信息，这非常适用于动态渲染的场景，完全使用数据进行配置 ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",toolbar:"",height:"300",align:e.allAlign,loading:e.loading,columns:e.tableColumn,data:e.tableData},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){e.allAlign="left"}}},[e._v("居左")]),n("vxe-button",{on:{click:function(t){e.allAlign="center"}}},[e._v("居中")]),n("vxe-button",{on:{click:function(t){e.allAlign="right"}}},[e._v("居右")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{allAlign:null,loading:!1,tableColumn:[{type:"seq",width:50},{field:"name",title:"app.body.label.name"},{field:"sex",title:"app.body.label.sex",showHeaderOverflow:!0},{field:"address",title:"Address",showOverflow:!0}],tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="300"\n          :loading="loading"\n          :columns="tableColumn"\n          :data="tableData"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              allAlign: null,\n              loading: false,\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name' },\n                { field: 'sex', title: 'app.body.label.sex', showHeaderOverflow: true },\n                { field: 'address', title: 'Address', showOverflow: true }\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            this.$ajax.mockList(50).then(data => {\n              this.tableData = data\n              this.loading = false\n            })\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,this.$ajax.mockList(50).then((function(t){e.tableData=t,e.loading=!1}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"27a2":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 数据代理"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-grid-proxy"}},[e._v("（配置式代理项目示例）")]),e._v("：通过配置 "),n("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 启用数据代理将不需要再主动发送请求，由表格代理增删改查的相关调用逻辑，只需要配好对应的接口即可自动渲染"),n("br"),e._v(" 通过配置 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 参数开启分页功能，对于分页场景下，如果要实现分页动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"seq-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"startIndex"}}),e._v("} 属性设置起始值"),n("br"),e._v(" 分页情况下则默认读取响应结果中 page.total 和 result 属性，可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改 ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","row-id":"id","pager-config":{pageSize:10},"proxy-config":e.tableProxy,"checkbox-config":{reserve:!0},columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{seq:!0,props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))}}},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"role",title:"Role"},{field:"describe",title:"Describe",showOverflow:!0}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="530"\n          row-id="id"\n          :pager-config="{pageSize: 10}"\n          :proxy-config="tableProxy"\n          :checkbox-config="{reserve: true}"\n          :columns="tableColumn"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                seq: true, // 启用动态序号代理\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`)\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name' },\n                { field: 'nickname', title: 'Nickname' },\n                { field: 'role', title: 'Role' },\n                { field: 'describe', title: 'Describe', showOverflow: true }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"2eeb":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("懒加载树表格、数据代理")]),n("vxe-grid",{attrs:{border:"",resizable:"","proxy-config":e.tableProxy,columns:e.tableColumn,"tree-config":{lazy:!0,children:"children",hasChild:"hasChild",loadMethod:e.loadChildrenMethod}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{ajax:{query:function(){return e.$ajax.get("/api/file/node/list",{parentId:null})}}},tableColumn:[{field:"id",title:"ID",width:180,treeNode:!0},{field:"name",title:"名称"},{field:"size",title:"大小"},{field:"createTime",title:"创建时间",formatter:this.formatterDate},{field:"updateTime",title:"修改时间",formatter:this.formatterDate}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :tree-config="{lazy: true, children: \'children\', hasChild: \'hasChild\', loadMethod: loadChildrenMethod}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                ajax: {\n                  // 查询根节点\n                  query: () => this.$ajax.get('/api/file/node/list', { parentId: null })\n                }\n              },\n              tableColumn: [\n                { field: 'id', title: 'ID', width: 180, treeNode: true },\n                { field: 'name', title: '名称' },\n                { field: 'size', title: '大小' },\n                { field: 'createTime', title: '创建时间', formatter: this.formatterDate },\n                { field: 'updateTime', title: '修改时间', formatter: this.formatterDate }\n              ]\n            }\n          },\n          methods: {\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            },\n            loadChildrenMethod ({ row }) {\n              // 异步加载子节点\n              return this.$ajax.get('/api/file/node/list', { parentId: row.id })\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return this.$utils.toDateString(t,"yyyy-MM-dd HH:mm:ss")},loadChildrenMethod:function(e){var t=e.row;return this.$ajax.get("/api/file/node/list",{parentId:t.id})}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"32cf":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("树表格、数据代理")]),n("vxe-grid",{attrs:{border:"",resizable:"","tree-config":"","proxy-config":e.tableProxy,columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{ajax:{query:function(){return e.$ajax.get("/api/file/list").then((function(t){return e.$utils.toArrayTree(t,{key:"id",parentKey:"parentId",children:"children"})}))}}},tableColumn:[{field:"id",title:"ID",width:180,treeNode:!0},{field:"name",title:"名称"},{field:"size",title:"大小"},{field:"createTime",title:"创建时间",formatter:this.formatterDate},{field:"updateTime",title:"修改时间",formatter:this.formatterDate}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          tree-config\n          :proxy-config="tableProxy"\n          :columns="tableColumn"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                ajax: {\n                  // 处理树结构转换\n                  query: () => this.$ajax.get('/api/file/list').then(data => this.$utils.toArrayTree(data, { key: 'id', parentKey: 'parentId', children: 'children' }))\n                }\n              },\n              tableColumn: [\n                { field: 'id', title: 'ID', width: 180, treeNode: true },\n                { field: 'name', title: '名称' },\n                { field: 'size', title: '大小' },\n                { field: 'createTime', title: '创建时间', formatter: this.formatterDate },\n                { field: 'updateTime', title: '修改时间', formatter: this.formatterDate }\n              ]\n            }\n          },\n          methods: {\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return this.$utils.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},3814:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-grid",{attrs:{resizable:"",height:"528","filter-config":{remote:!0},toolbar:e.tableToolbar,"pager-config":e.tablePage,columns:e.tableColumn,"proxy-config":e.tableProxy,"checkbox-config":{labelField:"id",highlight:!0,range:!0},"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-grid-proxy"}},[e._v("查看配置式代理项目使用示例")]),e._v("，只需要一个 json 数据就可以非常简单的渲染一个支持 CRUD 功能完整的表格")])}],r=(n("99af"),n("a630"),n("a15b"),n("4e82"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],role:[{required:!0,message:"角色必须填写"}]},tablePage:{pageSize:15,pageSizes:[5,10,20,50,100,200,500,1e3]},tableProxy:{sort:!0,filter:!0,ajax:{query:function(t){var n=t.page,a=t.sort,i=t.filters,r={sort:a.property,order:a.order};return i.forEach((function(e){e.column;var t=e.property,n=e.values;r[t]=n.join(",")})),e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage),r)},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar:{buttons:[{code:"insert_actived",name:"Add",icon:"fa fa-plus"},{code:"mark_cancel",name:"Mark",icon:"fa fa-bookmark-o"},{code:"save",name:"Save",icon:"fa fa-save"}],refresh:!0,custom:!0},tableColumn:[{type:"seq",width:60,fixed:"left"},{type:"checkbox",title:"ID",width:140,fixed:"left"},{field:"name",title:"Name",remoteSort:!0,editRender:{name:"input"}},{field:"nickname",title:"Nickname",remoteSort:!0,editRender:{name:"input"}},{field:"age",title:"Age",remoteSort:!0,editRender:{name:"input"}},{field:"role",title:"Role",remoteSort:!0,width:200,filters:[{label:"前端开发",value:"前端"},{label:"后端开发",value:"后端"},{label:"测试",value:"测试"},{label:"程序员鼓励师",value:"程序员鼓励师"}],filterMultiple:!1,editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid v-bind="xGridOptions"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              xGridOptions: {\n                resizable: true,\n                height: 528,\n                filterConfig: {\n                  remote: true\n                },\n                checkboxConfig: {\n                  labelField: 'id',\n                  highlight: true,\n                  range: true\n                },\n                editConfig: {\n                  trigger: 'click',\n                  mode: 'row',\n                  showStatus: true\n                },\n                editRules: {\n                  name: [\n                    { required: true, message: '名称必须填写' },\n                    { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n                  ],\n                  role: [\n                    { required: true, message: '角色必须填写' }\n                  ]\n                },\n                pagerConfig: {\n                  pageSize: 15,\n                  pageSizes: [5, 10, 20, 50, 100, 200, 500, 1000]\n                },\n                proxyConfig: {\n                  sort: true,\n                  filter: true,\n                  ajax: {\n                    query: '/api/user/page/list/{{page.pageSize}}/{{page.currentPage}}',\n                    delete: '/api/user/save',\n                    save: '/api/user/save'\n                  }\n                },\n                toolbar: {\n                  buttons: [\n                    { code: 'insert_actived', name: 'Add', icon: 'fa fa-plus' },\n                    { code: 'mark_cancel', name: 'Mark', icon: 'fa fa-bookmark-o' },\n                    { code: 'save', name: 'Save', icon: 'fa fa-save' }\n                  ],\n                  refresh: true,\n                  custom: true\n                },\n                columns: [\n                  { type: 'seq', width: 60, fixed: 'left' },\n                  { type: 'checkbox', title: 'ID', width: 140, fixed: 'left' },\n                  { field: 'name', title: 'Name', remoteSort: true, editRender: { name: 'input' } },\n                  { field: 'nickname', title: 'Nickname', remoteSort: true, editRender: { name: 'input' } },\n                  { field: 'age', title: 'Age', remoteSort: true, editRender: { name: 'input' } },\n                  {\n                    field: 'role',\n                    title: 'Role',\n                    remoteSort: true,\n                    width: 200,\n                    filters: [\n                      { label: '前端开发', value: '前端' },\n                      { label: '后端开发', value: '后端' },\n                      { label: '测试', value: '测试' },\n                      { label: '程序员鼓励师', value: '程序员鼓励师' }\n                    ],\n                    filterMultiple: false,\n                    editRender: { name: 'input' }\n                  },\n                  { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n                ]\n              }\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"38c4":function(e,t,n){"use strict";var a=n("5197"),i=n.n(a);i.a},"420d":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 数据代理：通过配置 "),n("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 启用数据代理将不需要再主动发送请求，由表格代理增删改查的相关调用逻辑，只需要配好对应的接口即可自动渲染"),n("br"),e._v(" 响应结果默认必须是数组，非数组情况下可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改 ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530",loading:e.loading,"seq-config":{startIndex:(e.tablePage.currentPage-1)*e.tablePage.pageSize},"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData},on:{"page-change":e.handlePageChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{loading:!1,tablePage:{total:0,currentPage:1,pageSize:10,align:"left",pageSizes:[10,20,50,100,200,500],layouts:["Sizes","PrevJump","PrevPage","Number","NextPage","NextJump","FullJump","Total"],perfect:!0},tableColumn:[{type:"seq",width:60},{type:"checkbox",width:50},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"role",title:"Role"},{field:"describe",title:"Describe",showOverflow:!0}],tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="530"\n          :loading="loading"\n          :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"\n          :pager-config="tablePage"\n          :columns="tableColumn"\n          :data="tableData"\n          @page-change="handlePageChange"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tablePage: {\n                total: 0,\n                currentPage: 1,\n                pageSize: 10,\n                align: 'left',\n                pageSizes: [10, 20, 50, 100, 200, 500],\n                layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],\n                perfect: true\n              },\n              tableColumn: [\n                { type: 'seq', width: 60 },\n                { type: 'checkbox', width: 50 },\n                { field: 'name', title: 'Name' },\n                { field: 'nickname', title: 'Nickname' },\n                { field: 'role', title: 'Role' },\n                { field: 'describe', title: 'Describe', showOverflow: true }\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              // 模拟后台接口\n              this.loading = true\n              this.$ajax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`).then(({ page, result }) => {\n                this.tableData = result\n                this.tablePage.total = page.total\n                this.loading = false\n              }).catch(e => {\n                this.loading = false\n              })\n            },\n            searchEvent () {\n              this.tablePage.currentPage = 1\n              this.findList()\n            },\n            handlePageChange ({ currentPage, pageSize }) {\n              this.tablePage.currentPage = currentPage\n              this.tablePage.pageSize = pageSize\n              this.findList()\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.total=n.total,e.loading=!1})).catch((function(t){e.loading=!1}))},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},5197:function(e,t,n){},"57b4":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("实现附件上传，使用展开行和 "),n("table-api-link",{attrs:{prop:"readFile"}}),e._v(" 本地文件读取函数")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","max-height":"500",columns:e.tableColumn,data:e.tableData}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("a15b"),n("d81d"),n("fb6a"),n("b0c0"),n("3ca3"),n("1276"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this,t=this.$createElement;return{tableColumn:[{type:"seq",width:50},{type:"expand",width:120,slots:{content:function(e){var n=e.row;e.column;return[n.fileList.length?t("ul",{class:"file-list"},[n.fileList.map((function(e){return t("li",[t("span",[e.name]),t("span",[e.size]),t("span",[e.type]),t("span",[e.date])])}))]):t("div",{class:"file-empty"},["暂无附件"])]},default:function(e){var n=e.row;e.column;return[t("span",["（",n.fileList.length,"）"])]}}},{field:"name",title:"app.body.label.name"},{field:"sex",title:"app.body.label.sex"},{title:"操作",width:160,showOverflow:!0,slots:{default:function(n){var a=n.row;n.column;return[t("vxe-button",{attrs:{type:"primary"},on:{click:function(t){return e.uploadFileEvent(a)}}},["添加附件"])]}}}],tableData:[{name:"name1",sex:"男",age:"26",fileList:[]},{name:"name2",sex:"女",age:"28",fileList:[]},{name:"name3",sex:"男",age:"30",fileList:[]}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          ref="xGrid"\n          max-height="500"\n          :columns="tableColumn"\n          :data="tableData">\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                {\n                  type: 'expand',\n                  width: 120,\n                  slots: {\n                    content: ({ row, column }) => {\n                      return [\n                        row.fileList.length\n                          ? <ul class=\"file-list\">\n                            {\n                              row.fileList.map(file => {\n                                return <li>\n                                  <span>{ file.name }</span>\n                                  <span>{ file.size }</span>\n                                  <span>{ file.type }</span>\n                                  <span>{ file.date }</span>\n                                </li>\n                              })\n                            }\n                          </ul>\n                          : <div class=\"file-empty\">暂无附件</div>\n                      ]\n                    },\n                    default: ({ row, column }) => {\n                      return [\n                        <span>（{ row.fileList.length }）</span>\n                      ]\n                    }\n                  }\n                },\n                { field: 'name', title: 'app.body.label.name' },\n                { field: 'sex', title: 'app.body.label.sex' },\n                {\n                  title: '操作',\n                  width: 160,\n                  showOverflow: true,\n                  slots: {\n                    default: ({ row, column }) => {\n                      return [\n                        <vxe-button type=\"primary\" onClick={ e => this.uploadFileEvent(row) }>添加附件</vxe-button>\n                      ]\n                    }\n                  }\n                }\n              ],\n              tableData: [\n                { name: 'name1', sex: '男', age: '26', fileList: [] },\n                { name: 'name2', sex: '女', age: '28', fileList: [] },\n                { name: 'name3', sex: '男', age: '30', fileList: [] }\n              ]\n            }\n          },\n          methods: {\n            uploadFileEvent (row) {\n              this.$refs.xGrid.readFile({\n                multiple: true,\n                types: ['xlsx', 'csv', 'html']\n              }).then(evnt => {\n                Array.from(evnt.target.files).forEach(file => {\n                  let ns = file.name.split('.')\n                  let name = ns.slice(0, ns.length - 1).join('')\n                  let type = ns[ns.length - 1]\n                  let record = {\n                    name: name,\n                    size: file.size,\n                    type: type,\n                    date: this.$utils.toDateString(new Date())\n                  }\n                  row.fileList.push(record)\n                })\n              })\n            }\n          }\n        }\n        ","\n        .file-list li span{\n          display: inline-block;\n          width: 25%;\n        }\n        .file-empty {\n          text-align: center;\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{uploadFileEvent:function(e){var t=this;this.$refs.xGrid.readFile({multiple:!0,types:["xlsx","csv","html"]}).then((function(n){Array.from(n.target.files).forEach((function(n){var a=n.name.split("."),i=a.slice(0,a.length-1).join(""),r=a[a.length-1],o={name:i,size:n.size,type:r,date:t.$utils.toDateString(new Date)};e.fileList.push(o)}))}))}}},d=l,s=(n("1e5b"),n("2877")),c=Object(s["a"])(d,a,i,!1,null,"6bfd9ccc",null);t["default"]=c.exports},"5c3a5":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("工具栏：通过 "),n("grid-api-link",{attrs:{prop:"toolbar"}}),e._v(" 属性配置，支持显示/隐藏列、列宽拖动状态的保存功能，可以通过 "),n("toolbar-api-link",{attrs:{prop:"storage"}}),e._v(" 开启将列个性化的设置状态保存到本地")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"toolbar-button-click":e.toolbarButtonClickEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar:{id:"toolbar_demo_1",buttons:[{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"app.body.button.markCancel",dropdowns:[{code:"delete_selection",name:"app.body.button.deleteSelectedRecords"},{code:"remove_selection",name:"移除数据"}]},{code:"save",name:"app.body.button.save"},{name:"数据导出",dropdowns:[{code:"open_import",name:"高级导入"},{code:"open_export",name:"高级导出"}]},{code:"exportData111",name:"自定义按钮"},{name:"禁用按钮",disabled:!1,dropdowns:[{code:"other1",name:"下拉的按钮1",disabled:!1},{code:"other2",name:"下拉的按钮2",disabled:!0},{code:"other3",name:"下拉的按钮3",disabled:!1}]}],refresh:!0,import:!0,export:!0,zoom:!0,resizable:{storage:!0},custom:{storage:!0}},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="530"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          @toolbar-button-click="toolbarButtonClickEvent"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 15\n              },\n              tableProxy: {\n                // 配置响应的数据属性\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  // page 对象： { pageSize, currentPage }\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n                  // body 对象： { removeRecords }\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              tableToolbar: {\n                buttons: [\n                  { code: 'insert_actived', name: '新增' },\n                  {\n                    code: 'mark_cancel',\n                    name: 'app.body.button.markCancel',\n                    dropdowns: [\n                      { code: 'delete_selection', name: 'app.body.button.deleteSelectedRecords' },\n                      { code: 'remove_selection', name: '移除数据' }\n                    ]\n                  },\n                  { code: 'save', name: 'app.body.button.save' },\n                  {\n                    name: '数据导出',\n                    dropdowns: [\n                      { code: 'open_import', name: '高级导入' },\n                      { code: 'open_export', name: '高级导出' }\n                    ]\n                  },\n                  { code: 'myBtn', name: '自定义按钮' },\n                  {\n                    name: '禁用按钮',\n                    disabled: false,\n                    dropdowns: [\n                      {\n                        code: 'other1',\n                        name: '下拉的按钮1',\n                        disabled: false\n                      },\n                      {\n                        code: 'other2',\n                        name: '下拉的按钮2',\n                        disabled: true\n                      },\n                      {\n                        code: 'other3',\n                        name: '下拉的按钮3',\n                        disabled: false\n                      }\n                    ]\n                  }\n                ],\n                refresh: true, // 刷新按钮\n                import: true, // 导入按钮\n                export: true, // 导出按钮\n                zoom: true, // 最大化按钮\n                // 列宽操作记录\n                resizable: {\n                  storage: true\n                },\n                // 列操作记录\n                custom: {\n                  storage: true\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name', editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'role', title: 'Role', editRender: { name: 'input' } },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ]\n            }\n          },\n          methods: {\n            toolbarButtonClickEvent ({ code }, event) {\n              switch (code) {\n                case 'myBtn':\n                  this.$XModal.alert(code)\n                  break\n              }\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{toolbarButtonClickEvent:function(e,t){var n=e.code;switch(n){case"myBtn":this.$XModal.alert(n);break}}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},6051:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("设置 "),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"activeMethod"}}),e._v(" 方法判断单元格是否禁用，例如：限制第二行不允许编辑")],1),n("vxe-grid",{attrs:{border:"","show-overflow":"",columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"row",activeMethod:e.activeRowMethod}},on:{"edit-disabled":e.editDisabledEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("配合 "),n("table-api-link",{attrs:{prop:"edit-actived"}}),e._v(" 事件，实现行编辑中对列的权限控制，例如：限制 age 小于 27 的与 name 为 'x' 开头的列禁止编辑")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"",columns:e.tableColumn2,data:e.tableData,"edit-config":{trigger:"click",mode:"row"}},on:{"edit-actived":e.editActivedEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("c975"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{tableData:[],tableColumn:[{type:"seq",width:50},{field:"name",title:"app.body.label.name",editRender:{name:"input"}},{field:"sex",title:"app.body.label.sex",editRender:{name:"input"}},{field:"age",title:"Age",editRender:{name:"input"}},{field:"address",title:"Address",editRender:{name:"input"}}],tableColumn2:[{type:"seq",width:50},{field:"name",title:"app.body.label.name",editRender:{name:"input",attrs:{disabled:!1}}},{field:"sex",title:"app.body.label.sex",editRender:{name:"input",attrs:{disabled:!1}}},{field:"age",title:"Age",editRender:{name:"input",attrs:{disabled:!1}}},{field:"address",title:"Address",editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          show-overflow\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'row\', activeMethod: activeRowMethod}"\n          @edit-disabled="editDisabledEvent">\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name', editRender: { name: 'input' } },\n                { field: 'sex', title: 'app.body.label.sex', editRender: { name: 'input' } },\n                { field: 'age', title: 'Age', editRender: { name: 'input' } },\n                { field: 'address', title: 'Address', editRender: { name: 'input' } }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            activeRowMethod ({ row, rowIndex }) {\n              if (rowIndex === 1) {\n                return false\n              }\n              return true\n            },\n            editDisabledEvent ({ row, column }) {\n              alert('禁止编辑')\n            }\n          }\n        }\n        ",'\n        <vxe-grid\n          border\n          show-overflow\n          ref="xGrid"\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"\n          @edit-actived="editActivedEvent">\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name', editRender: { name: 'input', attrs: { disabled: false } } },\n                { field: 'sex', title: 'app.body.label.sex', editRender: { name: 'input', attrs: { disabled: false } } },\n                { field: 'age', title: 'Age', editRender: { name: 'input', attrs: { disabled: false } } },\n                { field: 'address', title: 'Address', editRender: { name: 'input' } }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            editActivedEvent ({ row }) {\n              let xGrid = this.$refs.xGrid\n              let nameColumn = xGrid.getColumnByField('name')\n              let ageColumn = xGrid.getColumnByField('age')\n              let sexColumn = xGrid.getColumnByField('sex')\n              // name 为 'x' 开头的列禁止编辑\n              let isNameDisabled = (row.name || '').indexOf('x') === 0\n              // age 小于 27 的列禁止编辑\n              let isAgeDisabled = row.age < 27\n              // sex 值编辑为 1 的列禁止编辑\n              let isSexDisabled = row.sex === '1'\n\n              nameColumn.editRender.attrs.disabled = isNameDisabled\n              ageColumn.editRender.attrs.disabled = isAgeDisabled\n              sexColumn.editRender.attrs.disabled = isSexDisabled\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{activeRowMethod:function(e){e.row;var t=e.rowIndex;return 1!==t},editActivedEvent:function(e){var t=e.row,n=this.$refs.xGrid,a=n.getColumnByField("name"),i=n.getColumnByField("age"),r=n.getColumnByField("sex"),o=0===(t.name||"").indexOf("x"),l=t.age<27,d="1"===t.sex;a.editRender.attrs.disabled=o,i.editRender.attrs.disabled=l,r.editRender.attrs.disabled=d},editDisabledEvent:function(e){e.row,e.column;this.$XModal.alert("禁止编辑")}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},6503:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("快捷菜单，实现对按钮的控制，通过 "),n("table-api-link",{attrs:{prop:"visibleMethod"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"visible"}}),e._v(" | "),n("table-api-link",{attrs:{prop:"disabled"}}),e._v(" 属性来控制菜单选项的操作权限")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","show-footer":"","highlight-current-row":"","footer-method":e.footerMethod,columns:e.tableColumn,data:e.tableData,"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},footer:{options:e.footerMenus},visibleMethod:e.visibleMethod}},on:{"cell-context-menu":e.cellContextMenuEvent,"context-menu-click":e.contextMenuClickEvent}}),e._m(0),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v("    "),n("code",[e._v("\n      | Arrow Up ↑ | 移动到上一个菜单选项 |\n      | Arrow Down ↓ | 移动到下一个菜单选项 |\n      | Arrow Left ← | 关闭二级菜单 |\n      | Arrow Right → | 打开二级菜单 |\n      | Esc | 关闭菜单选项 |\n      | Enter | 选中当前菜单选项 |\n      | Spacebar | 选中当前菜单选项 |\n    ")]),e._v("\n  ")])}],r=(n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("0edb")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableColumn:[{type:"seq",width:50},{field:"name",title:"app.body.label.name"},{field:"age",title:"app.body.label.age"},{field:"date3",title:"Date",showOverflow:!0}],headerMenus:[[{code:"exportAll",name:"导出所有.csv",prefixIcon:"fa fa-download",visible:!0,disabled:!1}]],bodyMenus:[[{code:"copy",name:"复制内容",prefixIcon:"fa fa-copy",visible:!0,disabled:!1},{code:"clear",name:"清除内容",visible:!0,disabled:!1},{code:"reload",name:"刷新表格",visible:!0,disabled:!1}],[{code:"myPrint",name:"打印",prefixIcon:"fa fa-print",visible:!0,disabled:!1},{code:"myExport",name:"导出.csv",prefixIcon:"fa fa-download",visible:!0,disabled:!1}]],footerMenus:[[{code:"exportAll",name:"导出所有.csv",prefixIcon:"fa fa-download",visible:!0,disabled:!1}]],tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          show-footer\n          highlight-current-row\n          ref="xGrid"\n          :footer-method="footerMethod"\n          :columns="tableColumn"\n          :data="tableData"\n          :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}"\n          @cell-context-menu="cellContextMenuEvent"\n          @context-menu-click="contextMenuClickEvent"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                { field: 'name', title: 'app.body.label.name' },\n                { field: 'age', title: 'app.body.label.age' },\n                { field: 'date3', title: 'Date', showOverflow: true }\n              ],\n              headerMenus: [\n                [\n                  { code: 'exportAll', name: '导出所有.csv', prefixIcon: 'fa fa-download', visible: true, disabled: false }\n                ]\n              ],\n              bodyMenus: [\n                [\n                  { code: 'copy', name: '复制内容', prefixIcon: 'fa fa-copy', visible: true, disabled: false },\n                  { code: 'clear', name: '清除内容', visible: true, disabled: false },\n                  { code: 'reload', name: '刷新表格', visible: true, disabled: false }\n                ],\n                [\n                  { code: 'myPrint', name: '打印', prefixIcon: 'fa fa-print', visible: true, disabled: false },\n                  { code: 'myExport', name: '导出.csv', prefixIcon: 'fa fa-download', visible: true, disabled: false }\n                ]\n              ],\n              footerMenus: [\n                [\n                  { code: 'exportAll', name: '导出所有.csv', prefixIcon: 'fa fa-download', visible: true, disabled: false }\n                ]\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n          },\n          methods: {\n            visibleMethod ({ type, options, column }) {\n              // 示例：只有 name 列允许操作，清除按钮只能在 age 才显示\n              // 显示之前处理按钮的操作权限\n              let isDisabled = !column || column.property !== 'name'\n              let isVisible = column && column.property === 'age'\n              options.forEach(list => {\n                list.forEach(item => {\n                  if (['copy'].includes(item.code)) {\n                    item.disabled = isDisabled\n                  }\n                  if (['clear'].includes(item.code)) {\n                    item.visible = isVisible\n                  }\n                })\n              })\n              return true\n            },\n            cellContextMenuEvent ({ row }) {\n              this.$refs.xGrid.setCurrentRow(row)\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              let xGrid = this.$refs.xGrid\n              switch (menu.code) {\n                case 'copy':\n                  if (row && column) {\n                    if (XEClipboard.copy(row[column.property])) {\n                      this.$XModal.message({ message: '已复制到剪贴板！', status: 'success' })\n                    }\n                  }\n                  break\n                case 'clear':\n                  xGrid.clearData(row, column.property)\n                  break\n                case 'myPrint':\n                  xGrid.print()\n                  break\n                case 'myExport':\n                  xGrid.exportData()\n                  break\n              }\n            },\n            footerMethod ({ columns, data }) {\n              return [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age'].includes(column.property)) {\n                    return this.$utils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,4)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){d.a.highlightBlock(e)}))},methods:{visibleMethod:function(e){e.type;var t=e.options,n=e.column,a=!n||"name"!==n.property,i=n&&"age"===n.property;return t.forEach((function(e){e.forEach((function(e){["copy"].includes(e.code)&&(e.disabled=a),["clear"].includes(e.code)&&(e.visible=i)}))})),!0},cellContextMenuEvent:function(e){var t=e.row;this.$refs.xGrid.setCurrentRow(t)},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column,i=this.$refs.xGrid;switch(t.code){case"copy":n&&a&&o.a.copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;case"clear":i.clearData(n,a.property);break;case"myPrint":i.print();break;case"myExport":i.exportData();break}},footerMethod:function(e){var t=this,n=e.columns,a=e.data;return[n.map((function(e,n){return 0===n?"和值":["age"].includes(e.property)?t.$utils.sum(a,e.property):null}))]}}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},"7e08":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("反转表格，只需要将 "),n("grid-api-link",{attrs:{prop:"columns"}}),e._v(" 和 "),n("grid-api-link",{attrs:{prop:"data"}}),e._v(" 数据进行反转")],1),n("vxe-grid",{staticClass:"reverse-table",attrs:{border:"","show-header":!1,columns:e.tableColumn,data:e.tableData}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),n("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("更多配置")]),n("vxe-grid",{staticClass:"reverse-table",attrs:{border:"","show-overflow":"",height:"400","show-header":!1,columns:e.tableColumn2,data:e.tableData2}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n    "),n("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{tableColumn:[{field:"name",title:"Name"},{field:"role",title:"Role"},{field:"sex",title:"Sex"},{field:"age",title:"Age"},{field:"date3",title:"Date"}],tableColumn2:[{field:"name",title:"Name"},{field:"role",title:"Role"},{field:"sex",title:"Sex"},{field:"age",title:"Age"},{field:"date2",title:"Datetime"},{field:"rate",title:"Rate"},{field:"address2",title:"Address"},{field:"date3",title:"Date"},{field:"updateTime",title:"UpdateTime"},{field:"createTime",title:"CreateTime"}],tableData:[],tableData2:[],demoCodes:['\n        <vxe-grid\n          border\n          highlight-hover-row\n          class="reverse-table"\n          :show-header="false"\n          :columns="tableColumn"\n          :data="tableData"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { field: 'name', title: 'Name' },\n                { field: 'role', title: 'Role' },\n                { field: 'sex', title: 'Sex' },\n                { field: 'age', title: 'Age' },\n                { field: 'address2', title: 'Address' },\n                { field: 'date3', title: 'Date' }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n            this.reverseTable()\n          },\n          methods: {\n            // 反转函数\n            reverseTable () {\n              let tableData = this.tableData\n              this.tableData = this.tableColumn.map(column => {\n                let item = { 0: column.title }\n                tableData.forEach((row, rowIndex) => {\n                  item[rowIndex + 1] = row[column.field]\n                })\n                return item\n              })\n              this.tableColumn = [{\n                field: '0',\n                fixed: 'left',\n                width: 80\n              }].concat(tableData.map((item, index) => {\n                return {\n                  field: `${index + 1}`,\n                  width: 120\n                }\n              }))\n            }\n          }\n        }\n        ","\n        .reverse-table .vxe-body--row .vxe-body--column:first-child {\n          background-color: #f8f8f9;\n        }\n        ",'\n        <vxe-grid\n          border\n          show-overflow\n          highlight-hover-row\n          class="reverse-table"\n          height="400"\n          :show-header="false"\n          :columns="tableColumn"\n          :data="tableData"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { field: 'name', title: 'Name' },\n                { field: 'role', title: 'Role' },\n                { field: 'sex', title: 'Sex' },\n                { field: 'age', title: 'Age' },\n                { field: 'date2', title: 'Datetime' },\n                { field: 'rate', title: 'Rate' },\n                { field: 'address2', title: 'Address' },\n                { field: 'date3', title: 'Date' },\n                { field: 'updateTime', title: 'UpdateTime' },\n                { field: 'createTime', title: 'CreateTime' }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 200)\n            this.reverseTable()\n          },\n          methods: {\n            // 反转函数\n            reverseTable () {\n              let tableData = this.tableData\n              this.tableData = this.tableColumn.map(column => {\n                let item = { 0: column.title }\n                tableData.forEach((row, rowIndex) => {\n                  item[rowIndex + 1] = row[column.field]\n                })\n                return item\n              })\n              this.tableColumn = [{\n                field: '0',\n                fixed: 'left',\n                width: 80\n              }].concat(tableData.map((item, index) => {\n                return {\n                  field: `${index + 1}`,\n                  width: 120\n                }\n              }))\n            }\n          }\n        }\n        ","\n        .reverse-table .vxe-body--row .vxe-body--column:first-child {\n          background-color: #f8f8f9;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.tableData2=window.MOCK_DATA_LIST.slice(0,200),this.reverseTable(),this.reverseTable2()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{reverseTable:function(){var e=this.tableData;this.tableData=this.tableColumn.map((function(t){var n={0:t.title};return e.forEach((function(e,a){n[a+1]=e[t.field]})),n})),this.tableColumn=[{field:"0",fixed:"left",width:80}].concat(e.map((function(e,t){return{field:"".concat(t+1),minWidth:120}})))},reverseTable2:function(){var e=this.tableData2;this.tableData2=this.tableColumn2.map((function(t){var n={0:t.title};return e.forEach((function(e,a){n[a+1]=e[t.field]})),n})),this.tableColumn2=[{field:"0",fixed:"left",width:80}].concat(e.map((function(e,t){return{field:"".concat(t+1),minWidth:120}})))}}},d=l,s=(n("a83a"),n("2877")),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},8481:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("自定义工具栏按钮图标，可以局部替换也可以 "),n("router-link",{attrs:{to:{name:"StartIcons"}}},[e._v("全部替换")])],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"500","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar:{buttons:[{code:"insert_actived",name:"新增",icon:"fa fa-plus"},{code:"mark_cancel",name:"app.body.button.markCancel",icon:"fa fa-bookmark-o",dropdowns:[{code:"delete_selection",name:"app.body.button.deleteSelectedRecords",icon:"fa fa-trash-o"},{code:"remove_selection",name:"移除数据",icon:"fa fa-remove"}]},{code:"save",name:"app.body.button.save",icon:"fa fa-save"},{name:"导入导出",icon:"fa fa-file",dropdowns:[{code:"import",name:"高级导入",icon:"fa fa-cloud-upload"},{code:"export",name:"高级导出",icon:"fa fa-cloud-download"}]}],resizable:!0,refresh:{icon:"fa fa-refresh",iconLoading:"fa fa-spinner fa-spin"},import:{icon:"fa fa-upload"},export:{icon:"fa fa-download"},zoom:{iconIn:"fa fa-arrows-alt",iconOut:"fa fa-expand"},custom:{icon:"fa fa-cog"}},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="500"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 15\n              },\n              tableProxy: {\n                // 配置响应的数据属性\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  // page 对象： { pageSize, currentPage }\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n                  // body 对象： { removeRecords }\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              tableToolbar: {\n                buttons: [\n                  { code: 'insert_actived', name: '新增', icon: 'fa fa-plus' },\n                  {\n                    code: 'mark_cancel',\n                    name: 'app.body.button.markCancel',\n                    icon: 'fa fa-bookmark-o',\n                    dropdowns: [\n                      { code: 'delete_selection', name: 'app.body.button.deleteSelectedRecords', icon: 'fa fa-trash-o' },\n                      { code: 'remove_selection', name: '移除数据', icon: 'fa fa-remove' }\n                    ]\n                  },\n                  { code: 'save', name: 'app.body.button.save', icon: 'fa fa-save' },\n                  {\n                    name: '导入导出',\n                    icon: 'fa fa-file',\n                    dropdowns: [\n                      { code: 'import', name: '高级导入', icon: 'fa fa-cloud-upload' },\n                      { code: 'export', name: '高级导出', icon: 'fa fa-cloud-download' }\n                    ]\n                  }\n                ],\n                resizable: true,\n                refresh: {\n                  icon: 'fa fa-refresh',\n                  iconLoading: 'fa fa-spinner fa-spin'\n                },\n                import: {\n                  icon: 'fa fa-upload'\n                },\n                export: {\n                  icon: 'fa fa-download'\n                },\n                zoom: {\n                  iconIn: 'fa fa-arrows-alt',\n                  iconOut: 'fa fa-expand'\n                },\n                custom: {\n                  icon: 'fa fa-cog'\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name', editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'role', title: 'Role', editRender: { name: 'input' } },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"8b7c":function(e,t,n){},"8bfe":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("分组表头")]),n("vxe-grid",{attrs:{border:"",stripe:"",resizable:"",height:"500",columns:e.tableColumn,data:e.tableData}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{tableColumn:[{type:"seq",width:50},{title:"基本信息",children:[{field:"name",title:"Name"},{title:"其他信息",children:[{field:"rate",title:"Rate"},{field:"age",title:"Age"}]},{field:"sex",title:"Sex"}]},{field:"address",title:"Address",showOverflow:!0}],tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          stripe\n          resizable\n          height="500"\n          :columns="tableColumn"\n          :data="tableData"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { type: 'seq', width: 50 },\n                {\n                  title: '基本信息',\n                  children: [\n                    { field: 'name', title: 'Name' },\n                    {\n                      title: '其他信息',\n                      children: [\n                        { field: 'rate', title: 'Rate' },\n                        { field: 'age', title: 'Age' }\n                      ]\n                    },\n                    { field: 'sex', title: 'Sex' }\n                  ]\n                },\n                { field: 'address', title: 'Address', showOverflow: true }\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},9516:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("可编辑表格")]),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"",height:"530",loading:e.loading,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"page-change":e.handlePageChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){return{loading:!1,tablePage:{total:0,currentPage:1,pageSize:10,pageSizes:[10,20,50,100,200,500]},tableColumn:[{type:"seq",width:60},{type:"checkbox",width:50},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"sex",title:"Sex",editRender:{name:"select",options:[]}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          ref="xGrid"\n          height="530"\n          :loading="loading"\n          :pager-config="tablePage"\n          :columns="tableColumn"\n          :data="tableData"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          @page-change="handlePageChange"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tablePage: {\n                total: 0,\n                currentPage: 1,\n                pageSize: 10\n              },\n              tableColumn: [\n                { type: 'seq', width: 60 },\n                { type: 'checkbox', width: 50 },\n                { field: 'name', title: 'Name', editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'sex', title: 'Sex', editRender: { name: 'select', options: [] } },\n                { field: 'role', title: 'Role', editRender: { name: 'input' } },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n            this.findSexList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              this.$ajax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`)then(({ page, result }) => {\n                this.tableData = result\n                this.tablePage.total = page.total\n                this.loading = false\n              }).catch(e => {\n                this.loading = false\n              })\n            },\n            findSexList () {\n              return this.$ajax.get('/api/conf/sex/list').then(data => {\n                // 异步更新下拉选项\n                let column = this.$refs.xGrid.getColumnByField('sex')\n                column.editRender.options = data\n              })\n            },\n            searchEvent () {\n              this.tablePage.currentPage = 1\n              this.findList()\n            },\n            handlePageChange ({currentPage, pageSize}) {\n              this.tablePage.currentPage = currentPage\n              this.tablePage.pageSize = pageSize\n              this.findList()\n            }\n          }\n        }\n        "]}},created:function(){this.findList(),this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.total=n.total,e.loading=!1})).catch((function(t){e.loading=!1}))},findSexList:function(){var e=this;return this.$ajax.get("/api/conf/sex/list").then((function(t){var n=e.$refs.xGrid.getColumnByField("sex");n.editRender.options=t}))},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},"96cf":function(e,t,n){var a=function(e){"use strict";var t,n=Object.prototype,a=n.hasOwnProperty,i="function"===typeof Symbol?Symbol:{},r=i.iterator||"@@iterator",o=i.asyncIterator||"@@asyncIterator",l=i.toStringTag||"@@toStringTag";function d(e,t,n,a){var i=t&&t.prototype instanceof b?t:b,r=Object.create(i.prototype),o=new S(a||[]);return r._invoke=k(e,n,o),r}function s(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(a){return{type:"throw",arg:a}}}e.wrap=d;var c="suspendedStart",u="suspendedYield",p="executing",f="completed",m={};function b(){}function h(){}function v(){}var g={};g[r]=function(){return this};var x=Object.getPrototypeOf,y=x&&x(x(P([])));y&&y!==n&&a.call(y,r)&&(g=y);var w=v.prototype=b.prototype=Object.create(g);function _(e){["next","throw","return"].forEach((function(t){e[t]=function(e){return this._invoke(t,e)}}))}function C(e){function t(n,i,r,o){var l=s(e[n],e,i);if("throw"!==l.type){var d=l.arg,c=d.value;return c&&"object"===typeof c&&a.call(c,"__await")?Promise.resolve(c.__await).then((function(e){t("next",e,r,o)}),(function(e){t("throw",e,r,o)})):Promise.resolve(c).then((function(e){d.value=e,r(d)}),(function(e){return t("throw",e,r,o)}))}o(l.arg)}var n;function i(e,a){function i(){return new Promise((function(n,i){t(e,a,n,i)}))}return n=n?n.then(i,i):i()}this._invoke=i}function k(e,t,n){var a=c;return function(i,r){if(a===p)throw new Error("Generator is already running");if(a===f){if("throw"===i)throw r;return E()}n.method=i,n.arg=r;while(1){var o=n.delegate;if(o){var l=R(o,n);if(l){if(l===m)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(a===c)throw a=f,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);a=p;var d=s(e,t,n);if("normal"===d.type){if(a=n.done?f:u,d.arg===m)continue;return{value:d.arg,done:n.done}}"throw"===d.type&&(a=f,n.method="throw",n.arg=d.arg)}}}function R(e,n){var a=e.iterator[n.method];if(a===t){if(n.delegate=null,"throw"===n.method){if(e.iterator["return"]&&(n.method="return",n.arg=t,R(e,n),"throw"===n.method))return m;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return m}var i=s(a,e.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,m;var r=i.arg;return r?r.done?(n[e.resultName]=r.value,n.next=e.nextLoc,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,m):r:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,m)}function $(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function D(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function S(e){this.tryEntries=[{tryLoc:"root"}],e.forEach($,this),this.reset(!0)}function P(e){if(e){var n=e[r];if(n)return n.call(e);if("function"===typeof e.next)return e;if(!isNaN(e.length)){var i=-1,o=function n(){while(++i<e.length)if(a.call(e,i))return n.value=e[i],n.done=!1,n;return n.value=t,n.done=!0,n};return o.next=o}}return{next:E}}function E(){return{value:t,done:!0}}return h.prototype=w.constructor=v,v.constructor=h,v[l]=h.displayName="GeneratorFunction",e.isGeneratorFunction=function(e){var t="function"===typeof e&&e.constructor;return!!t&&(t===h||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,v):(e.__proto__=v,l in e||(e[l]="GeneratorFunction")),e.prototype=Object.create(w),e},e.awrap=function(e){return{__await:e}},_(C.prototype),C.prototype[o]=function(){return this},e.AsyncIterator=C,e.async=function(t,n,a,i){var r=new C(d(t,n,a,i));return e.isGeneratorFunction(n)?r:r.next().then((function(e){return e.done?e.value:r.next()}))},_(w),w[l]="Generator",w[r]=function(){return this},w.toString=function(){return"[object Generator]"},e.keys=function(e){var t=[];for(var n in e)t.push(n);return t.reverse(),function n(){while(t.length){var a=t.pop();if(a in e)return n.value=a,n.done=!1,n}return n.done=!0,n}},e.values=P,S.prototype={constructor:S,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(D),!e)for(var n in this)"t"===n.charAt(0)&&a.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=t)},stop:function(){this.done=!0;var e=this.tryEntries[0],t=e.completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var n=this;function i(a,i){return l.type="throw",l.arg=e,n.next=a,i&&(n.method="next",n.arg=t),!!i}for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r],l=o.completion;if("root"===o.tryLoc)return i("end");if(o.tryLoc<=this.prev){var d=a.call(o,"catchLoc"),s=a.call(o,"finallyLoc");if(d&&s){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(d){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return i(o.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i.tryLoc<=this.prev&&a.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var r=i;break}}r&&("break"===e||"continue"===e)&&r.tryLoc<=t&&t<=r.finallyLoc&&(r=null);var o=r?r.completion:{};return o.type=e,o.arg=t,r?(this.method="next",this.next=r.finallyLoc,m):this.complete(o)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),m},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.finallyLoc===e)return this.complete(n.completion,n.afterLoc),D(n),m}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var n=this.tryEntries[t];if(n.tryLoc===e){var a=n.completion;if("throw"===a.type){var i=a.arg;D(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(e,n,a){return this.delegate={iterator:P(e),resultName:n,nextLoc:a},"next"===this.method&&(this.arg=t),m}},e}(e.exports);try{regeneratorRuntime=a}catch(i){Function("r","regeneratorRuntime = r")(a)}},a127:function(e,t,n){},a1a0:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 查询代理"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-grid-proxy"}},[e._v("（配置式代理项目示例）")]),e._v("、服务端排序代理、服务端筛选代理、分页代理、增删改查"),n("br"),e._v(" 对于分页场景下，如果想要保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"checkbox-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性"),n("br"),e._v(" 还可以通过 "),n("toolbar-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 设置个性化列禁止勾选"),n("br"),e._v(" 由 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来 ")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","highlight-hover-row":"",height:"530","row-id":"id","sort-config":{trigger:"cell"},"filter-config":{remote:!0},"pager-config":e.tablePage,toolbar:e.tableToolbar,"proxy-config":e.tableProxy,columns:e.tableColumn,"checkbox-config":{labelField:"id",reserve:!0,highlight:!0,range:!0},"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},scopedSlots:e._u([{key:"empty",fn:function(){return[n("span",{staticStyle:{color:"red"}},[n("img",{attrs:{src:"static/other/img1.gif"}}),n("p",[e._v("莫慌！没数据了而已！")])])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("caad"),n("a15b"),n("4e82"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("96cf"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],role:[{required:!0,message:"角色必须填写"}]},tablePage:{pageSize:15,pageSizes:[5,10,20,50,100,200,500,1e3]},tableProxy:{seq:!0,sort:!0,filter:!0,ajax:{query:function(t){var n=t.page,a=t.sort,i=t.filters,r={sort:a.property,order:a.order};return i.forEach((function(e){e.column;var t=e.property,n=e.values;r[t]=n.join(",")})),e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage),r)},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar:{id:"full_edit_1",buttons:[{code:"insert_actived",name:"新增",icon:"fa fa-plus",disabled:!1},{code:"mark_cancel",name:"app.body.button.markCancel",icon:"fa fa-bookmark-o",disabled:!1,dropdowns:[{code:"delete_selection",icon:"fa fa-trash-o",name:"app.body.button.deleteSelectedRecords",disabled:!1},{code:"remove_selection",icon:"fa fa-remove",name:"移除数据",disabled:!1}]},{code:"save",name:"app.body.button.save",icon:"fa fa-save",disabled:!1}],refresh:!0,import:!0,export:!0,zoom:!0,resizable:{storage:!0},custom:{storage:!0,checkMethod:this.checkColumnMethod}},tableColumn:[{type:"checkbox",title:"ID",width:120},{field:"name",title:"Name",remoteSort:!0,editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"sex",title:"Sex",editRender:{name:"select",options:[]}},{field:"role",title:"Role",remoteSort:!0,width:200,filters:[{label:"前端开发",value:"前端"},{label:"后端开发",value:"后端"},{label:"测试",value:"测试"},{label:"程序员鼓励师",value:"程序员鼓励师"}],filterMultiple:!1,editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          highlight-hover-row\n          ref="xGrid"\n          height="530"\n          row-id="id"\n          :sort-config="{trigger: \'cell\'}"\n          :filter-config="{remote: true}"\n          :pager-config="tablePage"\n          :toolbar="tableToolbar"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :checkbox-config="{labelField: \'id\', reserve: true, highlight: true, range: true}"\n          :edit-rules="validRules"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}">\n          <template v-slot:empty>\n            <span style="color: red;">\n              <img src="static/other/img1.gif">\n              <p>莫慌！没数据了而已！</p>\n            </span>\n          </template>\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              validRules: {\n                name: [\n                  { required: true, message: '名称必须填写' },\n                  { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n                ],\n                role: [\n                  { required: true, message: '角色必须填写' }\n                ]\n              },\n              tablePage: {\n                pageSize: 15,\n                pageSizes: [5, 10, 20, 50, 100, 200, 500, 1000]\n              },\n              tableProxy: {\n                seq: true, // 启用动态序号代理\n                sort: true, // 启用排序代理\n                filter: true, // 启用筛选代理\n                ajax: {\n                  // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）\n                  query: ({ page, sort, filters }) => {\n                    // 处理排序条件\n                    let formData = {\n                      sort: sort.property,\n                      order: sort.order\n                    }\n                    // 处理筛选条件\n                    filters.forEach(({ column, property, values }) => {\n                      formData[property] = values.join(',')\n                    })\n                    return this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, formData)\n                  },\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              tableToolbar: {\n                id: 'full_edit_1',\n                buttons: [\n                  { code: 'insert_actived', name: '新增', icon: 'fa fa-plus', disabled: false },\n                  {\n                    code: 'mark_cancel',\n                    name: 'app.body.button.markCancel',\n                    icon: 'fa fa-bookmark-o',\n                    disabled: false,\n                    dropdowns: [\n                      { code: 'delete_selection', icon: 'fa fa-trash-o', name: 'app.body.button.deleteSelectedRecords', disabled: false },\n                      { code: 'remove_selection', icon: 'fa fa-remove', name: '移除数据', disabled: false }\n                    ]\n                  },\n                  { code: 'save', name: 'app.body.button.save', icon: 'fa fa-save', disabled: false }\n                ],\n                refresh: true,\n                import: true,\n                export: true,\n                zoom: true,\n                resizable: {\n                  storage: true\n                },\n                custom: {\n                  storage: true,\n                  checkMethod: this.checkColumnMethod\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', title: 'ID', width: 120 },\n                { field: 'name', title: 'Name', remoteSort: true, editRender: { name: 'input' } },\n                { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n                { field: 'sex', title: 'Sex', editRender: { name: 'select', options: [] } },\n                {\n                  field: 'role',\n                  title: 'Role',\n                  remoteSort: true,\n                  width: 200,\n                  filters: [\n                    { label: '前端开发', value: '前端' },\n                    { label: '后端开发', value: '后端' },\n                    { label: '测试', value: '测试' },\n                    { label: '程序员鼓励师', value: '程序员鼓励师' }\n                  ],\n                  filterMultiple: false,\n                  editRender: { name: 'input' }\n                },\n                { field: 'describe', title: 'Describe', showOverflow: true, editRender: { name: 'input' } }\n              ]\n            }\n          },\n          created () {\n            this.findSexList()\n          },\n          methods: {\n            async findSexList () {\n              const sexList = await this.$ajax.get('/api/conf/sex/list')\n              // 异步更新下拉选项\n              let column = this.$refs.xGrid.getColumnByField('sex')\n              column.editRender.options = sexList\n            },\n            checkColumnMethod ({ column }) {\n              if (['nickname', 'role'].includes(column.property)) {\n                return false\n              }\n              return true\n            }\n          }\n        }\n        "]}},created:function(){this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e,t;return regeneratorRuntime.async((function(n){while(1)switch(n.prev=n.next){case 0:return n.next=2,regeneratorRuntime.awrap(this.$ajax.get("/api/conf/sex/list"));case 2:e=n.sent,t=this.$refs.xGrid.getColumnByField("sex"),t.editRender.options=e;case 5:case"end":return n.stop()}}),null,this)},checkColumnMethod:function(e){var t=e.column;return!["nickname","role"].includes(t.property)}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},a83a:function(e,t,n){"use strict";var a=n("a127"),i=n.n(a);i.a},c21a:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("树表格、工具栏")]),n("vxe-grid",{attrs:{resizable:"","highlight-hover-row":"","tree-config":"","row-id":"id","proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"checkbox-config":{labelField:"id"},"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{ajax:{query:function(){return e.$ajax.get("/api/file/list").then((function(t){return e.$utils.toArrayTree(t,{key:"id",parentKey:"parentId",children:"children"})}))},save:function(t){var n=t.body;return e.$ajax.post("/api/file/save",n)}}},tableToolbar:{id:"treeEdit_demo1",buttons:[{code:"reload",name:"app.body.button.refresh"},{code:"mark_cancel",name:"app.body.button.markCancel"},{code:"save",name:"app.body.button.save"}],export:!0,zoom:!0,custom:!0},tableColumn:[{type:"checkbox",title:"全选",width:120},{field:"name",title:"名称",width:220,treeNode:!0,editRender:{name:"input"}},{field:"size",title:"大小",editRender:{name:"input"}},{field:"createTime",title:"app.body.label.createTime",editRender:{name:"input",attrs:{type:"date"}},formatter:this.formatterDate},{field:"updateTime",title:"app.body.label.updateTime",editRender:{name:"input",attrs:{type:"date"}},formatter:this.formatterDate}],demoCodes:['\n        <vxe-grid\n          resizable\n          highlight-hover-row\n          tree-config\n          row-id="id"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :checkbox-config="{labelField: \'id\'}"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                ajax: {\n                  query: () => this.$ajax.get('/api/file/list').then(data => {\n                    // 将带层级的列表转成树结构\n                    return this.$utils.toArrayTree(data, { key: 'id', parentKey: 'parentId', children: 'children' })\n                  }),\n                  save: ({ body }) => this.$ajax.post('/api/file/save', body)\n                }\n              },\n              tableToolbar: {\n                id: 'treeEdit_demo1',\n                buttons: [\n                  { code: 'reload', name: 'app.body.button.refresh' },\n                  { code: 'mark_cancel', name: 'app.body.button.markCancel' },\n                  { code: 'save', name: 'app.body.button.save' }\n                ],\n                export: true,\n                zoom: true,\n                custom: true\n              },\n              tableColumn: [\n                { type: 'checkbox', title: '全选', width: 120 },\n                { field: 'name', title: '名称', width: 220, treeNode: true, editRender: { name: 'input' } },\n                { field: 'size', title: '大小', editRender: { name: 'input' } },\n                { field: 'createTime', title: 'app.body.label.createTime', editRender: { name: 'input', attrs: { type: 'date' } }, formatter: this.formatterDate },\n                { field: 'updateTime', title: 'app.body.label.updateTime', editRender: { name: 'input', attrs: { type: 'date' } }, formatter: this.formatterDate }\n              ]\n            }\n          },\n          methods: {\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return this.$utils.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},c284b:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("实现可配置动态列、数据代理、工具栏、增删改查")]),n("vxe-grid",{attrs:{border:"",resizable:"","show-overflow":"",height:"306","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("级联动态列渲染，可以非常简单的实现功能复杂的可配置动态列")]),n("vxe-grid",{attrs:{border:"","show-overflow":"",height:"290",loading:e.loading2,"pager-config":e.tablePage2,"proxy-config":e.tableProxy2,columns:e.tableColumn2,toolbar:e.tableToolbar2,"edit-rules":e.validRules2,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"toolbar-button-click":e.toolbarButtonClickEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("d81d"),n("b0c0"),n("4d63"),n("25f0"),n("3ca3"),n("9911"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:5,pageSizes:[5,10,15,20,50]},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/column/page/list/".concat(n.pageSize,"/").concat(n.currentPage),{sort:"seq",order:"asc"})},delete:function(t){var n=t.body;return e.$ajax.post("/api/column/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/column/save",n)}}},tableToolbar:{buttons:[{code:"reload",name:"刷新"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],refresh:!0,custom:!0},tableColumn:[{type:"checkbox",width:50},{field:"seq",title:"排序",width:80,editRender:{name:"input"}},{field:"key",title:"列键值",width:100,editRender:{name:"input"}},{field:"name",title:"列名称",width:100,editRender:{name:"input"}},{field:"type",title:"列类型",width:100,editRender:{name:"input"}},{field:"width",title:"列宽度",width:100,editRender:{name:"input"}},{field:"link",title:"是否链接",width:150,editRender:{name:"input"}},{field:"isEdit",title:"是否编辑",width:100,editRender:{name:"input"}},{field:"required",title:"是否必填",width:140,editRender:{name:"input"}},{field:"validator",title:"校验规则",width:140,editRender:{name:"input"}},{field:"validMsg",title:"校验提示消息",width:150,editRender:{name:"input"}},{field:"describe",title:"描述",width:200,showOverflow:!0,editRender:{name:"input"}},{field:"createTime",title:"创建时间",width:100,showOverflow:!0,formatter:this.formatterDate,editRender:{name:"input"}},{field:"updateTime",title:"更新时间",width:200,showOverflow:!0,formatter:this.formatterDate,editRender:{name:"input"}}],loading2:!1,tablePage2:{pageSize:10},tableProxy2:{props:{result:"result",total:"page.total"},ajax:{query:function(t){var n=t.page;return e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage))},delete:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)},save:function(t){var n=t.body;return e.$ajax.post("/api/user/save",n)}}},tableToolbar2:{buttons:[{code:"reloadColumn",name:"刷新列配置"},{code:"reload",name:"刷新数据"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],refresh:!0,custom:!0},validRules2:null,tableColumn2:[],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          show-overflow\n          height="306"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 5,\n                pageSizes: [5, 10, 15, 20, 50]\n              },\n              tableProxy: {\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  query: ({ page }) => this.$ajax.get(`/api/column/page/list/${page.pageSize}/${page.currentPage}`, { sort: 'seq', order: 'asc' }),\n                  delete: ({ body }) => this.$ajax.post('/api/column/save', body),\n                  save: ({ body }) => this.$ajax.post('/api/column/save', body)\n                }\n              },\n              tableToolbar: {\n                buttons: [\n                  { code: 'reload', name: '刷新' },\n                  { code: 'insert_actived', name: '新增' },\n                  { code: 'mark_cancel', name: '标记/取消' },\n                  { code: 'save', name: '保存' },\n                  { code: 'export', name: '导出.csv' }\n                ],\n                refresh: true,\n                custom: true\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { field: 'seq', title: '排序', width: 80, editRender: { name: 'input' } },\n                { field: 'key', title: '列键值', width: 100, editRender: { name: 'input' } },\n                { field: 'name', title: '列名称', width: 100, editRender: { name: 'input' } },\n                { field: 'type', title: '列类型', width: 100, editRender: { name: 'input' } },\n                { field: 'width', title: '列宽度', width: 100, editRender: { name: 'input' } },\n                { field: 'link', title: '是否链接', width: 150, editRender: { name: 'input' } },\n                { field: 'isEdit', title: '是否编辑', width: 100, editRender: { name: 'input' } },\n                { field: 'required', title: '是否必填', width: 140, editRender: { name: 'input' } },\n                { field: 'validator', title: '校验规则', width: 140, editRender: { name: 'input' } },\n                { field: 'validMsg', title: '校验提示消息', width: 150, editRender: { name: 'input' } },\n                { field: 'describe', title: '描述', width: 200, showOverflow: true, editRender: { name: 'input' } },\n                { field: 'createTime', title: '创建时间', width: 200, showOverflow: true, formatter: this.formatterDate, editRender: { name: 'input' } },\n                { field: 'updateTime', title: '更新时间', width: 200, showOverflow: true, formatter: this.formatterDate, editRender: { name: 'input' } }\n              ]\n            }\n          },\n          methods: {\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            }\n          }\n        }\n        ",'\n        <vxe-grid\n          border\n          show-overflow\n          height="530"\n          :loading="loading"\n          :pager-config="tablePage"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"\n          :toolbar="tableToolbar"\n          :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n          @toolbar-button-click="toolbarButtonClickEvent"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tablePage: {\n                pageSize: 10\n              },\n              tableProxy: {\n                props: {\n                  result: 'result',\n                  total: 'page.total'\n                },\n                ajax: {\n                  query: ({ page }) => this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`),\n                  delete: ({ body }) => this.$ajax.post('/api/user/save', body),\n                  save: ({ body }) => this.$ajax.post('/api/user/save', body)\n                }\n              },\n              tableToolbar: {\n                buttons: [\n                  { code: 'reloadColumn', name: '刷新列配置' },\n                  { code: 'reload', name: '刷新数据' },\n                  { code: 'insert_actived', name: '新增' },\n                  { code: 'mark_cancel', name: '标记/取消' },\n                  { code: 'save', name: '保存' },\n                  { code: 'export', name: '导出.csv' }\n                ],\n                refresh: true,\n                custom: true\n              },\n              validRules: null,\n              tableColumn: [],\n            }\n          },\n          created () {\n            this.findColumn()\n          },\n          methods: {\n            findColumn () {\n              this.loading = true\n              this.$ajax.get('/api/column/list', { sort: 'seq', order: 'asc' }).then(data => {\n                let validRules = {}\n                this.tableColumn2 = data.map(item => {\n                  let config = {\n                    title: item.name,\n                    width: item.width,\n                    slots: {\n                      default: ({ row, column }) => {\n                        // 渲染链接\n                        if (item.link) {\n                          return [\n                            <a class=\"link\" href={ item.link }>{ row[column.property] }</a>\n                          ]\n                        }\n                        // 渲染文本\n                        return [\n                          <span>{ row[column.property] }</span>\n                        ]\n                      }\n                    }\n                  }\n                  // 动态生成校验\n                  if (item.required) {\n                    validRules[item.key] = [\n                      { required: true, message: `请填写${item.name}` }\n                    ]\n                  }\n                  if (item.validator) {\n                    if (validRules[item.key]) {\n                      validRules[item.key].push({ pattern: new RegExp(item.validator), message: item.validMsg || `${item.name}校验不通过，请重新填写` })\n                    } else {\n                      validRules[item.key] = [\n                        { pattern: new RegExp(item.validator), message: item.validMsg || `${item.name}校验不通过，请重新填写` }\n                      ]\n                    }\n                  }\n                  if (item.key) {\n                    config.field = item.key\n                  }\n                  if (item.type) {\n                    config.type = item.type\n                  }\n                  if (item.isEdit) {\n                    config.editRender = { name: 'input' }\n                  }\n                  return config\n                })\n            },\n            formatterDate ({ cellValue }) {\n              return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n            },\n            toolbarButtonClickEvent ({ code }, event) {\n              switch (code) {\n                case 'reloadColumn':\n                  this.findColumn()\n                  break\n              }\n            }\n          }\n        }\n        "]}},created:function(){this.findColumn()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findColumn:function(){var e=this,t=this.$createElement;this.loading2=!0,this.$ajax.get("/api/column/list",{sort:"seq",order:"asc"}).then((function(n){var a={};e.tableColumn2=n.map((function(e){var n={title:e.name,width:e.width};return e.type?Object.assign(n,{type:e.type}):(Object.assign(n,{slots:{default:function(n){var a=n.row,i=n.column;return e.link?[t("a",{class:"link",attrs:{href:e.link}},[a[i.property]])]:[t("span",[a[i.property]])]}}}),e.required&&(a[e.key]=[{required:!0,message:"请填写".concat(e.name)}]),e.validator&&(a[e.key]?a[e.key].push({pattern:new RegExp(e.validator),message:e.validMsg||"".concat(e.name,"校验不通过，请重新填写")}):a[e.key]=[{pattern:new RegExp(e.validator),message:e.validMsg||"".concat(e.name,"校验不通过，请重新填写")}]),e.key&&(n.field=e.key),e.isEdit&&(n.editRender={name:"input"})),n})),e.validRules2=a,e.loading2=!1}))},formatterDate:function(e){var t=e.cellValue;return this.$utils.toDateString(t,"yyyy-MM-dd HH:mm:ss")},toolbarButtonClickEvent:function(e,t){var n=e.code;switch(n){case"reloadColumn":this.findColumn();break}}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},c7a6:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("底部合计")]),n("vxe-grid",{attrs:{border:"",stripe:"",resizable:"","show-footer":"",height:"500",toolbar:e.tableToolbar,"footer-method":e.footerMethod,columns:e.tableColumn,data:e.tableData}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableColumn:[{type:"seq",width:60},{field:"name",title:"app.body.label.name"},{field:"sex",title:"app.body.label.sex"},{field:"age",title:"Age"},{field:"rate",title:"Rate"}],tableToolbar:{export:!0,zoom:!0},tableData:[],demoCodes:['\n        <vxe-grid\n          border\n          stripe\n          resizable\n          show-footer\n          height="500"\n          :toolbar="tableToolbar"\n          :footer-method="footerMethod"\n          :columns="tableColumn"\n          :data="tableData"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableColumn: [\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'app.body.label.name' },\n                { field: 'sex', title: 'app.body.label.sex' },\n                { field: 'age', title: 'Age' },\n                { field: 'rate', title: 'Rate' }\n              ],\n              tableToolbar: {\n                export: true,\n                zoom: true\n              },\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 15)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              return [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.sum(data, column.property)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.mean(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,15)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){d.a.highlightBlock(e)}))},methods:{footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?o.a.sum(n,e.property):null})),t.map((function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?o.a.mean(n,e.property):null}))]}}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},e1b6:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div")},i=[],r=n("2877"),o={},l=Object(r["a"])(o,a,i,!1,null,null,null);t["default"]=l.exports},e5f1:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("数据代理"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-grid-proxy"}},[e._v("（配置式代理项目示例）")]),e._v("、固定列、服务端排序、服务端筛选、服务端分页，对于分页场景下，如果想要保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"checkbox-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性")],1),n("vxe-grid",{ref:"xGrid",attrs:{resizable:"",border:"none",height:"548","row-id":"id","sort-config":{trigger:"cell",defaultSort:{field:"name",order:"desc"}},"filter-config":{remote:!0},"pager-config":e.tablePage,toolbar:e.tableToolbar,columns:e.tableColumn,"proxy-config":e.tableProxy,"checkbox-config":{labelField:"id",reserve:!0,highlight:!0,range:!0}},scopedSlots:e._u([{key:"empty",fn:function(){return[n("span",{staticStyle:{color:"red"}},[n("img",{attrs:{src:"static/other/img1.gif"}}),n("p",[e._v("没有更多数据了！")])])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("99af"),n("a630"),n("a15b"),n("4e82"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tablePage:{pageSize:15,pageSizes:[5,10,20,50,100,200,500,1e3]},tableProxy:{seq:!0,sort:!0,filter:!0,ajax:{query:function(t){var n=t.page,a=t.sort,i=t.filters,r={sort:a.field,order:a.order};return i.forEach((function(e){e.column;var t=e.field,n=e.values;r[t]=n.join(",")})),e.$ajax.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage),r)}}},tableToolbar:{buttons:[{code:"reload",name:"app.body.button.refresh",icon:"fa fa-refresh",disabled:!1},{name:"导入/导出1",dropdowns:[{code:"import",name:"直接导入",icon:"fa fa-cloud-upload",disabled:!1},{code:"export",name:"直接导出 CSV",icon:"fa fa-download",params:{type:"csv"},disabled:!1},{code:"export",name:"直接导出 XML",icon:"fa fa-download",params:{type:"xml"},disabled:!1},{code:"export",name:"直接导出 HTML",icon:"fa fa-download",params:{type:"html"},disabled:!1},{code:"export",name:"直接导出 TXT",icon:"fa fa-download",params:{type:"txt"},disabled:!1}]},{name:"导入/导出2",icon:"fa fa-cloud-download",dropdowns:[{code:"open_import",name:"高级导入",icon:"fa fa-cloud-upload",disabled:!1},{code:"open_export",name:"高级导出",icon:"fa fa-download",disabled:!1}]}]},tableColumn:[{type:"seq",width:60,fixed:"left"},{type:"checkbox",title:"ID",width:120,fixed:"left"},{field:"name",title:"Name",width:300,remoteSort:!0},{field:"nickname",title:"Nickname",remoteSort:!0,width:300},{field:"age",title:"Age",remoteSort:!0,width:100},{field:"role",title:"Role",remoteSort:!0,width:200,filters:[{label:"前端开发",value:"前端"},{label:"后端开发",value:"后端"},{label:"测试",value:"测试"},{label:"程序员鼓励师",value:"程序员鼓励师"}],filterMultiple:!1},{field:"describe",title:"Describe",width:300,showOverflow:!0}],demoCodes:['\n        <vxe-grid\n          resizable\n          border="none"\n          ref="xGrid"\n          height="548"\n          row-id="id"\n          :sort-config="{trigger: \'cell\', defaultSort: {field: \'name\', order: \'desc\'}}"\n          :filter-config="{remote: true}"\n          :pager-config="tablePage"\n          :toolbar="tableToolbar"\n          :columns="tableColumn"\n          :proxy-config="tableProxy"\n          :checkbox-config="{labelField: \'id\', reserve: true, highlight: true, range: true}">\n          <template v-slot:empty>\n            <span style="color: red;">\n              <img src="static/other/img1.gif">\n              <p>没有更多数据了！</p>\n            </span>\n          </template>\n        </vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tablePage: {\n                pageSize: 15,\n                pageSizes: [5, 10, 20, 50, 100, 200, 500, 1000]\n              },\n              tableProxy: {\n                seq: true, // 启用动态序号代理\n                sort: true, // 启用排序代理\n                filter: true, // 启用筛选代理\n                ajax: {\n                  // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）\n                  query: ({ page, sort, filters }) => {\n                    // 处理排序条件\n                    let formData = {\n                      sort: sort.property,\n                      order: sort.order\n                    }\n                    // 处理筛选条件\n                    filters.forEach(({ column, property, values }) => {\n                      formData[property] = values.join(',')\n                    })\n                    return this.$ajax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, formData)\n                  }\n                }\n              },\n              tableToolbar: {\n                buttons: [\n                  { code: 'reload', name: 'app.body.button.refresh', icon: 'fa fa-refresh', disabled: false },\n                  {\n                    name: '导入/导出1',\n                    dropdowns: [\n                      { code: 'import', name: '直接导入', icon: 'fa fa-cloud-upload', disabled: false },\n                      { code: 'export', name: '直接导出 CSV', icon: 'fa fa-download', params: { type: 'csv' }, disabled: false },\n                      { code: 'export', name: '直接导出 XML', icon: 'fa fa-download', params: { type: 'xml' }, disabled: false },\n                      { code: 'export', name: '直接导出 HTML', icon: 'fa fa-download', params: { type: 'html' }, disabled: false },\n                      { code: 'export', name: '直接导出 TXT', icon: 'fa fa-download', params: { type: 'txt' }, disabled: false }\n                    ]\n                  },\n                  {\n                    name: '导入/导出2',\n                    icon: 'fa fa-cloud-download',\n                    dropdowns: [\n                      { code: 'open_import', name: '高级导入', icon: 'fa fa-cloud-upload', disabled: false },\n                      { code: 'open_export', name: '高级导出', icon: 'fa fa-download', disabled: false }\n                    ]\n                  }\n                ]\n              },\n              tableColumn: [\n                { type: 'seq', width: 60, fixed: 'left' },\n                { type: 'checkbox', title: 'ID', width: 120, fixed: 'left' },\n                { field: 'name', title: 'Name', width: 300, remoteSort: true },\n                { field: 'nickname', title: 'Nickname', remoteSort: true, width: 300 },\n                { field: 'age', title: 'Age', remoteSort: true, width: 100 },\n                {\n                  field: 'role',\n                  title: 'Role',\n                  remoteSort: true,\n                  width: 200,\n                  filters: [\n                    { label: '前端开发', value: '前端' },\n                    { label: '后端开发', value: '后端' },\n                    { label: '测试', value: '测试' },\n                    { label: '程序员鼓励师', value: '程序员鼓励师' }\n                  ],\n                  filterMultiple: false\n                },\n                { field: 'describe', title: 'Describe', width: 300, showOverflow: true }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},e60c:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("数据代理"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-grid-proxy"}},[e._v("（配置式代理项目示例）")]),e._v("：通过配置 "),n("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 参数，默认直接读取结果，响应结果应该为数组；可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改默认值，由 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","proxy-config":e.tableProxy,columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},i=[],r=(n("a630"),n("3ca3"),n("159b"),n("1487")),o=n.n(r),l={data:function(){var e=this;return{tableProxy:{ajax:{query:function(){return e.$ajax.get("/api/user/list")}}},tableColumn:[{type:"checkbox",width:50},{type:"seq",width:60},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"role",title:"Role"},{field:"describe",title:"Describe",showOverflow:!0}],demoCodes:['\n        <vxe-grid\n          border\n          resizable\n          height="530"\n          :proxy-config="tableProxy"\n          :columns="tableColumn"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              tableProxy: {\n                ajax: {\n                  // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）\n                  query: () => this.$ajax.get('/api/user/list')\n                }\n              },\n              tableColumn: [\n                { type: 'checkbox', width: 50 },\n                { type: 'seq', width: 60 },\n                { field: 'name', title: 'Name' },\n                { field: 'nickname', title: 'Nickname' },\n                { field: 'role', title: 'Role' },\n                { field: 'describe', title: 'Describe', showOverflow: true }\n              ]\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports}}]);