lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
759d2ea9a59f45a87cdc33a0719d319c3e40a644
vxe-table/docs/static/js/grid.eac8d4b8.js
xuliangzhan 9fcb84d727 优化重构
2020-02-24 23:14:25 +08:00

1 line
173 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(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 s=l;t["default"]=s},"11f4":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:"form-config"}}),e._v("={items} 渲染表单")],1),n("vxe-grid",{attrs:{resizable:"","export-config":"",border:"",height:"400","pager-config":e.tablePage,"form-config":e.tableForm,toolbar:e.tableToolbar,"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("99af"),n("4160"),n("a630"),n("3ca3"),n("159b"),n("96cf"),n("1da1")),o=n("628a"),l=n.n(o),s=n("1487"),d=n.n(s),c={data:function(){return{tableData:[],tableForm:{items:[{field:"name",title:"名称",itemRender:{name:"input",attrs:{placeholder:"请输入名称"}}},{field:"sex",title:"性别",itemRender:{name:"select",options:[]}},{itemRender:{name:"input",attrs:{type:"submit",value:"查询"}}},{itemRender:{name:"input",attrs:{type:"reset",value:"重置"}}}]},tablePage:{pageSize:15},tableToolbar:{export:!0,custom:!0},tableColumn:[{type:"seq",width:60},{type:"checkbox",width:60},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"age",title:"Age"},{field:"sex",title:"Sex"},{field:"describe",title:"Describe",showOverflow:!0}],tableProxy:{form:!0,ajax:{query:function(e){var t=e.page,n=e.form;return l.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),n)}}},demoCodes:['\n <vxe-grid\n resizable\n export-config\n border\n height="400"\n :loading="loading"\n :form-config="tableForm"\n :toolbar="tableToolbar"\n :data="tableData"\n :columns="tableColumn"\n @form-submit="findList">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n tableForm: {\n data: {\n name: '',\n sex: ''\n },\n items: [\n { field: 'name', title: '名称', itemRender: { name: 'input', attrs: { placeholder: '请输入名称' } } },\n { field: 'sex', title: '性别', itemRender: { name: 'select', options: [] } },\n { itemRender: { name: 'input', attrs: { type: 'submit', value: '查询' } } },\n { itemRender: { name: 'input', attrs: { type: 'reset', value: '重置' } } }\n ]\n },\n tableToolbar: {\n export: true,\n custom: true\n },\n tableColumn: [\n { type: 'seq', width: 60 },\n { type: 'checkbox', width: 60 },\n { field: 'name', title: 'Name' },\n { field: 'nickname', title: 'Nickname' },\n { field: 'age', title: 'Age' },\n { field: 'sex', title: 'Sex' },\n { field: 'describe', title: 'Describe', showOverflow: true }\n ]\n }\n },\n created () {\n this.findList()\n this.findSexList()\n },\n methods: {\n findList () {\n this.loading = true\n XEAjax.get('/api/user/list', this.tableForm.data).then(data => {\n this.tableData = data\n this.loading = false\n })\n },\n async findSexList () {\n const sexList = await XEAjax.get('/api/conf/sex/list')\n // 异步更新下拉选项\n this.tableForm.items[1].itemRender.options = sexList\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){d.a.highlightBlock(e)}))},created:function(){this.findSexList()},methods:{findSexList:function(){var e=this;return Object(r["a"])(regeneratorRuntime.mark((function t(){var n;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.next=2,l.a.get("/api/conf/sex/list");case 2:n=t.sent,e.tableForm.items[1].itemRender.options=n;case 4:case"end":return t.stop()}}),t)})))()}}},u=c,p=n("2877"),m=Object(p["a"])(u,a,i,!1,null,null,null);t["default"]=m.exports},"152e":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:"form-config"}}),e._v("={data, items} 渲染表单")],1),n("vxe-grid",{attrs:{resizable:"","export-config":"",border:"",height:"400",loading:e.loading,"form-config":e.tableForm,toolbar:e.tableToolbar,data:e.tableData,columns:e.tableColumn},on:{"form-submit":e.findList}}),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("4160"),n("a630"),n("3ca3"),n("159b"),n("96cf"),n("1da1")),o=n("628a"),l=n.n(o),s=n("1487"),d=n.n(s),c={data:function(){return{loading:!1,tableData:[],tableForm:{data:{name:"",sex:""},items:[{field:"name",title:"app.body.label.name",itemRender:{name:"$input",props:{placeholder:"请输入名称"}}},{field:"sex",title:"性别",titlePrefix:{message:"帮助信息！！！",icon:"fa fa-info-circle"},itemRender:{name:"$select",options:[]}},{itemRender:{name:"$buttons",children:[{props:{type:"submit",content:"查询",status:"primary"}},{props:{type:"reset",content:"重置"}}]}}]},tableToolbar:{export:!0,custom:!0},tableColumn:[{type:"seq",width:60},{type:"checkbox",width:60},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"age",title:"Age"},{field:"sex",title:"Sex"},{field:"describe",title:"Describe",showOverflow:!0}],demoCodes:['\n <vxe-grid\n resizable\n export-config\n border\n height="400"\n :loading="loading"\n :form-config="tableForm"\n :toolbar="tableToolbar"\n :data="tableData"\n :columns="tableColumn"\n @form-submit="findList">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n tableForm: {\n data: {\n name: '',\n sex: ''\n },\n items: [\n { field: 'name', title: 'app.body.label.name', itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },\n { field: 'sex', title: '性别', titlePrefix: { message: '帮助信息！！！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },\n { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }\n ]\n },\n tableToolbar: {\n export: true,\n custom: true\n },\n tableColumn: [\n { type: 'seq', width: 60 },\n { type: 'checkbox', width: 60 },\n { field: 'name', title: 'Name' },\n { field: 'nickname', title: 'Nickname' },\n { field: 'age', title: 'Age' },\n { field: 'sex', title: 'Sex' },\n { field: 'describe', title: 'Describe', showOverflow: true }\n ]\n }\n },\n created () {\n this.findList()\n this.findSexList()\n },\n methods: {\n findList () {\n this.loading = true\n XEAjax.get('/api/user/list', this.tableForm.data).then(data => {\n this.tableData = data\n this.loading = false\n })\n },\n async findSexList () {\n const sexList = await XEAjax.get('/api/conf/sex/list')\n // 异步更新下拉选项\n this.tableForm.items[1].itemRender.options = sexList\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){d.a.highlightBlock(e)}))},created:function(){this.findList(),this.findSexList()},methods:{findList:function(){var e=this;this.loading=!0,l.a.get("/api/user/list",this.tableForm.data).then((function(t){e.tableData=t,e.loading=!1}))},findSexList:function(){var e=this;return Object(r["a"])(regeneratorRuntime.mark((function t(){var n;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.next=2,l.a.get("/api/conf/sex/list");case 2:n=t.sent,e.tableForm.items[1].itemRender.options=n;case 4:case"end":return t.stop()}}),t)})))()}}},u=c,p=n("2877"),m=Object(p["a"])(u,a,i,!1,null,null,null);t["default"]=m.exports},"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("4160"),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){var t=e.columnIndex;return 1!==t},activeRowMethod:function(e){var t=e.rowIndex;return 1!==t},editDisabledEvent:function(){this.$XModal.alert("禁止编辑")}}},s=l,d=n("2877"),c=Object(d["a"])(s,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:"","keep-source":"","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("4160"),n("a630"),n("caad"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("628a"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){return{tableProxy:{ajax:{query:function(){return s.a.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 keep-source\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: () => XEAjax.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 XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n },\n loadChildrenMethod ({ row }) {\n // 异步加载子节点\n return XEAjax.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){c.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return o.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")},loadChildrenMethod:function(e){var t=e.row;return s.a.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=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}}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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:"","keep-source":"",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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tablePage:{pageSize:15,perfect:!0},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.post("/api/user/save",t)},save:function(e){var t=e.body;return o.a.post("/api/user/save",t)}}},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 keep-source\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 }) => XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.post('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.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){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},"1c2f":function(e,t,n){"use strict";var a=n("f7c3"),i=n.n(a);i.a},"1da1":function(e,t,n){"use strict";n.d(t,"a",(function(){return i}));n("d3b7"),n("e6cf");function a(e,t,n,a,i,r,o){try{var l=e[r](o),s=l.value}catch(d){return void n(d)}l.done?t(s):Promise.resolve(s).then(a,i)}function i(e){return function(){var t=this,n=arguments;return new Promise((function(i,r){var o=e.apply(t,n);function l(e){a(o,i,r,l,s,"next",e)}function s(e){a(o,i,r,l,s,"throw",e)}l(void 0)}))}}},"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:"","keep-source":"",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("vxe-input"),n("vxe-button",{attrs:{status:"primary"}},[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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.post("/api/user/save",t)},save:function(e){var t=e.body;return o.a.post("/api/user/save",t)}}},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 keep-source\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 <vxe-input></vxe-input>\n <vxe-button status="primary">搜索</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 }) => XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.post('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.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){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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:"footer"}}),e._v("：自定义表尾模板"),n("br"),n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererFilter"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererEdit"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v(" 工具栏："),n("br"),n("grid-api-link",{attrs:{prop:"buttons"}}),e._v("：自定义按钮模板（建议使用"),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererToolbar"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),n("grid-api-link",{attrs:{prop:"tools"}}),e._v("：自定义右侧按钮模板（建议使用"),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererToolbar"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v(" 顶部："),n("br"),n("grid-api-link",{attrs:{prop:"top"}}),e._v("：自定义顶部模板"),n("br"),e._v(" 底部："),n("br"),n("grid-api-link",{attrs:{prop:"bottom"}}),e._v("：自定义底部模板"),n("br")],1),n("vxe-grid",{attrs:{border:"",resizable:"","form-config":"","show-footer":"",height:"500","footer-method":e.footerMethod,toolbar:e.tableToolbar,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"cell",icon:"fa fa-pencil-square-o"}},scopedSlots:e._u([{key:"form",fn:function(){return[n("vxe-form",{attrs:{data:e.formData},on:{submit:e.searchEvent}},[n("vxe-form-item",{attrs:{title:"名称",field:"name"}},[n("vxe-input",{attrs:{placeholder:"请输入名称",clearable:""},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}})],1),n("vxe-form-item",{attrs:{title:"昵称",field:"nickname"}},[n("vxe-input",{attrs:{placeholder:"请输入昵称",clearable:""},model:{value:e.formData.nickname,callback:function(t){e.$set(e.formData,"nickname",t)},expression:"formData.nickname"}})],1),n("vxe-form-item",{attrs:{title:"性别",field:"sex"}},[n("vxe-select",{attrs:{placeholder:"请选择性别",clearable:""},model:{value:e.formData.sex,callback:function(t){e.$set(e.formData,"sex",t)},expression:"formData.sex"}},[n("vxe-option",{attrs:{value:"1",label:"女"}}),n("vxe-option",{attrs:{value:"2",label:"男"}})],1)],1),n("vxe-form-item",[n("vxe-button",[e._v("查询")])],1)],1)]},proxy:!0},{key:"top",fn:function(){return[n("div",{staticClass:"alert-message"},[n("i",{staticClass:"fa fa-exclamation-circle alert-message-icon"}),n("span",[e._v("可以在这里自定义顶部模板")])])]},proxy:!0},{key:"buttons",fn:function(){return[n("span",[n("vxe-input",{attrs:{placeholder:"搜索"}}),n("vxe-button",[e._v("搜索")])],1)]},proxy:!0},{key:"seq_header",fn:function(){return[n("div",{staticClass:"first-col"},[n("div",{staticClass:"first-col-top"},[e._v("名称")]),n("div",{staticClass:"first-col-bottom"},[e._v("序号")])])]},proxy:!0},{key:"num_footer",fn:function(t){var a=t.items,i=t.itemIndex;return[n("span",{staticStyle:{color:"red"}},[e._v("合计："+e._s(a[i]))])]}},{key:"name_default",fn:function(t){var a=t.row,i=t.column;return[n("span",[n("span",{staticStyle:{color:"red"}},[e._v(e._s(a.name))]),n("button",{on:{click:function(t){return e.showDetailEvent(a,i)}}},[e._v("弹框")])])]}}])}),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()]),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("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){var e=this,t=this.$createElement;return{showDetails:!1,selectRow:null,formData:{name:"",nickname:"",sex:""},tableData:[],tableColumn:[{type:"seq",width:100,resizable:!1,slots:{header:"seq_header"}},{field:"name",title:"Name",slots:{default:"name_default"}},{field:"sex",title:"Sex",showHeaderOverflow:!0,filters:[{data:""}],filterMethod:this.filterSexMethod,editRender:{type:"default"},slots:{default:function(e){var n=e.row;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])])]},footer:function(e){var n=e.items,a=e.itemIndex;return[t("span",["累计：",n[a]])]},filter:function(n){var a=n.column,i=n.$panel;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:"num",title:"Number",slots:{footer:"num_footer"}},{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){var n=e.row;return[t("span",{domProps:{innerHTML:n.html1}})]}}},{field:"img1",title:"图片路径",slots:{default:function(e){var n=e.row;return[n.img1?t("img",{attrs:{src:n.img1},style:"width: 100px;"}):t("span",["无"])]}}}],tableToolbar:{custom:!0,slots:{tools:function(){return[t("vxe-input",{attrs:{placeholder:"搜索"}})]}}},demoCodes:['\n <vxe-grid\n border\n resizable\n form-config\n show-footer\n height="500"\n :footer-method="footerMethod"\n :toolbar="tableToolbar"\n :columns="tableColumn"\n :data="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\', icon: \'fa fa-pencil-square-o\'}">\n \x3c!--使用 form 插槽--\x3e\n <template v-slot:form>\n <vxe-form :data="formData" @submit="searchEvent">\n <vxe-form-item title="名称" field="name">\n <vxe-input v-model="formData.name" placeholder="请输入名称" clearable></vxe-input>\n </vxe-form-item>\n <vxe-form-item title="昵称" field="nickname">\n <vxe-input v-model="formData.nickname" placeholder="请输入昵称" clearable></vxe-input>\n </vxe-form-item>\n <vxe-form-item title="性别" field="sex">\n <vxe-select v-model="formData.sex" placeholder="请选择性别" clearable>\n <vxe-option value="1" label="女"></vxe-option>\n <vxe-option value="2" label="男"></vxe-option>\n </vxe-select>\n </vxe-form-item>\n <vxe-form-item>\n <vxe-button>查询</vxe-button>\n </vxe-form-item>\n </vxe-form>\n </template>\n\n \x3c!--使用 top 插槽--\x3e\n <template v-slot:top>\n <div class="alert-message">\n <i class="fa fa-exclamation-circle alert-message-icon"></i>\n <span>可以在这里自定义顶部模板</span>\n </div>\n </template>\n\n \x3c!--使用 buttons 插槽--\x3e\n <template v-slot:buttons>\n <span>\n <vxe-input placeholder="搜索"></vxe-input>\n <vxe-button>搜索</vxe-button>\n </span>\n </template>\n\n \x3c!--自定义插槽 seq_header--\x3e\n <template v-slot:seq_header>\n <div class="first-col">\n <div class="first-col-top">名称</div>\n <div class="first-col-bottom">序号</div>\n </div>\n </template>\n\n \x3c!--自定义插槽 num_footer--\x3e\n <template v-slot:num_footer="{ items, itemIndex }">\n <span style="color: red">合计：{{ items[itemIndex] }}</span>\n </template>\n\n \x3c!--自定义插槽 name_default--\x3e\n <template v-slot:name_default="{ row, column }">\n <span>\n <span style="color: red;">{{ row.name }}</span>\n <button @click="showDetailEvent(row, column)">弹框</button>\n </span>\n </template>\n </vxe-grid>\n\n <vxe-modal v-model="showDetails" title="查看详情" width="800" height="400" resize>\n <div v-if="selectRow" v-html="selectRow.html3"></div>\n </vxe-modal>\n ',"\n export default {\n data () {\n return {\n showDetails: false,\n selectRow: null,\n formData: {\n name: '',\n nickname: '',\n sex: ''\n },\n tableData: [],\n tableColumn: [\n {\n type: 'seq',\n width: 100,\n resizable: false,\n slots: {\n // 对应自定义插槽的名称\n header: 'seq_header'\n }\n },\n {\n field: 'name',\n title: 'Name',\n slots: {\n // 对应自定义插槽的名称\n default: 'name_default'\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 // 使用 JSX 渲染函数\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 footer: ({ items, itemIndex }) => {\n return [\n <span>累计：{ items[itemIndex] }</span>\n ]\n },\n filter: ({ column, $panel }) => {\n return column.filters.map(option => {\n return <input type=\"type\" value={ option.data } onInput={ evnt => this.changeFilterEvent(evnt, option, $panel) }/>\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: 'num',\n title: 'Number',\n slots: {\n // 对应自定义插槽的名称\n footer: 'num_footer'\n }\n },\n {\n field: 'address',\n title: 'Address',\n showOverflow: true,\n slots: {\n // 使用 JSX 渲染函数\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 // 使用 JSX 渲染函数\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 // 使用 JSX 渲染函数\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 // 使用 JSX 渲染函数\n tools: () => {\n return [\n <vxe-input 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 searchEvent () {\n this.$XModal.alert('查询')\n },\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.address}`)\n },\n filterSexMethod ({ option, row }) {\n return row.sex === option.data\n },\n changeFilterEvent (evnt, option, $panel) {\n option.data = evnt.target.value\n $panel.changeMultipleOption(evnt, !!option.data, option)\n },\n footerMethod ({ columns, data }) {\n return [\n columns.map((column, columnIndex) => {\n if (['sex', 'num'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return null\n })\n ]\n }\n }\n }\n ",'\n .alert-message {\n padding: 8px 15px;\n border-radius: 4px;\n background-color: #e6f7ff;\n border: 1px solid #91d5ff;\n }\n .alert-message-icon {\n color: #409eff;\n margin-right: 8px;\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(){this.tableData=window.MOCK_DATA_LIST.slice(0,100)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{searchEvent:function(){this.$XModal.alert("查询")},showDetailEvent:function(e){this.selectRow=e,this.showDetails=!0},headerClickEvent:function(){this.$XModal.alert("头部点击事件")},addressClickEvent:function(e){this.$XModal.alert("address点击事件：".concat(e.address))},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)},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e){return["sex","num"].includes(e.property)?o.a.sum(n,e.property):null}))]}}},c=d,u=(n("ee0a"),n("2877")),p=Object(u["a"])(c,a,i,!1,null,"0ef0b204",null);t["default"]=p.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(" 动态配置列信息，这非常适用于动态渲染的场景，完全使用数据进行配置，再配合 "),n("router-link",{staticClass:"link",attrs:{to:{name:"GridConfigProxy"}}},[e._v("数据代理")]),e._v(" ，甚至可以非常简单的用一个 json 数据就能渲染完整表格 ")],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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={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 XEAjax.mockList(50).then(data => {\n this.tableData = data\n this.loading = false\n })\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,o.a.mockList(50).then((function(t){e.tableData=t,e.loading=!1}))},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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(" 修改"),n("br"),e._v(" 对接格式：使用 "),n("a",{staticClass:"link",attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise"}},[e._v("Promise API")]),e._v(" ，任何支持 "),n("a",{staticClass:"link",attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise"}},[e._v("Promise")]),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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tableProxy:{seq:!0,props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.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 }) => XEAjax.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){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("628a"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){return{tableProxy:{ajax:{query:function(){return s.a.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: () => XEAjax.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 XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n },\n loadChildrenMethod ({ row }) {\n // 异步加载子节点\n return XEAjax.get('/api/file/node/list', { parentId: row.id })\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){c.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return o.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")},loadChildrenMethod:function(e){var t=e.row;return s.a.get("/api/file/node/list",{parentId:t.id})}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("628a"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){return{tableProxy:{ajax:{query:function(){return s.a.get("/api/file/list").then((function(e){return o.a.toArrayTree(e,{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: () => XEAjax.get('/api/file/list').then(data => XEUtils.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 XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){c.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return o.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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:"","keep-source":"",height:"528","filter-config":{remote:!0},toolbar:e.tableToolbar,"pager-config":e.tablePage,columns:e.tableColumn,"form-config":e.tableForm,"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"},[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("，只需要一个 json 数据就可以非常简单的渲染一个支持 CRUD 功能完整的表格")])}],r=(n("99af"),n("7db0"),n("4160"),n("a630"),n("a15b"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("628a")),o=n.n(r),l=n("c695"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){this.$createElement;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(e){var t=e.page,n=e.sort,a=e.filters,i={sort:n.property,order:n.order};return a.forEach((function(e){var t=e.property,n=e.values;i[t]=n.join(",")})),o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),i)},delete:function(e){var t=e.body;return o.a.post("/api/user/save",t)},save:function(e){var t=e.body;return o.a.post("/api/user/save",t)}}},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},tableForm:{titleWidth:100,titleAlign:"right",items:[{field:"name",title:"名称",span:8,itemRender:{name:"input",attrs:{placeholder:"请输入名称"}}},{field:"role",title:"角色",span:8,itemRender:{name:"input",attrs:{placeholder:"请输入角色"}}},{field:"nickname",title:"昵称",span:8,itemRender:{name:"input",attrs:{placeholder:"请输入昵称"}}},{field:"sex",title:"性别",span:8,folding:!0,itemRender:{name:"select",options:[{value:"",label:""},{value:"0",label:"女"},{value:"1",label:"男"}]}},{field:"age",title:"年龄",span:8,folding:!0,itemRender:{name:"input",attrs:{type:"number",placeholder:"请输入年龄"}}},{span:24,align:"center",collapseNode:!0,itemRender:{name:"FormItemButtonGroup"}}]},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:"age",title:"Age",remoteSort:!0,editRender:{name:"input"}},{field:"type",title:"Type",slots:{default:function(e){var t=this.$createElement,n=e.row,a=e.column,i=[{value:"1",label:"成功"},{value:"2",label:"失败"},{value:"3",label:"拒接"}],r=s.a.get(n,a.property),o=i.find((function(e){return e.value===r}));return[t("span",{style:"color:".concat("1"===r?"green":"red")},[o?o.label:""])]}}},{field:"status",title:"Status",editRender:{name:"select",options:[{value:"1",label:"红"},{value:"2",label:"黄"},{value:"3",label:"蓝"},{value:"4",label:"绿"},{value:"5",label:"青"}]}},{field:"sex",title:"Sex",editRender:{name:"select",options:[{value:"",label:""},{value:"0",label:"女"},{value:"1",label:"男"}]}},{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: {\n url: '/api/user/page/list/{{page.pageSize}}/{{page.currentPage}}'\n },\n delete: {\n url: '/api/user/save'\n },\n save: {\n url: '/api/user/save'\n }\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 formConfig: {\n titleWidth: 100,\n titleAlign: 'right',\n items: [\n { field: 'name', title: '名称', span: 8, itemRender: { name: 'input', attrs: { placeholder: '请输入名称' } } },\n { field: 'role', title: '角色', span: 8, itemRender: { name: 'input', attrs: { placeholder: '请输入角色' } } },\n { field: 'nickname', title: '昵称', span: 8, itemRender: { name: 'input', attrs: { placeholder: '请输入昵称' } } },\n // 表单项渲染，自动读取字典配置\n { field: 'sex', title: '性别', span: 8, folding: true, itemRender: { name: 'select', options: { dict: 'SEX_ALL_LIST' } } },\n { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: 'input', attrs: { type: 'number', placeholder: '请输入年龄' } } },\n { span: 24, align: 'center', collapseNode: true, itemRender: { name: 'FormItemButtonGroup' } }\n ]\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: 'age', title: 'Age', remoteSort: true, editRender: { name: 'input' } },\n // 单元格渲染，自动读取字典配置\n { field: 'type', title: 'Type', cellRender: { name: 'DICT', props: { code: 'OPERATE_STATUS' } } },\n // 单元格编辑渲染，自动读取字典配置\n { field: 'status', title: 'Status', editRender: { name: 'select', options: { dict: 'COLOR_STATUS' } } },\n // 单元格编辑渲染，自动请求异步配置\n { field: 'sex', title: 'Sex', remoteSort: true, editRender: { name: 'select', options: { url: '/api/conf/sex/list' } } },\n // 筛选渲染，自动请求异步配置\n { field: 'role', title: 'Role', remoteSort: true, width: 200, filters: { url: '/api/conf/role/list' }, filterMultiple: false, editRender: { name: 'input' } },\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){c.a.highlightBlock(e)}))}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.exports},"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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={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 XEAjax.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){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,o.a.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(){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()}}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},"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},scopedSlots:e._u([{key:"fileExpand",fn:function(t){var a=t.row;return[a.fileList.length?n("ul",{staticClass:"file-list"},e._l(a.fileList,(function(t,a){return n("li",{key:a},[n("span",[e._v(e._s(t.name))]),n("span",[e._v(e._s(t.size))]),n("span",[e._v(e._s(t.type))]),n("span",[e._v(e._s(t.date))])])})),0):n("div",{staticClass:"file-empty"},[e._v("暂无附件")])]}},{key:"cellExpand",fn:function(t){var a=t.row;return[n("span",[e._v("（"+e._s(a.fileList.length)+"）")])]}},{key:"operation",fn:function(t){var a=t.row;return[n("vxe-button",{attrs:{status:"primary"},on:{click:function(t){return e.uploadFileEvent(a)}}},[e._v("添加附件")])]}}])}),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("4160"),n("a630"),n("a15b"),n("fb6a"),n("b0c0"),n("ac1f"),n("3ca3"),n("1276"),n("159b"),n("c695")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tableColumn:[{type:"seq",width:50},{type:"expand",width:120,slots:{content:"fileExpand",default:"cellExpand"}},{field:"name",title:"app.body.label.name"},{field:"sex",title:"app.body.label.sex"},{title:"操作",width:160,showOverflow:!0,slots:{default:"operation"}}],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 \x3c!--使用自定义模板--\x3e\n <template v-slot:fileExpand="{ row }">\n <ul v-if="row.fileList.length" class="file-list">\n <li v-for="(file, index) in row.fileList" :key="index">\n <span>{{ file.name }}</span>\n <span>{{ file.size }}</span>\n <span>{{ file.type }}</span>\n <span>{{ file.date }}</span>\n </li>\n </ul>\n <div v-else class="file-empty">暂无附件</div>\n </template>\n <template v-slot:cellExpand="{ row }">\n <span>（{{ row.fileList.length }}）</span>\n </template>\n <template v-slot:operation="{ row }">\n <vxe-button status="primary" @click="uploadFileEvent(row)">添加附件</vxe-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'seq', width: 50 },\n { type: 'expand', width: 120, slots: { content: 'fileExpand', default: 'cellExpand' } },\n { field: 'name', title: 'app.body.label.name' },\n { field: 'sex', title: 'app.body.label.sex' },\n { title: '操作', width: 160, showOverflow: true, slots: { default: 'operation' } }\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 // 读取附件\n uploadFileEvent (row) {\n this.$refs.xGrid.readFile({\n multiple: true,\n types: ['xlsx', 'csv', 'html']\n }).then(evnt => {\n // 解析数据并显示\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: XEUtils.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){s.a.highlightBlock(e)}))},methods:{uploadFileEvent:function(e){this.$refs.xGrid.readFile({multiple:!0,types:["xlsx","csv","html"]}).then((function(t){Array.from(t.target.files).forEach((function(t){var n=t.name.split("."),a=n.slice(0,n.length-1).join(""),i=n[n.length-1],r={name:a,size:t.size,type:i,date:o.a.toDateString(new Date)};e.fileList.push(r)}))}))}}},c=d,u=(n("1c2f"),n("2877")),p=Object(u["a"])(c,a,i,!1,null,"3364229a",null);t["default"]=p.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:"","export-config":"","import-config":"","keep-source":"",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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.post("/api/user/save",t)},save:function(e){var t=e.body;return o.a.post("/api/user/save",t)}}},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 export-config\n import-config\n keep-source\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 }) => XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.post('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.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){s.a.highlightBlock(e)}))},methods:{toolbarButtonClickEvent:function(e){var t=e.code;switch(t){case"myBtn":this.$XModal.alert(t);break}}}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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("4160"),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){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,s="1"===t.sex;a.editRender.attrs.disabled=o,i.editRender.attrs.disabled=l,r.editRender.attrs.disabled=s},editDisabledEvent:function(){this.$XModal.alert("禁止编辑")}}},s=l,d=n("2877"),c=Object(d["a"])(s,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("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("0edb"),s=n.n(l),d=n("1487"),c=n.n(d),u={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 XEUtils.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){c.a.highlightBlock(e)}))},methods:{visibleMethod:function(e){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&&s.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=e.columns,n=e.data;return[t.map((function(e,t){return 0===t?"和值":["age"].includes(e.property)?o.a.sum(n,e.property):null}))]}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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("4160"),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}})))}}},s=l,d=(n("a83a"),n("2877")),c=Object(d["a"])(s,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:"","export-config":"","import-config":"","keep-source":"",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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.post("/api/user/save",t)},save:function(e){var t=e.body;return o.a.post("/api/user/save",t)}}},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 export-config\n import-config\n keep-source\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 }) => XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.post('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.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){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},"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("4160"),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)}))}},s=l,d=n("2877"),c=Object(d["a"])(s,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:"","keep-source":"",height:"530",loading:e.loading,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"row",showStatus:!0,icon:"fa fa-file-text-o"}},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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={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 keep-source\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, icon: \'fa fa-file-text-o\'}"\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 XEAjax.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 XEAjax.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){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,o.a.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(){e.loading=!1}))},findSexList:function(){var e=this;return o.a.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()}}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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 s(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 d(e,t,n){try{return{type:"normal",arg:e.call(t,n)}}catch(a){return{type:"throw",arg:a}}}e.wrap=s;var c="suspendedStart",u="suspendedYield",p="executing",m="completed",f={};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 _=v.prototype=b.prototype=Object.create(g);function w(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=d(e[n],e,i);if("throw"!==l.type){var s=l.arg,c=s.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){s.value=e,r(s)}),(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===m){if("throw"===i)throw r;return A()}n.method=i,n.arg=r;while(1){var o=n.delegate;if(o){var l=R(o,n);if(l){if(l===f)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(a===c)throw a=m,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);a=p;var s=d(e,t,n);if("normal"===s.type){if(a=n.done?m:u,s.arg===f)continue;return{value:s.arg,done:n.done}}"throw"===s.type&&(a=m,n.method="throw",n.arg=s.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 f;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return f}var i=d(a,e.iterator,n.arg);if("throw"===i.type)return n.method="throw",n.arg=i.arg,n.delegate=null,f;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,f):r:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,f)}function D(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 E(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function S(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(D,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:A}}function A(){return{value:t,done:!0}}return h.prototype=_.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(_),e},e.awrap=function(e){return{__await:e}},w(C.prototype),C.prototype[o]=function(){return this},e.AsyncIterator=C,e.async=function(t,n,a,i){var r=new C(s(t,n,a,i));return e.isGeneratorFunction(n)?r:r.next().then((function(e){return e.done?e.value:r.next()}))},w(_),_[l]="Generator",_[r]=function(){return this},_.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(E),!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 s=a.call(o,"catchLoc"),d=a.call(o,"finallyLoc");if(s&&d){if(this.prev<o.catchLoc)return i(o.catchLoc,!0);if(this.prev<o.finallyLoc)return i(o.finallyLoc)}else if(s){if(this.prev<o.catchLoc)return i(o.catchLoc,!0)}else{if(!d)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,f):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),f},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),E(n),f}},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;E(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),f}},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("grid-api-link",{attrs:{prop:"form-config"}}),e._v(" 实现动态表单，还可以通过 "),n("grid-api-link",{attrs:{prop:"titlePrefix"}}),e._v(" 或 "),n("grid-api-link",{attrs:{prop:"titleSuffix"}}),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:"","show-overflow":"","highlight-hover-row":"","keep-source":"",height:"600","row-id":"id","sort-config":{trigger:"cell"},"filter-config":{remote:!0},"form-config":e.tableForm,"pager-config":e.tablePage,toolbar:e.tableToolbar,"proxy-config":e.tableProxy,columns:e.tableColumn,"import-config":{remote:!0,importMethod:e.importMethod,types:["xlsx"],modes:["insert"]},"export-config":{remote:!0,exportMethod:e.exportMethod,types:["xlsx"],modes:["current","selected","all"]},"checkbox-config":{labelField:"id",reserve:!0,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=[],r=(n("99af"),n("4160"),n("a630"),n("caad"),n("a15b"),n("d81d"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("96cf"),n("1da1")),o=n("628a"),l=n.n(o),s=n("c695"),d=n.n(s),c=n("1487"),u=n.n(c),p={data:function(){return{sexList:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],role:[{required:!0,message:"角色必须填写"}]},tablePage:{pageSize:10,pageSizes:[5,10,15,20,50,100,200,500,1e3]},tableForm:{titleWidth:100,titleAlign:"right",items:[{field:"name",title:"app.body.label.name",span:8,titlePrefix:{message:"app.body.valid.rName",icon:"fa fa-exclamation-circle"},itemRender:{name:"$input",props:{placeholder:"请输入名称"}}},{field:"role",title:"角色",span:8,itemRender:{name:"$input",props:{placeholder:"请输入角色"}}},{field:"nickname",title:"昵称",span:8,itemRender:{name:"$input",props:{placeholder:"请输入昵称"}}},{field:"sex",title:"性别",span:8,folding:!0,titleSuffix:{message:"注意，必填信息！",icon:"fa fa-info-circle"},itemRender:{name:"$select",options:[]}},{field:"age",title:"年龄",span:8,folding:!0,itemRender:{name:"$input",props:{type:"number",placeholder:"请输入年龄"}}},{span:24,align:"center",collapseNode:!0,itemRender:{name:"$buttons",children:[{props:{type:"submit",content:"app.body.label.search",status:"primary"}},{props:{type:"reset",content:"app.body.label.reset"}}]}}]},tableProxy:{seq:!0,sort:!0,filter:!0,form:!0,ajax:{query:function(e){var t=e.page,n=e.sort,a=e.filters,i=e.form,r=Object.assign({sort:n.property,order:n.order},i);return a.forEach((function(e){var t=e.property,n=e.values;r[t]=n.join(",")})),l.a.get("https://api.xuliangzhan.com:10443/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),r)},delete:function(e){var t=e.body;return l.a.post("https://api.xuliangzhan.com:10443/api/user/save",t)},save:function(e){var t=e.body;return l.a.post("https://api.xuliangzhan.com:10443/api/user/save",t)}}},tableToolbar:{id:"full_edit_1",buttons:[{code:"insert_actived",name:"新增",icon:"fa fa-plus"},{code:"mark_cancel",name:"删除/取消",icon:"fa fa-trash-o"},{code:"save",name:"app.body.button.save",icon:"fa fa-save"}],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:"role",title:"Role",remoteSort:!0,filters:[{label:"前端开发",value:"前端"},{label:"后端开发",value:"后端"},{label:"测试",value:"测试"},{label:"程序员鼓励师",value:"程序员鼓励师"}],filterMultiple:!1,editRender:{name:"$input"}},{field:"nickname",title:"Nickname",editRender:{name:"$input"}},{field:"sex",title:"Sex",editRender:{name:"$select",options:[]}},{field:"age",title:"Age",remoteSort:!0,editRender:{name:"$input",props:{type:"number"}}},{field:"updateDate",title:"Update Date",width:160,visible:!1,remoteSort:!0,formatter:this.formatDate},{field:"createDate",title:"Create Date",width:160,visible:!1,remoteSort:!0,formatter:this.formatDate}],demoCodes:['\n <vxe-grid\n border\n resizable\n show-overflow\n highlight-hover-row\n keep-source\n ref="xGrid"\n height="600"\n row-id="id"\n :sort-config="{trigger: \'cell\'}"\n :filter-config="{remote: true}"\n :form-config="tableForm"\n :pager-config="tablePage"\n :toolbar="tableToolbar"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :import-config="{remote: true, importMethod, types: [\'xlsx\'], modes: [\'insert\']}"\n :export-config="{remote: true, exportMethod, types: [\'xlsx\'], modes: [\'current\', \'selected\', \'all\']}"\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 </vxe-grid>\n ',"\n export default {\n data () {\n return {\n sexList: [],\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: 10,\n pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]\n },\n tableForm: {\n titleWidth: 100,\n titleAlign: 'right',\n items: [\n { field: 'name', title: 'app.body.label.name', span: 8, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },\n { field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },\n { field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },\n { field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },\n { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入年龄' } } },\n { span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }\n ]\n },\n tableProxy: {\n seq: true, // 启用动态序号代理\n sort: true, // 启用排序代理\n filter: true, // 启用筛选代理\n form: true, // 启用表单代理\n ajax: {\n // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）\n query: ({ page, sort, filters, form }) => {\n // 处理排序条件\n const queryParams = Object.assign({\n sort: sort.property,\n order: sort.order\n }, form)\n // 处理筛选条件\n filters.forEach(({ property, values }) => {\n queryParams[property] = values.join(',')\n })\n return XEAjax.get(`https://api.xuliangzhan.com:10443/api/user/page/list/${page.pageSize}/${page.currentPage}`, queryParams)\n },\n delete: ({ body }) => XEAjax.post('https://api.xuliangzhan.com:10443/api/user/save', body),\n save: ({ body }) => XEAjax.post('https://api.xuliangzhan.com:10443/api/user/save', body)\n }\n },\n tableToolbar: {\n id: 'full_edit_1',\n buttons: [\n { code: 'insert_actived', name: '新增', icon: 'fa fa-plus' },\n { code: 'mark_cancel', name: '删除/取消', icon: 'fa fa-trash-o' },\n { code: 'save', name: 'app.body.button.save', icon: 'fa fa-save' }\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 {\n field: 'role',\n title: 'Role',\n remoteSort: true,\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: 'nickname', title: 'Nickname', editRender: { name: '$input' } },\n { field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },\n { field: 'age', title: 'Age', remoteSort: true, editRender: { name: '$input', props: { type: 'number' } } },\n { field: 'updateDate', title: 'Update Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate },\n { field: 'createDate', title: 'Create Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate }\n ]\n }\n },\n created () {\n this.findSexList()\n },\n methods: {\n async findSexList () {\n const sexList = await XEAjax.get('/api/conf/sex/list')\n // 异步更新下拉选项\n this.sexList = sexList\n this.tableColumn[4].editRender.options = sexList\n this.tableForm.items[3].itemRender.options = sexList\n },\n formatDate ({ cellValue }) {\n return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')\n },\n checkColumnMethod ({ column }) {\n if (['nickname', 'role'].includes(column.property)) {\n return false\n }\n return true\n },\n importMethod ({ file }) {\n const formBody = new FormData()\n formBody.append('file', file)\n return XEAjax.post('https://api.xuliangzhan.com:10443/api/user/import', formBody).then(data => {\n this.$XModal.message({ message: `成功导入 ${data.result.insertRows} 条记录！`, status: 'success' })\n // 导入完成，刷新表格\n this.$refs.xGrid.commitProxy('query')\n }).catch(() => {\n this.$XModal.message({ message: '导入失败，请检查数据是否正确！', status: 'error' })\n })\n },\n exportMethod ({ options }) {\n const proxyInfo = this.$refs.xGrid.getProxyInfo()\n const body = {\n filename: options.filename,\n sheetName: options.sheetName,\n isHeader: options.isHeader,\n original: options.original,\n mode: options.mode,\n pager: proxyInfo.pager,\n ids: options.mode === 'selected' ? options.data.map(item => item.id) : [],\n fields: options.columns.map(column => {\n return {\n field: column.property,\n title: column.title\n }\n })\n }\n // 开始服务端导出\n return XEAjax.post('https://api.xuliangzhan.com:10443/api/user/export', body).then(data => {\n if (data.id) {\n this.$XModal.message({ message: '导出成功，开始下载', status: 'success' })\n // 读取路径，开始下载\n location.href = `https://api.xuliangzhan.com:10443/api/download/${data.id}`\n }\n }).catch(() => {\n this.$XModal.message({ message: '导出失败！', status: 'error' })\n })\n }\n }\n }\n "]}},created:function(){this.findSexList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){u.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return Object(r["a"])(regeneratorRuntime.mark((function t(){var n;return regeneratorRuntime.wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.next=2,l.a.get("/api/conf/sex/list");case 2:n=t.sent,e.sexList=n,e.tableColumn[4].editRender.options=n,e.tableForm.items[3].itemRender.options=n;case 6:case"end":return t.stop()}}),t)})))()},formatDate:function(e){var t=e.cellValue;return d.a.toDateString(t,"yyyy-MM-dd HH:ss:mm")},checkColumnMethod:function(e){var t=e.column;return!["nickname","role"].includes(t.property)},importMethod:function(e){var t=this,n=e.file,a=new FormData;return a.append("file",n),l.a.post("https://api.xuliangzhan.com:10443/api/user/import",a).then((function(e){t.$XModal.message({message:"成功导入 ".concat(e.result.insertRows," 条记录！"),status:"success"}),t.$refs.xGrid.commitProxy("query")})).catch((function(){t.$XModal.message({message:"导入失败，请检查数据是否正确！",status:"error"})}))},exportMethod:function(e){var t=this,n=e.options,a=this.$refs.xGrid.getProxyInfo(),i={filename:n.filename,sheetName:n.sheetName,isHeader:n.isHeader,original:n.original,mode:n.mode,pager:a.pager,ids:"selected"===n.mode?n.data.map((function(e){return e.id})):[],fields:n.columns.map((function(e){return{field:e.property,title:e.title}}))};return l.a.post("https://api.xuliangzhan.com:10443/api/user/export",i).then((function(e){e.id&&(t.$XModal.message({message:"导出成功，开始下载",status:"success"}),location.href="https://api.xuliangzhan.com:10443/api/download/".concat(e.id))})).catch((function(){t.$XModal.message({message:"导出失败！",status:"error"})}))}}},m=p,f=n("2877"),b=Object(f["a"])(m,a,i,!1,null,null,null);t["default"]=b.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":"","export-config":"","keep-source":"","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("4160"),n("a630"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("628a"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){return{tableProxy:{ajax:{query:function(){return s.a.get("/api/file/list").then((function(e){return o.a.toArrayTree(e,{key:"id",parentKey:"parentId",children:"children"})}))},save:function(e){var t=e.body;return s.a.post("/api/file/save",t)}}},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 export-config\n keep-source\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: () => XEAjax.get('/api/file/list').then(data => {\n // 将带层级的列表转成树结构\n return XEUtils.toArrayTree(data, { key: 'id', parentKey: 'parentId', children: 'children' })\n }),\n save: ({ body }) => XEAjax.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 XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){c.a.highlightBlock(e)}))},methods:{formatterDate:function(e){var t=e.cellValue;return o.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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":"","keep-source":"",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":"","keep-source":"",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("4160"),n("a630"),n("d81d"),n("b0c0"),n("4d63"),n("ac1f"),n("25f0"),n("3ca3"),n("9911"),n("159b"),n("c695")),o=n.n(r),l=n("628a"),s=n.n(l),d=n("1487"),c=n.n(d),u={data:function(){return{tablePage:{pageSize:5,pageSizes:[5,10,15,20,50]},tableProxy:{props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return s.a.get("/api/column/page/list/".concat(t.pageSize,"/").concat(t.currentPage),{sort:"seq",order:"asc"})},delete:function(e){var t=e.body;return s.a.post("/api/column/save",t)},save:function(e){var t=e.body;return s.a.post("/api/column/save",t)}}},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(e){var t=e.page;return s.a.get("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return s.a.post("/api/user/save",t)},save:function(e){var t=e.body;return s.a.post("/api/user/save",t)}}},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 keep-source\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 }) => XEAjax.get(`/api/column/page/list/${page.pageSize}/${page.currentPage}`, { sort: 'seq', order: 'asc' }),\n delete: ({ body }) => XEAjax.post('/api/column/save', body),\n save: ({ body }) => XEAjax.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 XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')\n }\n }\n }\n ",'\n <vxe-grid\n border\n show-overflow\n keep-source\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 }) => XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`),\n delete: ({ body }) => XEAjax.post('/api/user/save', body),\n save: ({ body }) => XEAjax.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 XEAjax.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 XEUtils.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){c.a.highlightBlock(e)}))},methods:{findColumn:function(){var e=this,t=this.$createElement;this.loading2=!0,s.a.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 o.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")},toolbarButtonClickEvent:function(e){var t=e.code;switch(t){case"reloadColumn":this.findColumn();break}}}},p=u,m=n("2877"),f=Object(m["a"])(p,a,i,!1,null,null,null);t["default"]=f.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":"","export-config":"",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("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),o=n.n(r),l=n("1487"),s=n.n(l),d={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 export-config\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){s.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=d,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:"","form-config":"","show-overflow":"","export-config":"",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:"buttons",fn:function(){return[n("vxe-form",{attrs:{data:e.formData},on:{submit:e.searchEvent}},[n("vxe-form-item",{attrs:{field:"name","item-render":{name:"input",attrs:{placeholder:"请输入名称"}}}}),n("vxe-form-item",{attrs:{"item-render":{name:"input",attrs:{type:"submit",value:e.$t("app.body.label.search")}}}})],1)]},proxy:!0},{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("4160"),n("a630"),n("a15b"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){var e=this;return{formData:{name:""},tablePage:{pageSize:15,pageSizes:[5,15,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=Object.assign({sort:a.property,order:a.order},e.formData);return i.forEach((function(e){var t=e.field,n=e.values;r[t]=n.join(",")})),o.a.get("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage),r)}}},tableToolbar:{export:!0,custom:!0},tableColumn:[{type:"seq",width:60,fixed:"left"},{type:"checkbox",title:"ID",width:120,fixed:"left"},{field:"name",title:"Name",minWidth:300,remoteSort:!0},{field:"nickname",title:"Nickname",remoteSort:!0,minWidth:300},{field:"age",title:"Age",visible:!1,remoteSort:!0,width:100},{field:"role",title:"Role",visible:!1,remoteSort:!0,width:200,filters:[{label:"前端开发",value:"前端"},{label:"后端开发",value:"后端"},{label:"测试",value:"测试"},{label:"程序员鼓励师",value:"程序员鼓励师"}],filterMultiple:!1},{field:"describe",title:"Describe",minWidth:300,showOverflow:!0}],demoCodes:['\n <vxe-grid\n resizable\n form-config\n show-overflow\n export-config\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\n <template v-slot:buttons>\n <vxe-form :data="formData" @submit="searchEvent">\n <vxe-form-item field="name" :item-render="{name: \'input\', attrs: {placeholder: \'请输入名称\'}}"></vxe-form-item>\n <vxe-form-item :item-render="{name: \'input\', attrs: {type: \'submit\', value: $t(\'app.body.label.search\')}}"></vxe-form-item>\n </vxe-form>\n </template>\n\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 formData: {\n name: ''\n },\n tablePage: {\n pageSize: 15,\n pageSizes: [5, 15, 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 queryParams = Object.assign({\n sort: sort.property,\n order: sort.order\n }, this.formData)\n // 处理筛选条件\n filters.forEach(({ column, property, values }) => {\n queryParams[property] = values.join(',')\n })\n return XEAjax.get(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, queryParams)\n }\n }\n },\n tableToolbar: {\n export: true,\n custom: true\n },\n tableColumn: [\n { type: 'seq', width: 60, fixed: 'left' },\n { type: 'checkbox', title: 'ID', width: 120, fixed: 'left' },\n { field: 'name', title: 'Name', minWidth: 300, remoteSort: true },\n { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 300 },\n { field: 'age', title: 'Age', visible: false, remoteSort: true, width: 100 },\n {\n field: 'role',\n title: 'Role',\n visible: false,\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', minWidth: 300, showOverflow: true }\n ]\n }\n },\n methods: {\n searchEvent () {\n this.$refs.xGrid.commitProxy('reload')\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{searchEvent:function(){this.$refs.xGrid.commitProxy("reload")}}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来"),n("br"),e._v(" 对接格式：使用 "),n("a",{staticClass:"link",attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise"}},[e._v("Promise API")]),e._v(" ，任何支持 "),n("a",{staticClass:"link",attrs:{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise"}},[e._v("Promise")]),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("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),o=n.n(r),l=n("1487"),s=n.n(l),d={data:function(){return{tableProxy:{ajax:{query:function(){return o.a.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: () => XEAjax.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){s.a.highlightBlock(e)}))}},c=d,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},ee0a:function(e,t,n){"use strict";var a=n("f441"),i=n.n(a);i.a},f441:function(e,t,n){},f7c3:function(e,t,n){}}]);
Reference in New Issue View Git Blame Copy Permalink