mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
1 line
66 KiB
JavaScript
1 line
66 KiB
JavaScript
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["grid"],{"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",[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")])],1),n("p",[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"}})],1),n("p",[n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板")],1),n("p",[n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"Advanced"}}},[e._v("渲染器")]),e._v("，可以更好的复用）")],1),n("p",[n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"Advanced"}}},[e._v("渲染器")]),e._v("，可以更好的复用）")],1),n("vxe-grid",{attrs:{border:"",height:"400",columns:e.tableColumn,data:e.tableData,"edit-config":{key:"id",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:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("7f7f"),n("1487")),l=n.n(o),i={data:function(){var e=this,t=this.$createElement;return{tableColumn:[{type:"index",width:50},{prop:"name",label:"Name",slots:{default:function(n){var a=n.row,r=n.column;return[t("span",[t("span",{style:"color: red;"},[a.name]),t("button",{on:{click:function(){return e.clickEvent(a,r)}}},["按钮"])])]}}},{prop:"sex",label:"Sex",showHeaderOverflow:!0,filters:[{data:""}],filterMethod:this.filterSexMethod,editRender:{type:"default"},slots:{header:function(n){var a=n.column;return[t("span",[t("i",["@"]),t("span",{style:"color: red;",on:{click:e.headerClickEvent}},[a.label])])]},filter:function(n){var a=n.column,r=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,r)}}})})},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}}})]}}},{prop:"address",label:"Address",showOverflow:!0,slots:{default:function(t){var n=t.row,a=e.$createElement;return[a("span",{style:{color:"blue"},on:{click:function(t){e.addressClickEvent(n)}}},n.address)]}}}],tableData:[],demoCodes:['\n <vxe-grid\n border\n height="400"\n :columns="tableColumn"\n :data.sync="tableData"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'cell\'}">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'index', width: 50 },\n {\n prop: 'name',\n label: 'Name',\n slots: {\n default: ({ row }) => {\n return [\n <span>\n <span style=\"color: red;\">{ row.name }</span>\n <button onClick={ () => this.clickEvent(row, column) }>按钮</button>\n </span>\n ]\n }\n }\n },\n {\n prop: 'sex',\n label: 'Sex',\n showHeaderOverflow: true,\n filters: [{ data: '' }],\n filterMethod: this.filterSexMethod,\n editRender: { type: 'default' },\n slots: {\n header: ({ column }) => {\n return [\n <span>\n <i>@</i>\n <span style=\"color: red;\" onClick={ this.headerClickEvent }>{ column.label }</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 prop: 'address',\n label: 'Address',\n showOverflow: true,\n slots: {\n default: ({ row }) => {\n let h = this.$createElement\n return [\n h('span', {\n style: {\n color: 'blue'\n },\n on: {\n click (evnt) {\n this.addressClickEvent(row)\n }\n }\n }, row.address)\n ]\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.label}点击事件`)\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){l.a.highlightBlock(e)})},methods:{clickEvent:function(e,t){this.$XMsg.alert("".concat(t.label,"点击事件"))},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=i,s=n("2877"),c=Object(s["a"])(d,a,r,!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",[e._v("使用 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 配置的方式渲染表格，这对一些动态渲染的场景非常有用，完全使用数据进行配置")],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",[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)},r=[],o=(n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("c695")),l=n.n(o),i=n("1487"),d=n.n(i),s={data:function(){return{tableColumn:[{type:"index",width:50},{prop:"name",label:"Name"},{prop:"sex",label:"Sex",showHeaderOverflow:!0},{prop:"address",label:"Address",showOverflow:!0}],tableColumn2:[{type:"index",width:50},{label:"基本信息",children:[{prop:"name",label:"Name"},{label:"其他信息",children:[{prop:"rate",label:"Rate"},{prop:"age",label:"Age"}]},{prop:"sex",label:"Sex"}]},{prop:"address",label:"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 { prop: 'name', label: 'Name' },\n { prop: 'sex', label: 'Sex', showHeaderOverflow: true },\n { prop: 'address', label: '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 label: '基本信息',\n children: [\n { prop: 'name', label: 'Name' },\n {\n label: '其他信息',\n children: [\n { prop: 'rate', label: 'Rate' },\n { prop: 'age', label: 'Age' }\n ]\n },\n { prop: 'sex', label: 'Sex' }\n ]\n },\n { prop: 'address', label: '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 '-'\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)?l.a.sum(n,e.property):"-"})]}}},c=s,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.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",[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(" 修改")],1),n("p",[e._v("由 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格")],1),n("vxe-grid",{attrs:{border:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,"select-config":{key:"id",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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),s={data:function(){return{tablePage:{pageSize:15},tableProxy:{index:!0,ajax:{query:function(e){var t=e.page;return l.a.getJSON("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))}}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{prop:"name",label:"Name"},{prop:"nickname",label:"Nickname"},{prop:"role",label:"Role"},{prop:"describe",label:"Describe",showOverflow:!0}],demoCodes:['\n <vxe-grid\n border\n height="530"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n tablePage: {\n pageSize: 10\n },\n tableProxy: {\n index: true, // 启用动态序号代理\n ajax: {\n // 任何支持 Promise API 的库都可以对接\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 { prop: 'name', label: 'Name' },\n { prop: 'nickname', label: 'Nickname' },\n { prop: 'role', label: 'Role' },\n { prop: 'describe', label: '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,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.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",[e._v("树表格、数据代理")]),n("vxe-grid",{attrs:{border:"","proxy-config":e.tableProxy,columns:e.tableColumn,"tree-config":{key:"id",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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("c695")),l=n.n(o),i=n("628a"),d=n.n(i),s=n("1487"),c=n.n(s),p={data:function(){return{tableProxy:{ajax:{query:function(){return d.a.getJSON("/api/file/list").then(function(e){return l.a.toArrayTree(e,{key:"id",parentKey:"parentId",children:"children"})})}}},tableColumn:[{prop:"id",label:"ID",width:120,treeNode:!0},{prop:"name",label:"名称"},{prop:"size",label:"大小"},{prop:"createTime",label:"创建时间",formatter:this.formatterDate},{prop:"updateTime",label:"修改时间",formatter:this.formatterDate}],demoCodes:['\n <vxe-grid\n border\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :tree-config="{key: \'id\', 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 { prop: 'id', label: 'ID', width: 0 },\n { prop: 'name', label: '名称' },\n { prop: 'size', label: '大小' },\n { prop: 'createTime', label: '创建时间' },\n { prop: 'updateTime', label: '修改时间' }\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 l.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},u=p,m=n("2877"),b=Object(m["a"])(u,a,r,!1,null,null,null);t["default"]=b.exports},"3b2b":function(e,t,n){var a=n("7726"),r=n("5dbc"),o=n("86cc").f,l=n("9093").f,i=n("aae3"),d=n("0bfb"),s=a.RegExp,c=s,p=s.prototype,u=/a/g,m=/a/g,b=new s(u)!==u;if(n("9e1e")&&(!b||n("79e5")(function(){return m[n("2b4c")("match")]=!1,s(u)!=u||s(m)==m||"/a/i"!=s(u,"i")}))){s=function(e,t){var n=this instanceof s,a=i(e),o=void 0===t;return!n&&a&&e.constructor===s&&o?e:r(b?new c(a&&!o?e.source:e,t):c((a=e instanceof s)?e.source:e,a&&o?d.call(e):t),n?this:p,s)};for(var h=function(e){e in s||o(s,e,{configurable:!0,get:function(){return c[e]},set:function(t){c[e]=t}})},g=l(c),v=0;g.length>v;)h(g[v++]);p.constructor=s,s.prototype=p,n("2aba")(a,"RegExp",s)}n("7a56")("RegExp")},"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",[e._v("通过配置 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 参数开启分页功能")],1),n("p",[e._v("对于分页场景下，如果要实现分页动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"start-index"}}),e._v(" 属性设置起始值")],1),n("vxe-grid",{attrs:{border:"",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},"current-page-change":e.handleCurrentChange,"page-size-change":e.handleSizeChange}}),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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),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},{prop:"name",label:"Name"},{prop:"nickname",label:"Nickname"},{prop:"role",label:"Role"},{prop:"describe",label:"Describe",showOverflow:!0}],tableData:[],demoCodes:['\n <vxe-grid\n border\n height="530"\n :loading="loading"\n :pager-config="tablePage"\n :columns="tableColumn"\n :data.sync="tableData"\n @current-page-change="handleCurrentChange"\n @page-size-change="handleSizeChange"></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 { prop: 'name', label: 'Name' },\n { prop: 'nickname', label: 'Nickname' },\n { prop: 'role', label: 'Role' },\n { prop: 'describe', label: '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 handleSizeChange (pageSize) {\n this.tablePage.pageSize = pageSize\n this.searchEvent()\n },\n handleCurrentChange (currentPage) {\n this.tablePage.currentPage = currentPage\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,l.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then(function(t){var n=t.data,a=n.page,r=n.result;e.tableData=r,e.tablePage.total=a.total,e.loading=!1}).catch(function(t){e.loading=!1})},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e){this.tablePage.pageSize=e,this.searchEvent()},handleCurrentChange:function(e){this.tablePage.currentPage=e,this.findList()}}},c=s,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.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",[e._v("工具栏：通过 "),n("grid-api-link",{attrs:{prop:"toolbar"}}),e._v(" 属性配置")],1),n("p",[e._v("可以通过 "),n("toolbar-api-link",{attrs:{prop:"storage"}}),e._v(" 开启将列个性化的设置状态保存到本地")],1),n("vxe-grid",{attrs:{border:"",height:"530","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.toolbar,"edit-config":{key:"id",trigger:"click",mode:"row"}},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)},r=[],o=(n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),s={data:function(){return{tablePage:{pageSize:15},tableProxy:{props:{data:"data.result",total:"data.page.total"},ajax:{query:function(e){var t=e.page;return l.a.doGet("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage))},delete:function(e){var t=e.body;return l.a.doPost("/api/user/save",t)},save:function(e){var t=e.body;return l.a.doPost("/api/user/save",t)}}},toolbar:{id:"toolbar_demo_1",buttons:[{code:"reload",name:"刷新"},{code:"insert_actived",name:"新增并激活"},{code:"mark_cancel",name:"标记/取消"},{code:"delete_selection",name:"删除选中"},{code:"remove_selection",name:"移除"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"},{code:"myBtn",name:"自定义按钮"}],setting:{storage:!0}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{prop:"name",label:"Name",editRender:{name:"input"}},{prop:"nickname",label:"Nickname",editRender:{name:"input"}},{prop:"role",label:"Role",editRender:{name:"input"}},{prop:"describe",label:"Describe",showOverflow:!0,editRender:{name:"input"}}],demoCodes:['\n <vxe-grid\n border\n height="530"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="toolbar"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'row\'}"\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 data: '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 buttons: [\n { code: 'reload', name: '刷新' },\n { code: 'insert', name: '新增' },\n { code: 'insert_actived', name: '新增并激活' },\n { code: 'mark_cancel', name: '标记/取消' },\n { code: 'delete_selection', name: '删除选中' },\n { code: 'remove_selection', name: '移除' },\n { code: 'save', name: '保存' },\n { code: 'export', name: '导出.csv' },\n { code: 'myBtn', name: '自定义按钮' }\n ],\n setting: true\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', width: 60 },\n { prop: 'name', label: 'Name', editRender: { name: 'input' } },\n { prop: 'nickname', label: 'Nickname', editRender: { name: 'input' } },\n { prop: 'role', label: 'Role', editRender: { name: 'input' } },\n { prop: 'describe', label: '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,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.exports},"600c":function(e,t,n){},"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",[e._v("反转表格，只需要将 columns 和 data 数据进行反转")]),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",[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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),l=n.n(o),i={data:function(){return{tableColumn:[{prop:"name",label:"Name"},{prop:"role",label:"Role"},{prop:"sex",label:"Sex"},{prop:"age",label:"Age"},{prop:"date3",label:"Date"}],tableColumn2:[{prop:"name",label:"Name"},{prop:"role",label:"Role"},{prop:"sex",label:"Sex"},{prop:"age",label:"Age"},{prop:"date2",label:"Datetime"},{prop:"rate",label:"Rate"},{prop:"address2",label:"Address"},{prop:"date3",label:"Date"},{prop:"updateTime",label:"UpdateTime"},{prop:"createTime",label:"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 { prop: 'name', label: 'Name' },\n { prop: 'role', label: 'Role' },\n { prop: 'sex', label: 'Sex' },\n { prop: 'age', label: 'Age' },\n { prop: 'address2', label: 'Address' },\n { prop: 'date3', label: 'Date' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n },\n methods: {\n // 反转函数\n reverseTable () {\n let tableData = this.tableData\n this.tableData = this.tableColumn.map(column => {\n let item = { 0: column.label }\n tableData.forEach((row, rowIndex) => {\n item[rowIndex + 1] = row[column.prop]\n })\n return item\n })\n this.tableColumn = [{\n prop: '0',\n fixed: 'left',\n width: 80\n }].concat(tableData.map((item, index) => {\n return {\n prop: `${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 { prop: 'name', label: 'Name' },\n { prop: 'role', label: 'Role' },\n { prop: 'sex', label: 'Sex' },\n { prop: 'age', label: 'Age' },\n { prop: 'date2', label: 'Datetime' },\n { prop: 'rate', label: 'Rate' },\n { prop: 'address2', label: 'Address' },\n { prop: 'date3', label: 'Date' },\n { prop: 'updateTime', label: 'UpdateTime' },\n { prop: 'createTime', label: 'CreateTime' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 200)\n },\n methods: {\n // 反转函数\n reverseTable () {\n let tableData = this.tableData\n this.tableData = this.tableColumn.map(column => {\n let item = { 0: column.label }\n tableData.forEach((row, rowIndex) => {\n item[rowIndex + 1] = row[column.prop]\n })\n return item\n })\n this.tableColumn = [{\n prop: '0',\n fixed: 'left',\n width: 80\n }].concat(tableData.map((item, index) => {\n return {\n prop: `${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){l.a.highlightBlock(e)})},methods:{reverseTable:function(){var e=this.tableData;this.tableData=this.tableColumn.map(function(t){var n={0:t.label};return e.forEach(function(e,a){n[a+1]=e[t.prop]}),n}),this.tableColumn=[{prop:"0",fixed:"left",width:80}].concat(e.map(function(e,t){return{prop:"".concat(t+1),minWidth:120}}))},reverseTable2:function(){var e=this.tableData2;this.tableData2=this.tableColumn2.map(function(t){var n={0:t.label};return e.forEach(function(e,a){n[a+1]=e[t.prop]}),n}),this.tableColumn2=[{prop:"0",fixed:"left",width:80}].concat(e.map(function(e,t){return{prop:"".concat(t+1),minWidth:120}}))}}},d=i,s=(n("a83a"),n("2877")),c=Object(s["a"])(d,a,r,!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",[e._v("可编辑表格")]),n("vxe-grid",{attrs:{border:"",height:"530",loading:e.loading,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData,"edit-config":{key:"id",trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t},"current-page-change":e.handleCurrentChange,"page-size-change":e.handleSizeChange}}),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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),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},{prop:"name",label:"Name",editRender:{name:"input"}},{prop:"nickname",label:"Nickname",editRender:{name:"input"}},{prop:"role",label:"Role",editRender:{name:"input"}},{prop:"describe",label:"Describe",showOverflow:!0,editRender:{name:"input"}}],tableData:[],demoCodes:['\n <vxe-grid\n border\n height="530"\n :loading="loading"\n :pager-config="tablePage"\n :columns="tableColumn"\n :data.sync="tableData"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'row\'}"\n @current-page-change="handleCurrentChange"\n @page-size-change="handleSizeChange"></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 { prop: 'name', label: 'Name', editRender: { name: 'input' } },\n { prop: 'nickname', label: 'Nickname', editRender: { name: 'input' } },\n { prop: 'role', label: 'Role', editRender: { name: 'input' } },\n { prop: 'describe', label: '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 handleSizeChange (pageSize) {\n this.tablePage.pageSize = pageSize\n this.searchEvent()\n },\n handleCurrentChange (currentPage) {\n this.tablePage.currentPage = currentPage\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,l.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then(function(t){var n=t.data,a=n.page,r=n.result;e.tableData=r,e.tablePage.total=a.total,e.loading=!1}).catch(function(t){e.loading=!1})},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e){this.tablePage.pageSize=e,this.searchEvent()},handleCurrentChange:function(e){this.tablePage.currentPage=e,this.findList()}}},c=s,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.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",[e._v("查询代理、服务端排序代理、服务端筛选代理、分页代理、增删改查")]),n("p",[e._v("对于分页场景下，如果想要保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性")],1),n("p",[e._v("由 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来")],1),n("vxe-grid",{attrs:{border:"",resizable:"","highlight-hover-row":"","remote-filter":"",height:"530","pager-config":{pageSize:15},toolbar:e.toolbar,"proxy-config":e.tableProxy,columns:e.tableColumn,"select-config":{reserve:!0},"edit-rules":e.validRules,"edit-config":{key:"id",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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("55dd"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),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,r={sort:n.prop,order:n.order};return a.forEach(function(e){e.column;var t=e.prop,n=e.values;r[t]=n.join(",")}),l.a.getJSON("/api/user/page/list/".concat(t.pageSize,"/").concat(t.currentPage),r)},save:function(e){var t=e.body;return l.a.doPost("/api/user/save",t)}}},toolbar:{buttons:[{code:"reload",name:"刷新"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"remove_selection",name:"移除"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],setting:!0},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{prop:"name",label:"Name",remoteSort:!0,editRender:{name:"input"}},{prop:"nickname",label:"Nickname",editRender:{name:"input"}},{prop:"role",label:"Role",remoteSort:!0,width:200,filters:[{label:"前端",value:"前端"},{label:"后端",value:"后端"},{label:"测试",value:"测试"}],filterMultiple:!1,editRender:{name:"input"}},{prop:"describe",label:"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 :pager-config="{pageSize: 15}"\n :toolbar="toolbar"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'row\', showStatus: 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.prop,\n order: sort.order\n }\n // 处理筛选条件\n filters.forEach(({ column, prop, values }) => {\n formData[prop] = values.join(',')\n })\n return XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, formData)\n },\n save: ({ body }) => XEAjax.doPost('/api/user/save', body)\n }\n },\n toolbar: {\n buttons: [\n { code: 'reload', name: '刷新' },\n { code: 'insert_actived', name: '新增' },\n { code: 'mark_cancel', name: '标记/取消' },\n { code: 'remove_selection', name: '移除' },\n { code: 'save', name: '保存' },\n { code: 'export', name: '导出.csv' }\n ],\n setting: true\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', width: 60 },\n { prop: 'name', label: 'Name', remoteSort: true, editRender: { name: 'input' } },\n { prop: 'nickname', label: 'Nickname', editRender: { name: 'input' } },\n {\n prop: 'role',\n label: '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 { prop: 'describe', label: '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,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.exports},a83a:function(e,t,n){"use strict";var a=n("600c"),r=n.n(a);r.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",[e._v("树表格、增删改查、工具栏")]),n("p",[e._v("可以通过 "),n("toolbar-api-link",{attrs:{prop:"storage"}}),e._v(" 开启将列个性化的设置状态保存到本地")],1),n("vxe-grid",{attrs:{"highlight-hover-row":"","proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.toolbar,"select-config":{labelProp:"id"},"tree-config":{key:"id",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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("c695")),l=n.n(o),i=n("628a"),d=n.n(i),s=n("1487"),c=n.n(s),p={data:function(){return{tableProxy:{ajax:{query:function(){return d.a.getJSON("/api/file/list").then(function(e){return l.a.toArrayTree(e,{key:"id",parentKey:"parentId",children:"children"})})},save:function(e){var t=e.body;return d.a.doPost("/api/file/save",t)}}},toolbar:{id:"treeEdit_demo1",buttons:[{code:"reload",name:"刷新"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],setting:{storage:!0,immediate:!0}},tableColumn:[{type:"selection",label:"全选",width:180,treeNode:!0},{prop:"name",label:"名称",editRender:{name:"input"}},{prop:"size",label:"大小",editRender:{name:"input"}},{prop:"createTime",label:"创建时间",formatter:this.formatterDate},{prop:"updateTime",label:"修改时间",formatter:this.formatterDate}],demoCodes:['\n <vxe-grid\n highlight-hover-row\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="toolbar"\n :select-config="{labelProp: \'id\'}"\n :tree-config="{key: \'id\', 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 toolbar: {\n id: 'treeEdit_demo1',\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 setting: {\n storage: true,\n immediate: true\n }\n },\n tableColumn: [\n { type: 'selection', label: '全选', width: 180, treeNode: true },\n { prop: 'name', label: '名称', editRender: { name: 'input' } },\n { prop: 'size', label: '大小', editRender: { name: 'input' } },\n { prop: 'createTime', label: '创建时间', formatter: this.formatterDate },\n { prop: 'updateTime', label: '修改时间', 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 l.a.toDateString(t,"yyyy-MM-dd HH:mm:ss")}}},u=p,m=n("2877"),b=Object(m["a"])(u,a,r,!1,null,null,null);t["default"]=b.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",[e._v("实现可配置动态列、数据代理、工具栏、增删改查")]),n("vxe-grid",{attrs:{border:"",height:"306","pager-config":e.tablePage,"proxy-config":e.tableProxy,columns:e.tableColumn,toolbar:e.toolbar,"edit-config":{key:"id",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",[e._v("级联动态列渲染，可以非常简单的实现功能复杂的可配置动态列")]),n("vxe-grid",{attrs:{border:"",height:"290",loading:e.loading2,"pager-config":e.tablePage2,"proxy-config":e.tableProxy2,columns:e.tableColumn2,toolbar:e.toolbar2,"edit-rules":e.validRules2,"edit-config":{key:"id",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)},r=[],o=(n("3b2b"),n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("c695")),l=n.n(o),i=n("628a"),d=n.n(i),s=n("1487"),c=n.n(s),p={data:function(){return{tablePage:{pageSize:5,pageSizes:[5,10,15,20,50]},tableProxy:{props:{data:"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)}}},toolbar:{buttons:[{code:"reload",name:"刷新"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],setting:!0},tableColumn:[{type:"selection",width:50},{prop:"seq",label:"排序",width:80,editRender:{name:"input"}},{prop:"key",label:"列键值",width:100,editRender:{name:"input"}},{prop:"name",label:"列名称",width:100,editRender:{name:"input"}},{prop:"type",label:"列类型",width:100,editRender:{name:"input"}},{prop:"width",label:"列宽度",width:100,editRender:{name:"input"}},{prop:"isEdit",label:"是否编辑",width:100,editRender:{name:"input"}},{prop:"required",label:"是否必填",width:140,editRender:{name:"input"}},{prop:"validator",label:"校验规则",width:140,editRender:{name:"input"}},{prop:"validMsg",label:"校验提示消息",width:150,editRender:{name:"input"}},{prop:"describe",label:"描述",width:200,showOverflow:!0,editRender:{name:"input"}},{prop:"createTime",label:"创建时间",width:100,showOverflow:!0,formatter:this.formatterDate,editRender:{name:"input"}},{prop:"updateTime",label:"更新时间",width:200,showOverflow:!0,formatter:this.formatterDate,editRender:{name:"input"}}],loading2:!1,tablePage2:{pageSize:10},tableProxy2:{props:{data:"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)}}},toolbar2:{buttons:[{code:"reloadColumn",name:"刷新列配置"},{code:"reload",name:"刷新数据"},{code:"insert_actived",name:"新增"},{code:"mark_cancel",name:"标记/取消"},{code:"save",name:"保存"},{code:"export",name:"导出.csv"}],setting:!0},validRules2:null,tableColumn2:[],demoCodes:['\n <vxe-grid\n border\n height="306"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="toolbar"\n :edit-config="{key: \'id\', 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 data: '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 toolbar: {\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 setting: true\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { prop: 'seq', label: '排序', width: 80, editRender: { name: 'input' } },\n { prop: 'key', label: '列键值', width: 100, editRender: { name: 'input' } },\n { prop: 'name', label: '列名称', width: 100, editRender: { name: 'input' } },\n { prop: 'type', label: '列类型', width: 100, editRender: { name: 'input' } },\n { prop: 'width', label: '列宽度', width: 100, editRender: { name: 'input' } },\n { prop: 'isEdit', label: '是否编辑', width: 100, editRender: { name: 'input' } },\n { prop: 'required', label: '是否必填', width: 140, editRender: { name: 'input' } },\n { prop: 'validator', label: '校验规则', width: 140, editRender: { name: 'input' } },\n { prop: 'validMsg', label: '校验提示消息', width: 150, editRender: { name: 'input' } },\n { prop: 'describe', label: '描述', width: 200, showOverflow: true, editRender: { name: 'input' } },\n { prop: 'createTime', label: '创建时间', width: 200, showOverflow: true, formatter: this.formatterDate, editRender: { name: 'input' } },\n { prop: 'updateTime', label: '更新时间', 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 height="530"\n :loading="loading"\n :pager-config="tablePage"\n :proxy-config="tableProxy"\n :columns="tableColumn"\n :toolbar="toolbar"\n :edit-config="{key: \'id\', 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 data: '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 toolbar: {\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 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.tableColumn = data.map(item => {\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 // 动态生成列\n if (item.type) {\n return {\n label: item.name,\n width: item.width,\n type: item.type\n }\n }\n return {\n prop: item.key,\n label: item.name,\n width: item.width,\n editRender: { name: 'input' }\n }\n })\n this.validRules = validRules\n this.loading = false\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;this.loading2=!0,d.a.getJSON("/api/column/list",{sort:"seq",order:"asc"}).then(function(t){var n={};e.tableColumn2=t.map(function(e){return e.required&&(n[e.key]=[{required:!0,message:"请填写".concat(e.name)}]),e.validator&&(n[e.key]?n[e.key].push({pattern:new RegExp(e.validator),message:e.validMsg||"".concat(e.name,"校验不通过，请重新填写")}):n[e.key]=[{pattern:new RegExp(e.validator),message:e.validMsg||"".concat(e.name,"校验不通过，请重新填写")}]),e.type?{label:e.name,width:e.width,type:e.type}:{prop:e.key,label:e.name,width:e.width,editRender:{name:"input"}}}),e.validRules2=n,e.loading2=!1})},formatterDate:function(e){var t=e.cellValue;return l.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}}}},u=p,m=n("2877"),b=Object(m["a"])(u,a,r,!1,null,null,null);t["default"]=b.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",[e._v("数据代理、固定列、服务端排序、服务端筛选、服务端分页")]),n("p",[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:"","remote-filter":"",height:"548","pager-config":{pageSize:15},columns:e.tableColumn,"proxy-config":e.tableProxy,"select-config":{key:"id",reserve:!0}},on:{"sort-change":e.sortChangeEvent,"filter-change":e.filterChangeEvent}}),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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),s={data:function(){var e=this;return{formData:{sort:"",order:""},tableProxy:{index:!0,ajax:{query:function(t){var n=t.page;return l.a.getJSON("/api/user/page/list/".concat(n.pageSize,"/").concat(n.currentPage),e.formData)}}},tableColumn:[{type:"selection",width:50,fixed:"left"},{type:"index",width:60,fixed:"left"},{prop:"id",label:"ID",width:100,remoteSort:!0},{prop:"name",label:"Name",width:300,remoteSort:!0},{prop:"nickname",label:"Nickname",remoteSort:!0,width:300},{prop:"age",label:"Age",remoteSort:!0,width:100},{prop:"role",label:"Role",remoteSort:!0,width:200,filters:[{label:"前端",value:"前端"},{label:"后端",value:"后端"},{label:"测试",value:"测试"}],filterMultiple:!1},{prop:"describe",label:"Describe",width:300,showOverflow:!0}],demoCodes:['\n <vxe-grid\n ref="xGrid"\n border\n remote-filter\n height="548"\n :pager-config="{pageSize: 15}"\n :columns="tableColumn"\n :proxy-config="tableProxy"\n @sort-change="sortChangeEvent"\n @filter-change="filterChangeEvent"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n formData: {\n sort: '',\n order: ''\n },\n tableProxy: {\n index: true, // 启用动态序号代理\n ajax: {\n query: ({ page }) => XEAjax.getJSON(`/api/user/page/list/${page.pageSize}/${page.currentPage}`, this.formData)\n }\n },\n tableColumn: [\n { type: 'selection', width: 50, fixed: 'left' },\n { type: 'index', width: 60, fixed: 'left' },\n { prop: 'id', label: 'ID', width: 100, remoteSort: true },\n { prop: 'name', label: 'Name', width: 300, remoteSort: true },\n { prop: 'nickname', label: 'Nickname', remoteSort: true, width: 300 },\n { prop: 'age', label: 'Age', remoteSort: true, width: 100 },\n {\n prop: 'role',\n label: 'Role',\n remoteSort: true,\n width: 200,\n filters: [\n { label: '前端', value: '前端' },\n { label: '后端', value: '后端' },\n { label: '测试', value: '测试' }\n ],\n filterMultiple: false\n },\n { prop: 'describe', label: 'Describe', width: 300, showOverflow: true }\n ]\n }\n },\n methods: {\n sortChangeEvent ({ column, prop, order }) {\n this.formData.sort = prop\n this.formData.order = order\n // 重新查询\n this.$refs.xGrid.commitProxy('query')\n },\n filterChangeEvent ({ filters }) {\n filters.forEach(({ column, prop, values }) => {\n this.formData[prop] = values.join(',')\n })\n // 重新加载，恢复初始状态\n this.$refs.xGrid.commitProxy('reload')\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){d.a.highlightBlock(e)})},methods:{sortChangeEvent:function(e){e.column;var t=e.prop,n=e.order;this.formData.sort=t,this.formData.order=n,this.$refs.xGrid.commitProxy("query")},filterChangeEvent:function(e){var t=this,n=e.filters;n.forEach(function(e){e.column;var n=e.prop,a=e.values;t.formData[n]=a.join(",")}),this.$refs.xGrid.commitProxy("reload")}}},c=s,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.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",[e._v("数据代理：通过配置 "),n("grid-api-link",{attrs:{prop:"proxy-config"}}),e._v(" 参数，默认直接读取结果，响应结果应该为数组；可以通过 "),n("grid-api-link",{attrs:{prop:"props"}}),e._v(" 修改默认值")],1),n("p",[e._v("由 "),n("grid-api-link",{attrs:{prop:"pager-config"}}),e._v(" 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来")],1),n("vxe-grid",{attrs:{border:"",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)},r=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),l=n.n(o),i=n("1487"),d=n.n(i),s={data:function(){return{tableProxy:{ajax:{query:function(){return l.a.getJSON("/api/user/list")}}},tableColumn:[{type:"selection",width:50},{type:"index",width:60},{prop:"name",label:"Name"},{prop:"nickname",label:"Nickname"},{prop:"role",label:"Role"},{prop:"describe",label:"Describe",showOverflow:!0}],demoCodes:['\n <vxe-grid\n border\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 的库都可以对接\n query: () => XEAjax.getJSON('/api/user/list')\n }\n },\n tableColumn: [\n { type: 'selection', width: 50 },\n { type: 'index', width: 60 },\n { prop: 'name', label: 'Name' },\n { prop: 'nickname', label: 'Nickname' },\n { prop: 'role', label: 'Role' },\n { prop: 'describe', label: '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,p=n("2877"),u=Object(p["a"])(c,a,r,!1,null,null,null);t["default"]=u.exports}}]); |