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
c36e869d85d64016bf2d4eef7230ebc29cc66826
vxe-table/docs/static/js/grid.3fcf5696.js
xuliangzhan c36e869d85 update
2019-08-24 14:49:42 +08:00

1 line
84 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"],{"21be":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("工具栏：通过 "),n("grid-api-link",{attrs:{prop:"toolbar"}}),e._v(" 属性配置，使用 "),n("grid-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义模板")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.toolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("input",{attrs:{type:"text"}}),n("button",[e._v("搜索")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("reload")}}},[e._v("刷新")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("insert_actived")}}},[e._v("新增")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("mark_cancel")}}},[e._v("标记/取消")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.commitProxy("save")}}},[e._v("保存")]),n("vxe-button",{on:{click:function(t){return e.$refs.xGrid.exportCsv()}}},[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("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{result:"data.result",total:"data.page.total"},ajax:{query:function(e){var t=e.page;return o.a.doGet("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.doPost("/api/user/save",t)},save:function(e){var t=e.body;return o.a.doPost("/api/user/save",t)}}},toolbar:{id:"toolbar_demo_2",refresh:!0,setting:{storage:!0}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n <vxe-grid\n border\n resizable\n ref="xGrid"\n height="530"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="toolbar"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}">\n <template v-slot:buttons>\n <input type="text"/>\n <vxe-button>搜索</vxe-button>\n <vxe-button @click="$refs.xGrid.commitProxy(\'reload\')">刷新</vxe-button>\n <vxe-button @click="$refs.xGrid.commitProxy(\'insert_actived\')">新增</vxe-button>\n <vxe-button @click="$refs.xGrid.commitProxy(\'mark_cancel\')">标记/取消</vxe-button>\n <vxe-button @click="$refs.xGrid.commitProxy(\'save\')">保存</vxe-button>\n <vxe-button @click="$refs.xGrid.exportCsv()">导出.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: 'data.result',\n total: 'data.page.total'\n },\n ajax: {\n // page 对象： { pageSize, currentPage }\n query: ({ page }) => XEAjax.doGet(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.doPost('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.doPost('/api/user/save', body)\n }\n },\n toolbar: {\n id: 'toolbar_demo_2',\n refresh: true,\n setting: {\n storage: true\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', 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){d.a.highlightBlock(e)})}},c=s,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 使用自定义模板渲染，通过 "),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 列："),n("br"),n("table-column-api-link",{attrs:{prop:"default"}}),e._v("：自定义内容模板（提前格式化好数据 > "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" > "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v("）"),n("br"),n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板"),n("br"),n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),e._v("\n 工具栏："),n("br"),n("table-column-api-link",{attrs:{prop:"buttons"}}),e._v("：自定义按钮模板\n ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"400",toolbar:e.tableToolbar,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"cell"}},on:{"update:data":function(t){e.tableData=t}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"vue"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[],r=(n("5df3"),n("1c4c"),n("ac6a"),n("7f7f"),n("1487")),o=n.n(r),l={data:function(){var e=this,t=this.$createElement;return{tableColumn:[{type:"index",width:50},{field:"name",title:"Name",slots:{default:function(n){var a=n.row,i=n.column;return[t("span",{style:"color: red;"},[a.name]),t("button",{on:{click:function(){return e.clickEvent(a,i)}}},["按钮"])]}}},{field:"sex",title:"Sex",showHeaderOverflow:!0,filters:[{data:""}],filterMethod:this.filterSexMethod,editRender:{type:"default"},slots:{default:function(e){var n=e.row;e.column;return[t("a",{class:"link",attrs:{href:"https://xuliangzhan.github.io/vxe-table/"}},["链接：",n.sex])]},header:function(n){var a=n.column;return[t("span",[t("i",["@"]),t("span",{style:"color: red;",on:{click:e.headerClickEvent}},[a.title])])]},filter:function(n){var a=n.column,i=n.context;return a.filters.map(function(n){return t("input",{attrs:{type:"type"},domProps:{value:n.data},on:{input:function(t){return e.changeFilterEvent(t,n,i)}}})})},edit:function(e){var n=e.row;return[t("input",{attrs:{type:"text"},domProps:{value:n.sex},on:{input:function(e){n.sex=e.target.value}}})]}}},{field:"address",title:"Address",showOverflow:!0,slots:{default:function(t,n){var a=t.row;return[n("span",{style:{color:"blue"},on:{click:function(){return e.addressClickEvent(a)}}},a.address)]}}}],tableToolbar:{setting:!0,slots:{buttons:function(){return[t("button",["按钮"]),t("input",{attrs:{type:"text"}}),t("vxe-button",["按钮1"]),t("vxe-button",["按钮2"])]}}},tableData:[],demoCodes:['\n <vxe-grid\n border\n resizable\n height="400"\n :toolbar="tableToolbar"\n :columns="tableColumn"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'cell\'}">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'index', width: 50 },\n {\n field: 'name',\n title: 'Name',\n slots: {\n default: ({ row }) => {\n return [\n <span style=\"color: red;\">{ row.name }</span>,\n <button onClick={ () => this.clickEvent(row, column) }>按钮</button>\n ]\n }\n }\n },\n {\n field: 'sex',\n title: 'Sex',\n showHeaderOverflow: true,\n filters: [{ data: '' }],\n filterMethod: this.filterSexMethod,\n editRender: { type: 'default' },\n slots: {\n default: ({ row, column }) => {\n return [\n <a class=\"link\" href=\"https://xuliangzhan.github.io/vxe-table/\">链接：{ row.sex }</a>\n ]\n },\n header: ({ column }) => {\n return [\n <span>\n <i>@</i>\n <span style=\"color: red;\" onClick={ this.headerClickEvent }>{ column.title }</span>\n </span>\n ]\n },\n filter: ({ column, context }) => {\n return column.filters.map(option => {\n return <input type=\"type\" value={ option.data } onInput={ evnt => this.changeFilterEvent(evnt, option, context) }/>\n })\n },\n edit: ({ row }) => {\n return [\n <input type=\"text\" value={ row.sex } onInput={ evnt => { row.sex = evnt.target.value } }/>\n ]\n }\n }\n },\n {\n field: 'address',\n title: 'Address',\n showOverflow: true,\n slots: {\n default: ({ row }, h) => {\n return [\n h('span', {\n style: {\n color: 'blue'\n },\n on: {\n click: () => this.addressClickEvent(row)\n }\n }, row.address)\n ]\n }\n }\n }\n ],\n tableToolbar: {\n setting: true,\n slots: {\n buttons: () => {\n return [\n <button>按钮</button>,\n <input type=\"text\"/>,\n <vxe-button>按钮1</vxe-button>,\n <vxe-button>按钮2</vxe-button>\n ]\n }\n }\n },\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n },\n methods: {\n clickEvent (row, column) {\n this.$XMsg.alert(`${column.title}点击事件`)\n },\n headerClickEvent (evnt) {\n this.$XMsg.alert('头部点击事件')\n },\n addressClickEvent (row) {\n this.$XMsg.alert(`address点击事件：${row.row}`)\n },\n filterSexMethod ({ option, row }) {\n return row.sex === option.data\n },\n changeFilterEvent (evnt, option, context) {\n option.data = evnt.target.value\n context.changeMultipleOption(evnt, !!option.data, option)\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,100);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{clickEvent:function(e,t){this.$XMsg.alert("".concat(t.title,"点击事件"))},headerClickEvent:function(e){this.$XMsg.alert("头部点击事件")},addressClickEvent:function(e){this.$XMsg.alert("address点击事件：".concat(e.row))},filterSexMethod:function(e){var t=e.option,n=e.row;return n.sex===t.data},changeFilterEvent:function(e,t,n){t.data=e.target.value,n.changeMultipleOption(e,!!t.data,t)}}},d=l,s=n("2877"),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},2796:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 动态化表格，解决动态数据一切需求（动态列、动态数据、动态个性化...）"),n("br"),e._v("\n 渲染性能对比："),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 通过 "),n("grid-api-link",{attrs:{prop:"columns"}}),e._v(" 动态配置列信息，这非常适用于动态渲染的场景，完全使用数据进行配置\n ")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"300",columns:e.tableColumn,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}}),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:"",stripe:"",resizable:"","show-footer":"",height:"500","footer-method":e.footerMethod,columns:e.tableColumn2,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}}),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("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("c695")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableColumn:[{type:"index",width:50},{field:"name",title:"app.body.label.name"},{field:"sex",title:"app.body.label.sex",showHeaderOverflow:!0},{field:"address",title:"Address",showOverflow:!0}],tableColumn2:[{type:"index",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 resizable\n height="300"\n :columns="tableColumn"\n :data.sync="tableData"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'index', 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 }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n }\n }\n ",'\n <vxe-grid\n border\n stripe\n resizable\n show-footer\n height="500"\n :footer-method="footerMethod"\n :columns="tableColumn2"\n :data.sync="tableData"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn2: [\n { type: 'index', 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 }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\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 ]\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,100);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){d.a.highlightBlock(e)})},methods:{footerMethod:function(e){var t=e.columns,n=e.data;return[t.map(function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?o.a.sum(n,e.property):null})]}}},c=s,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("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 参数，如果配置了 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 分页，则默认读取响应结果中 page.total 和 result 属性，可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改，由 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","row-id":"id","pager-config":{pageSize:10},"proxy-config":e.tableProxy,"select-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("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableProxy:{index:!0,props:{result:"result",total:"page.total"},ajax:{query:function(e){var t=e.page;return o.a.getJSON("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))}}},tableColumn:[{type:"selection",width:50},{type:"index",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 :select-config="{reserve: true}"\n :columns="tableColumn"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableProxy: {\n index: true, // 启用动态序号代理\n props: {\n result: 'result',\n total: 'page.total'\n },\n ajax: {\n query: ({ page }) => XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`)\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', 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){d.a.highlightBlock(e)})}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.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:"","proxy-config":e.tableProxy,columns:e.tableColumn,"tree-config":{children:"children"}}}),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("5df3"),n("1c4c"),n("ac6a"),n("c695")),o=n.n(r),l=n("628a"),d=n.n(l),s=n("1487"),c=n.n(s),u={data:function(){return{tableProxy:{ajax:{query:function(){return d.a.getJSON("/api/file/list").then(function(e){return o.a.toArrayTree(e,{key:"id",parentKey:"parentId",children:"children"})})}}},tableColumn:[{field:"id",title:"ID",width:120,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="{children: \'children\'}"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableProxy: {\n ajax: {\n // 处理树结构转换\n query: () => XEAjax.getJSON('/api/file/list').then(data => XEUtils.toArrayTree(data, { key: 'id', parentKey: 'parentId', children: 'children' }))\n }\n },\n tableColumn: [\n { type: 'selection', width: 100, treeNode: true },\n { field: 'id', title: 'ID', width: 0 },\n { field: 'name', title: '名称' },\n { field: 'size', title: '大小' },\n { field: 'createTime', title: '创建时间' },\n { field: 'updateTime', title: '修改时间' }\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},"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:"pager-config"}}),e._v(" 参数开启分页功能，对于分页场景下，如果要实现分页动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"start-index"}}),e._v(" 属性设置起始值")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530",loading:e.loading,"start-index":(e.tablePage.currentPage-1)*e.tablePage.pageSize,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData},on:{"update:data":function(t){e.tableData=t},"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("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{loading:!1,tablePage:{total:0,currentPage:1,pageSize:10,pageSizes:[10,20,50,100,200,500]},tableColumn:[{type:"index",width:60},{type:"selection",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 :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"\n :pager-config="tablePage"\n :columns="tableColumn"\n :data.sync="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 },\n tableColumn: [\n { type: 'index', width: 60 },\n { type: 'selection', 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.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`).then(response => {\n let { page, result } = response.data\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){d.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,o.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then(function(t){var n=t.data,a=n.page,i=n.result;e.tableData=i,e.tablePage.total=a.total,e.loading=!1}).catch(function(t){e.loading=!1})},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,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:"",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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{result:"data.result",total:"data.page.total"},ajax:{query:function(e){var t=e.page;return o.a.doGet("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return o.a.doPost("/api/user/save",t)},save:function(e){var t=e.body;return o.a.doPost("/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:"imput",name:"导入.csv"},{code:"export",name:"导出.csv"}]},{code:"myBtn",name:"自定义按钮"}],refresh:!0,resizable:{storage:!0},setting:{storage:!0}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{field:"name",title:"Name",editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n <vxe-grid\n border\n resizable\n height="530"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n @toolbar-button-click="toolbarButtonClickEvent"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tablePage: {\n pageSize: 15\n },\n tableProxy: {\n // 配置响应的数据属性\n props: {\n result: 'data.result',\n total: 'data.page.total'\n },\n ajax: {\n // page 对象： { pageSize, currentPage }\n query: ({ page }) => XEAjax.doGet(`/api/user/page/list/${page.pageSize}/${page.currentPage}`), // 模拟请求\n // body 对象： { removeRecords }\n delete: ({ body }) => XEAjax.doPost('/api/user/save', body),\n // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }\n save: ({ body }) => XEAjax.doPost('/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: 'imput', name: '导入.csv' },\n { code: 'export', name: '导出.csv' }\n ]\n },\n { code: 'myBtn', name: '自定义按钮' }\n ],\n refresh: true,\n resizable: {\n storage: true\n },\n setting: {\n storage: true\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', 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 ({ button }, event) {\n switch (button.code) {\n case 'myBtn':\n this.$XMsg.alert(button.name)\n break\n }\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){d.a.highlightBlock(e)})},methods:{toolbarButtonClickEvent:function(e,t){var n=e.button;switch(n.code){case"myBtn":this.$XMsg.alert(n.name);break}}}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},"600c":function(e,t,n){},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:{"update:data":function(t){e.tableData=t},"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("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("c695")),o=n.n(r),l=n("f11d"),d=n("1487"),s=n.n(d),c={data:function(){return{tableColumn:[{type:"index",width:50},{field:"name",title:"app.body.label.name"},{field:"age",title:"app.body.label.age"},{field:"address",title:"Address",showOverflow:!0}],headerMenus:[[{code:"exportAll",name:"导出所有.csv",visible:!0,disabled:!1}]],bodyMenus:[[{code:"copy",name:"复制内容",visible:!0,disabled:!1,prefixIcon:"fa fa-copy"},{code:"clear",name:"清除内容",visible:!0,disabled:!1},{code:"reload",name:"刷新表格",visible:!0,disabled:!1},{code:"export",name:"导出.csv",visible:!0,disabled:!1,prefixIcon:"fa fa-download"}]],footerMenus:[[{code:"exportAll",name:"导出所有.csv",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.sync="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: 'index', width: 50 },\n { field: 'name', title: 'app.body.label.name' },\n { field: 'age', title: 'app.body.label.age' },\n { field: 'address', title: 'Address', showOverflow: true }\n ],\n headerMenus: [\n [\n {\n code: 'exportAll',\n name: '导出所有.csv',\n visible: true,\n disabled: false\n }\n ]\n ],\n bodyMenus: [\n [\n {\n code: 'copy',\n name: '复制内容',\n visible: true,\n disabled: false,\n prefixIcon: 'fa fa-copy'\n },\n {\n code: 'clear',\n name: '清除内容',\n visible: true,\n disabled: false\n },\n {\n code: 'reload',\n name: '刷新表格',\n visible: true,\n disabled: false\n },\n {\n code: 'export',\n name: '导出.csv',\n visible: true,\n disabled: false,\n prefixIcon: 'fa fa-download'\n }\n ]\n ],\n footerMenus: [\n [\n {\n code: 'exportAll',\n name: '导出所有.csv',\n visible: true,\n disabled: false\n }\n ]\n ],\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 4)\n },\n methods: {\n visibleMethod ({ type, column }) {\n // 示例：只有 name 列允许操作，清除按钮只能在 age 才显示\n // 显示之前处理按钮的操作权限\n let isDisabled = !column || column.property !== 'name'\n let isVisible = column && column.property === 'age'\n this.bodyMenus.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.$XMsg.message({ message: '已复制到剪贴板！', status: 'success' })\n }\n }\n break\n case 'clear':\n xGrid.clearData(row, column.property)\n break\n case 'export':\n xGrid.exportCsv()\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){s.a.highlightBlock(e)})},methods:{visibleMethod:function(e){e.type;var t=e.column,n=!t||"name"!==t.property,a=t&&"age"===t.property;return this.bodyMenus.forEach(function(e){e.forEach(function(e){["copy"].includes(e.code)&&(e.disabled=n),["clear"].includes(e.code)&&(e.visible=a)})}),!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&&l["a"].copy(n[a.property])&&this.$XMsg.message({message:"已复制到剪贴板！",status:"success"});break;case"clear":i.clearData(n,a.property);break;case"export":i.exportCsv();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})]}}},u=c,p=n("2877"),m=Object(p["a"])(u,a,i,!1,null,null,null);t["default"]=m.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},on:{"update:data":function(t){e.tableData=t}}}),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},on:{"update:data":function(t){e.tableData2=t}}}),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("5df3"),n("1c4c"),n("ac6a"),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.sync="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 {\n .vxe-body--row {\n .vxe-body--column {\n &:first-child {\n background-color: #f8f8f9;\n }\n }\n }\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.sync="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 {\n .vxe-body--row {\n .vxe-body--column {\n &:first-child {\n background-color: #f8f8f9;\n }\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.tableData2=window.MOCK_DATA_LIST.slice(0,200),this.reverseTable(),this.reverseTable2()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{reverseTable:function(){var e=this.tableData;this.tableData=this.tableColumn.map(function(t){var n={0:t.title};return e.forEach(function(e,a){n[a+1]=e[t.field]}),n}),this.tableColumn=[{field:"0",fixed:"left",width:80}].concat(e.map(function(e,t){return{field:"".concat(t+1),minWidth:120}}))},reverseTable2:function(){var e=this.tableData2;this.tableData2=this.tableColumn2.map(function(t){var n={0:t.title};return e.forEach(function(e,a){n[a+1]=e[t.field]}),n}),this.tableColumn2=[{field:"0",fixed:"left",width:80}].concat(e.map(function(e,t){return{field:"".concat(t+1),minWidth:120}}))}}},d=l,s=(n("a83a"),n("2877")),c=Object(s["a"])(d,a,i,!1,null,null,null);t["default"]=c.exports},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",{attrs:{border:"",resizable:"",height:"530",loading:e.loading,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"update:data":function(t){e.tableData=t},"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("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{loading:!1,tablePage:{total:0,currentPage:1,pageSize:10,pageSizes:[10,20,50,100,200,500]},tableColumn:[{type:"index",width:60},{type:"selection",width:50},{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"}}],tableData:[],demoCodes:['\n <vxe-grid\n border\n resizable\n height="530"\n :loading="loading"\n :pager-config="tablePage"\n :columns="tableColumn"\n :data.sync="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"\n @page-change="handlePageChange"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tablePage: {\n total: 0,\n currentPage: 1,\n pageSize: 10\n },\n tableColumn: [\n { type: 'index', width: 60 },\n { type: 'selection', width: 50 },\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 tableData: []\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n // 模拟后台接口\n this.loading = true\n XEAjax.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`).then(response => {\n let { page, result } = response.data\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){d.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,o.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then(function(t){var n=t.data,a=n.page,i=n.result;e.tableData=i,e.tablePage.total=a.total,e.loading=!1}).catch(function(t){e.loading=!1})},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},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 查询代理、服务端排序代理、服务端筛选代理、分页代理、增删改查"),n("br"),e._v("\n 对于分页场景下，如果想要保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性"),n("br"),e._v("\n 由 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来\n ")],1),n("vxe-grid",{attrs:{border:"",resizable:"","highlight-hover-row":"","remote-filter":"",height:"530","row-id":"id","pager-config":{pageSize:15},toolbar:e.tableToolbar,"proxy-config":e.tableProxy,columns:e.tableColumn,"select-config":{reserve:!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("5df3"),n("1c4c"),n("ac6a"),n("55dd"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],role:[{required:!0,message:"角色必须填写"}]},tableProxy:{index:!0,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){e.column;var t=e.property,n=e.values;i[t]=n.join(",")}),o.a.getJSON("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),i)},delete:function(e){var t=e.body;return o.a.doPost("/api/user/save",t)},save:function(e){var t=e.body;return o.a.doPost("/api/user/save",t)}}},tableToolbar:{id:"full_edit_1",buttons:[{code:"reload",name:"app.body.button.refresh"},{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:"export",name:"导出数据.csv"},{code:"reset_custom",name:"重置个性化信息"}]}],refresh:!0,resizable:{storage:!0},setting:{storage:!0}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{field:"name",title:"Name",remoteSort:!0,editRender:{name:"input"}},{field:"nickname",title:"Nickname",editRender:{name:"input"}},{field:"role",title:"Role",remoteSort:!0,width:200,filters:[{label:"前端",value:"前端"},{label:"后端",value:"后端"},{label:"测试",value:"测试"}],filterMultiple:!1,editRender:{name:"input"}},{field:"describe",title:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n <vxe-grid\n border\n resizable\n highlight-hover-row\n remote-filter\n height="530"\n row-id="id"\n :pager-config="{pageSize: 15}"\n :toolbar="tableToolbar"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :select-config="{reserve: 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 tableProxy: {\n index: true, // 启用动态序号代理\n sort: true, // 启用排序代理\n filter: true, // 启用筛选代理\n ajax: {\n query: ({ page, sort, filters }) => {\n // 处理排序条件\n let formData = {\n sort: sort.property,\n order: sort.order\n }\n // 处理筛选条件\n filters.forEach(({ column, property, values }) => {\n formData[property] = values.join(',')\n })\n return XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, formData)\n },\n delete: ({ body }) => XEAjax.doPost('/api/user/save', body),\n save: ({ body }) => XEAjax.doPost('/api/user/save', body)\n }\n },\n tableToolbar: {\n id: 'full_edit_1',\n buttons: [\n { code: 'reload', name: 'app.body.button.refresh' },\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: 'export', name: '导出数据.csv' },\n { code: 'reset_custom', name: '重置个性化信息' }\n ]\n }\n ],\n refresh: true,\n resizable: {\n storage: true\n },\n setting: {\n storage: true\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', width: 60 },\n { field: 'name', title: 'Name', remoteSort: true, editRender: { name: 'input' } },\n { field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },\n {\n field: 'role',\n title: 'Role',\n remoteSort: true,\n width: 200,\n filters: [\n { label: '前端', value: '前端' },\n { label: '后端', value: '后端' },\n { label: '测试', value: '测试' }\n ],\n filterMultiple: false,\n editRender: { name: 'input' }\n },\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){d.a.highlightBlock(e)})}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},a83a:function(e,t,n){"use strict";var a=n("600c"),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("toolbar-api-link",{attrs:{prop:"storage"}}),e._v(" 开启将列个性化的设置状态保存到本地")],1),n("vxe-grid",{attrs:{resizable:"","highlight-hover-row":"","proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"select-config":{labelField:"id"},"tree-config":{children:"children"},"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("5df3"),n("1c4c"),n("ac6a"),n("c695")),o=n.n(r),l=n("628a"),d=n.n(l),s=n("1487"),c=n.n(s),u={data:function(){return{tableProxy:{ajax:{query:function(){return d.a.getJSON("/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 d.a.doPost("/api/file/save",t)}}},tableToolbar:{id:"treeEdit_demo1",buttons:[{code:"reload",name:"app.body.button.refresh"},{code:"insert_actived",name:"app.body.button.insert"},{code:"mark_cancel",name:"app.body.button.markCancel"},{code:"save",name:"app.body.button.save"},{code:"export",name:"导出.csv"}],refresh:!0,resizable:{storage:!0},setting:{storage:!0}},tableColumn:[{type:"selection",title:"全选",width:180,treeNode:!0},{field:"name",title:"名称",editRender:{name:"input"}},{field:"size",title:"大小",editRender:{name:"input"}},{field:"createTime",title:"app.body.label.createTime",formatter:this.formatterDate},{field:"updateTime",title:"app.body.label.updateTime",formatter:this.formatterDate}],demoCodes:['\n <vxe-grid\n resizable\n highlight-hover-row\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :select-config="{labelField: \'id\'}"\n :tree-config="{ children: \'children\'}"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableProxy: {\n ajax: {\n // 处理树结构转换\n query: () => XEAjax.getJSON('/api/file/list').then(data => XEUtils.toArrayTree(data, { key: 'id', parentKey: 'parentId', children: 'children' })),\n save: ({ body }) => XEAjax.doPost('/api/file/save', body)\n }\n },\n tableToolbar: {\n id: 'treeEdit_demo1',\n buttons: [\n { code: 'reload', name: 'app.body.button.refresh' },\n { code: 'insert_actived', name: 'app.body.button.insert' },\n { code: 'mark_cancel', name: 'app.body.button.markCancel' },\n { code: 'save', name: 'app.body.button.save' },\n { code: 'export', name: '导出.csv' }\n ],\n refresh: true,\n resizable: {\n storage: true\n },\n setting: {\n storage: true\n }\n },\n tableColumn: [\n { type: 'selection', title: '全选', width: 180, treeNode: true },\n { field: 'name', title: '名称', editRender: { name: 'input' } },\n { field: 'size', title: '大小', editRender: { name: 'input' } },\n { field: 'createTime', title: 'app.body.label.createTime', formatter: this.formatterDate },\n { field: 'updateTime', title: 'app.body.label.updateTime', 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":"",height:"306","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row",showStatus:!0}}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("级联动态列渲染，可以非常简单的实现功能复杂的可配置动态列")]),n("vxe-grid",{attrs:{border:"","show-overflow":"",height:"290",loading:e.loading2,"pager-config":e.tablePage2,"proxy-config":e.tableProxy2,columns:e.tableColumn2,toolbar:e.tableToolbar2,"edit-rules":e.validRules2,"edit-config":{trigger:"click",mode:"row",showStatus:!0}},on:{"toolbar-button-click":e.toolbarButtonClickEvent}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},i=[],r=(n("3b2b"),n("b54a"),n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("c695")),o=n.n(r),l=n("628a"),d=n.n(l),s=n("1487"),c=n.n(s),u={data:function(){return{tablePage:{pageSize:5,pageSizes:[5,10,15,20,50]},tableProxy:{props:{result:"data.result",total:"data.page.total"},ajax:{query:function(e){var t=e.page;return d.a.doGet("/api/column/page/list/".concat(t.pageSize,"/").concat(t.currentPage),{sort:"seq",order:"asc"})},delete:function(e){var t=e.body;return d.a.doPost("/api/column/save",t)},save:function(e){var t=e.body;return d.a.doPost("/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,setting:!0},tableColumn:[{type:"selection",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:"data.result",total:"data.page.total"},ajax:{query:function(e){var t=e.page;return d.a.doGet("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return d.a.doPost("/api/user/save",t)},save:function(e){var t=e.body;return d.a.doPost("/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,setting:!0},validRules2:null,tableColumn2:[],demoCodes:['\n <vxe-grid\n border\n resizable\n show-overflow\n height="306"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :edit-config="{trigger: \'click\', mode: \'row\', showStatus: true}"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tablePage: {\n pageSize: 5,\n pageSizes: [5, 10, 15, 20, 50]\n },\n tableProxy: {\n props: {\n result: 'data.result',\n total: 'data.page.total'\n },\n ajax: {\n query: ({ page }) => XEAjax.doGet(`/api/column/page/list/${page.pageSize}/${page.currentPage}`, { sort: 'seq', order: 'asc' }),\n delete: ({ body }) => XEAjax.doPost('/api/column/save', body),\n save: ({ body }) => XEAjax.doPost('/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 setting: true\n },\n tableColumn: [\n { type: 'selection', 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 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: 'data.result',\n total: 'data.page.total'\n },\n ajax: {\n query: ({ page }) => XEAjax.doGet(`/api/user/page/list/${page.pageSize}/${page.currentPage}`),\n delete: ({ body }) => XEAjax.doPost('/api/user/save', body),\n save: ({ body }) => XEAjax.doPost('/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 setting: 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.getJSON('/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 ({ button }, event) {\n switch (button.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,d.a.getJSON("/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,t){var n=e.button;switch(n.code){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},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("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","remote-filter":"",height:"548","row-id":"id","pager-config":{pageSize:15},columns:e.tableColumn,"proxy-config":e.tableProxy,"select-config":{reserve:!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("5df3"),n("1c4c"),n("ac6a"),n("55dd"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableProxy:{index:!0,sort:!0,filter:!0,ajax:{query:function(e){var t=e.page,n=e.sort,a=e.filters,i={sort:n.field,order:n.order};return a.forEach(function(e){e.column;var t=e.field,n=e.values;i[t]=n.join(",")}),o.a.getJSON("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),i)}}},tableColumn:[{type:"selection",width:50,fixed:"left"},{type:"index",width:60,fixed:"left"},{field:"id",title:"ID",width:100,remoteSort:!0},{field:"name",title:"Name",width:300,remoteSort:!0},{field:"nickname",title:"Nickname",remoteSort:!0,width:300},{field:"age",title:"Age",remoteSort:!0,width:100},{field:"role",title:"Role",remoteSort:!0,width:200,filters:[{label:"前端",value:"前端"},{label:"后端",value:"后端"},{label:"测试",value:"测试"}],filterMultiple:!1},{field:"describe",title:"Describe",width:300,showOverflow:!0}],demoCodes:['\n <vxe-grid\n ref="xGrid"\n border\n resizable\n remote-filter\n height="548"\n row-id="id"\n :pager-config="{pageSize: 15}"\n :columns="tableColumn"\n :proxy-config="tableProxy"\n :select-config="{reserve: true}"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableProxy: {\n index: true, // 启用动态序号代理\n sort: true, // 启用排序代理\n filter: true, // 启用筛选代理\n ajax: {\n query: ({ page, sort, filters }) => {\n // 处理排序条件\n let formData = {\n sort: sort.property,\n order: sort.order\n }\n // 处理筛选条件\n filters.forEach(({ column, property, values }) => {\n formData[property] = values.join(',')\n })\n return XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, formData)\n }\n }\n },\n tableColumn: [\n { type: 'selection', width: 50, fixed: 'left' },\n { type: 'index', width: 60, fixed: 'left' },\n { field: 'id', title: 'ID', width: 100, remoteSort: true },\n { field: 'name', title: 'Name', width: 300, remoteSort: true },\n { field: 'nickname', title: 'Nickname', remoteSort: true, width: 300 },\n { field: 'age', title: 'Age', remoteSort: true, width: 100 },\n {\n field: 'role',\n title: 'Role',\n remoteSort: true,\n width: 200,\n filters: [\n { label: '前端', value: '前端' },\n { label: '后端', value: '后端' },\n { label: '测试', value: '测试' }\n ],\n filterMultiple: false\n },\n { field: 'describe', title: 'Describe', width: 300, showOverflow: true }\n ]\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){d.a.highlightBlock(e)})}},c=s,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("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 参数，默认直接读取结果，响应结果应该为数组；可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改默认值，由 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来")],1),n("vxe-grid",{attrs:{border:"",resizable:"",height:"530","proxy-config":e.tableProxy,columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[],r=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),o=n.n(r),l=n("1487"),d=n.n(l),s={data:function(){return{tableProxy:{ajax:{query:function(){return o.a.getJSON("/api/user/list")}}},tableColumn:[{type:"selection",width:50},{type:"index",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.getJSON('/api/user/list')\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', 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){d.a.highlightBlock(e)})}},c=s,u=n("2877"),p=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=p.exports},f11d:function(e,t,n){"use strict";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(e){return i.focus(),i.select(),i.setSelectionRange(0,i.value.length),a.execCommand("copy",!!e)}function l(e){var t=!1;try{r(e),t=o(),t||(t=o(1))}catch(n){}return t}l.copy=l,t["a"]=l}}]);
Reference in New Issue View Git Blame Copy Permalink