text: (window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["advanced"],{"0168":function(e,t,n){"use strict";var a=n("b9c70"),l=n.n(a);l.a},"0679":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:"show-footer"}}),e._v(" show-footer 和 "),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 设置表尾数据，结果返回一个二维数组"),n("br"),e._v(" 需要注意的是表尾的调用并非实时的，而是在 data 初始化时才会触发执行；如果要达到实时调用请手动调用 "),n("table-api-link",{attrs:{prop:"updateFooter"}}),e._v(" 方法"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 表尾的数据都是自行生成的，该示例仅供参考）")],1)],1),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","highlight-hover-row":"","show-footer":"","max-height":"400","footer-method":e.footerMethod,data:e.tableData1}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("还可以配合 "),n("table-api-link",{attrs:{prop:"footer-cell-class-name"}}),e._v(" 自定义不同列颜色")],1),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","show-footer":"",height:"400","footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v("还可以固定列")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){e.showHeader=!e.showHeader}}},[e._v("显示/隐藏表头")]),n("vxe-button",{on:{click:function(t){e.showFooter=!e.showFooter}}},[e._v("显示/隐藏表尾")])]},proxy:!0}])}),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"",height:"400","show-overflow":"","show-header":e.showHeader,"show-footer":e.showFooter,"footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{title:"基本信息"}},[n("vxe-table-column",{attrs:{field:"name",title:"Name","min-width":"600",sortable:""}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","min-width":"600"}})],1),n("vxe-table-column",{attrs:{field:"date",title:"Date","min-width":"600"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200",fixed:"right"}})],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{showHeader:!0,showFooter:!0,tableData1:[],tableData:[],demoCodes:['\n        <vxe-table\n          class="mytable-footer"\n          border\n          highlight-hover-row\n          show-footer\n          max-height="400"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const means = []\n              const sums = []\n              const others = []\n              columns.forEach((column, columnIndex) => {\n                if (columnIndex === 0) {\n                  means.push('平均')\n                  sums.push('和值')\n                  others.push('其他')\n                } else {\n                  let meanCell = null\n                  let sumCell = null\n                  let otherCell = '-'\n                  switch (column.property) {\n                    case 'age':\n                    case 'rate':\n                      meanCell = parseInt(XEUtils.mean(data, column.property))\n                      sumCell = XEUtils.sum(data, column.property)\n                      break\n                    case 'sex':\n                      otherCell = '无'\n                      break\n                  }\n                  means.push(meanCell)\n                  sums.push(sumCell)\n                  others.push(otherCell)\n                }\n              })\n              // 返回一个二维数组的表尾合计\n              return [ means, sums, others ]\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          class="mytable-footer"\n          border\n          show-footer\n          height="400"\n          :footer-method="footerMethod"\n          :footer-cell-class-name="footerCellClassName"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            footerCellClassName ({ $rowIndex, column, columnIndex }) {\n              if (columnIndex === 0) {\n                if ($rowIndex === 0) {\n                  return 'col-blue'\n                } else {\n                  return 'col-red'\n                }\n              }\n            },\n            footerMethod ({ columns, data }) {\n              const means = []\n              const sums = []\n              const others = []\n              columns.forEach((column, columnIndex) => {\n                if (columnIndex === 0) {\n                  means.push('平均')\n                  sums.push('和值')\n                  others.push('其他')\n                } else {\n                  let meanCell = null\n                  let sumCell = null\n                  let otherCell = '-'\n                  switch (column.property) {\n                    case 'age':\n                    case 'rate':\n                      meanCell = parseInt(XEUtils.mean(data, column.property))\n                      sumCell = XEUtils.sum(data, column.property)\n                      break\n                    case 'sex':\n                      otherCell = '无'\n                      break\n                  }\n                  means.push(meanCell)\n                  sums.push(sumCell)\n                  others.push(otherCell)\n                }\n              })\n              // 返回一个二维数组的表尾合计\n              return [ means, sums, others ]\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="showHeader = !showHeader">显示/隐藏表头</vxe-button>\n            <vxe-button @click="showFooter = !showFooter">显示/隐藏表尾</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          class="mytable-footer"\n          border\n          height="400"\n          show-overflow\n          :show-header="showHeader"\n          :show-footer="showFooter"\n          :footer-method="footerMethod"\n          :footer-cell-class-name="footerCellClassName"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column title="基本信息">\n            <vxe-table-column field="name" title="Name" min-width="600" sortable></vxe-table-column>\n            <vxe-table-column field="age" title="Age" min-width="600"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column field="date" title="Date" min-width="600"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate" width="200" fixed="right"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              showFooter: true,\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            footerCellClassName ({ $rowIndex, columnIndex }) {\n              if (columnIndex === 0) {\n                if ($rowIndex === 0) {\n                  return 'col-blue'\n                } else {\n                  return 'col-red'\n                }\n              }\n            },\n            footerMethod ({ columns, data }) {\n              const means = []\n              const sums = []\n              const others = []\n              columns.forEach((column, columnIndex) => {\n                if (columnIndex === 0) {\n                  means.push('平均')\n                  sums.push('和值')\n                  others.push('其他')\n                } else {\n                  let meanCell = null\n                  let sumCell = null\n                  let otherCell = '-'\n                  switch (column.property) {\n                    case 'age':\n                    case 'rate':\n                      meanCell = parseInt(XEUtils.mean(data, column.property))\n                      sumCell = XEUtils.sum(data, column.property)\n                      break\n                    case 'sex':\n                      otherCell = '无'\n                      break\n                  }\n                  means.push(meanCell)\n                  sums.push(sumCell)\n                  others.push(otherCell)\n                }\n              })\n              // 返回一个二维数组的表尾合计\n              return [means, sums, others]\n            }\n          }\n        }\n        "]}},created:function(){this.tableData1=window.MOCK_DATA_LIST.slice(0,3),this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{footerCellClassName:function(e){var t=e.$rowIndex,n=e.columnIndex;if(0===n)return 0===t?"col-blue":"col-red"},footerMethod:function(e){var t=e.columns,n=e.data,a=[],l=[],o=[];return t.forEach((function(e,t){if(0===t)a.push("平均"),l.push("和值"),o.push("其他");else{var r=null,s=null,c="-";switch(e.property){case"age":case"rate":r=parseInt(i.a.mean(n,e.property)),s=i.a.sum(n,e.property);break;case"sex":c="无";break}a.push(r),l.push(s),o.push(c)}})),[a,l,o]}}},d=c,u=(n("6c0e"),n("2877")),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"0d13":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(" keep-alive 切换"),n("span",{staticClass:"red"},[e._v("（如果需要将表格放到隐藏的元素中，那么就必然会导致宽度无法计算）")]),e._v("，有以下方法解决"),n("br"),e._v(" 1.每次切换 Tab 页显示之后手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算表格"),n("br"),e._v(" 2.使用 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 绑定指定的变量来触发重新计算表格"),n("br"),e._v(" 3.使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 自动监听父容器来触发重新计算表格 ")],1),n("p",{staticClass:"btns"},[n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable1"}}},[e._v("表格1")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable2"}}},[e._v("表格2")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable3"}}},[e._v("表格3")])],1),n("keep-alive",[n("router-view")],1),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  ")])],1)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{demoCodes:['\n        <p class="btns">\n          <router-link class="link" :to="{name: \'TableKeepAliveTable1\'}">表格1</router-link>\n          <router-link class="link" :to="{name: \'TableKeepAliveTable2\'}">表格2</router-link>\n          <router-link class="link" :to="{name: \'TableKeepAliveTable3\'}">表格3</router-link>\n        </p>\n\n        <keep-alive>\n          <router-view></router-view>\n        </keep-alive>\n        ']}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=(n("70d1"),n("2877")),d=Object(c["a"])(s,a,l,!1,null,"5f1a128e",null);t["default"]=d.exports},"0edb":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var a=window.document,l=a.createElement("textarea");function o(e){var t=l.style;l.id="$XECopy",t.width="48px",t.height="24px",t.position="fixed",t.zIndex="0",t.left="-500px",t.top="-500px",l.value=null===e||void 0===e?"":""+e,l.parentNode||a.body.appendChild(l)}function i(){return l.focus(),l.select(),l.setSelectionRange(0,l.value.length),a.execCommand("copy")}function r(e){var t=!1;try{o(e),t=i()}catch(n){}return t}r.copy=r;var s=r;t["default"]=s},"0fef":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-table",{attrs:{border:"","show-overflow":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{border:"","icon-prev-page":"fa fa-angle-left","icon-jump-prev":"fa fa-angle-double-left","icon-jump-next":"fa fa-angle-double-right","icon-next-page":"fa fa-angle-right","icon-jump-more":"fa fa-ellipsis-h",loading:e.loading,"current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],tablePage:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          height="400"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          border\n          icon-prev-page="fa fa-angle-left"\n          icon-jump-prev="fa fa-angle-double-left"\n          icon-jump-next="fa fa-angle-double-right"\n          icon-next-page="fa fa-angle-right"\n          icon-jump-more="fa fa-ellipsis-h"\n          :loading="loading"\n          :current-page="tablePage.currentPage"\n          :page-size="tablePage.pageSize"\n          :total="tablePage.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tablePage: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData)then(({ page, result }) => {\n                this.tableData = result\n                this.tablePage.totalResult = page.totalResult\n                this.loading = false\n              }).catch(e => {\n                this.loading = false\n              })\n            },\n            handlePageChange ({ currentPage, pageSize }) {\n              this.tablePage.currentPage = currentPage\n              this.tablePage.pageSize = pageSize\n              this.findList()\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,i.a.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.totalResult=n.totalResult,e.loading=!1})).catch((function(){e.loading=!1}))},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"11ba":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("手风琴展开效果，通过配置 expand-config={"),n("table-api-link",{attrs:{prop:"accordion"}}),e._v("} 属性来开启同一级的节点，每次只能展开一个")],1),n("vxe-table",{attrs:{border:"","expand-config":{accordion:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"80"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.childData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],childData:[],demoCodes:['\n        <vxe-table\n          border\n          :expand-config="{accordion: true}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="80">\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 8)\n            this.childData = window.MOCK_DATA_LIST.slice(100, 102)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,8),this.childData=window.MOCK_DATA_LIST.slice(100,102)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"1e0d":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(" Tab 页签切换"),n("span",{staticClass:"red"},[e._v("（如果需要将表格放到隐藏的元素中，那么就必然会导致宽度无法计算）")]),e._v("，有以下方法解决"),n("br"),e._v(" 1.每次切换 Tab 页显示之后手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算表格"),n("br"),e._v(" 2.使用 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 绑定指定的变量来触发重新计算表格"),n("br"),e._v(" 3.使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 自动监听父容器来触发重新计算表格 ")],1),n("p",[n("vxe-radio",{attrs:{name:"xtabs",label:"tab1"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签1")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab2"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签2")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab3"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签3")])],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab1"===e.selectTab,expression:"selectTab === 'tab1'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab2"===e.selectTab,expression:"selectTab === 'tab2'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab3"===e.selectTab,expression:"selectTab === 'tab3'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1),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  ")])])},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{selectTab:"tab1",tableData:[],demoCodes:['\n        <p>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab1">页签1</vxe-radio>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab2">页签2</vxe-radio>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab3">页签3</vxe-radio>\n        </p>\n\n        <div v-show="selectTab === \'tab1\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab"\n            :data="tableData">\n            <vxe-table-column type="seq" width="60"></vxe-table-column>\n            <vxe-table-column field="name" title="Name"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n            <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n          </vxe-table>\n        </div>\n\n        <div v-show="selectTab === \'tab2\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab"\n            :data="tableData">\n            <vxe-table-column type="radio" width="60"></vxe-table-column>\n            <vxe-table-column field="role" title="Rolw"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column field="num" title="Num"></vxe-table-column>\n            <vxe-table-column field="date12" title="Date"></vxe-table-column>\n          </vxe-table>\n        </div>\n\n        <div v-show="selectTab === \'tab3\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab"\n            :data="tableData">\n            <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n            <vxe-table-column field="nickname" title="nickname"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column field="date12" title="Date"></vxe-table-column>\n            <vxe-table-column field="region" title="Region"></vxe-table-column>\n            <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n          </vxe-table>\n        </div>\n        ',"\n        export default {\n          data () {\n            return {\n              selectTab: 'tab1',\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"21f3":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("pager-api-link",{attrs:{name:"vxe-pager"}})],1),n("p",{staticClass:"tip"},[e._v("默认样式")]),n("vxe-table",{attrs:{"show-overflow":"",height:"200","row-id":"id",loading:e.loading1,data:e.tableData1}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{loading:e.loading1,"current-page":e.tablePage1.currentPage,"page-size":e.tablePage1.pageSize,total:e.tablePage1.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange1}}),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("设置分页 border 样式")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"200","row-id":"id",size:"medium",loading:e.loading2,data:e.tableData2}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{border:"",size:"medium",loading:e.loading2,"current-page":e.tablePage2.currentPage,"page-size":e.tablePage2.pageSize,total:e.tablePage2.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange2}}),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  ")]),n("p",{staticClass:"tip"},[e._v("设置分页 background 样式")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"200","row-id":"id",size:"small",loading:e.loading3,data:e.tableData3}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{background:"",size:"small",loading:e.loading3,"current-page":e.tablePage3.currentPage,"page-size":e.tablePage3.pageSize,total:e.tablePage3.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange3}}),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v(" 如果要支持动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"seq-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"startIndex"}}),e._v("} 属性设置起始值"),n("br"),e._v(" 如果要支持保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"checkbox-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性"),n("br"),e._v(" 启用 reserve 功能需要有 row-id 唯一主键，可以通过调用 "),n("table-api-link",{attrs:{prop:"getCheckboxReserveRecords"}}),e._v(" 方法获取获取已保留选中的行数据 ")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{attrs:{size:"mini"},on:{click:e.getSelectReserveEvent}},[e._v("获取已保留选中的行数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable4",attrs:{border:"","show-overflow":"",height:"200","row-id":"id",size:"mini",loading:e.loading4,"seq-config":{startIndex:(e.tablePage4.currentPage-1)*e.tablePage4.pageSize},"checkbox-config":{reserve:!0},data:e.tableData4}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{perfect:"",size:"mini",loading:e.loading4,"current-page":e.tablePage4.currentPage,"page-size":e.tablePage4.pageSize,total:e.tablePage4.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange4}}),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[6]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading1:!1,loading2:!1,loading3:!1,loading4:!1,tableData1:[],tableData2:[],tableData3:[],tableData4:[],tablePage1:{currentPage:1,pageSize:10,totalResult:0},tablePage2:{currentPage:1,pageSize:10,totalResult:0},tablePage3:{currentPage:1,pageSize:10,totalResult:0},tablePage4:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n        <vxe-table\n          show-overflow\n          height="200"\n          row-id="id"\n          :loading="loading1"\n          :data="tableData1">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          :loading="loading1"\n          :current-page="tablePage1.currentPage"\n          :page-size="tablePage1.pageSize"\n          :total="tablePage1.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange1">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              loading1: false,\n              tableData1: [],\n              tablePage1: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList1()\n          },\n          methods: {\n            findList1 () {\n              this.loading = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage1.pageSize}/${this.tablePage1.currentPage}`)then(({ page, result }) => {\n                this.tableData1 = result\n                this.tablePage1.totalResult = page.totalResult\n                this.loading1 = false\n              }).catch(e => {\n                this.loading1 = false\n              })\n            },\n            handlePageChange1 ({ currentPage, pageSize }) {\n              this.tablePage1.currentPage = currentPage\n              this.tablePage1.pageSize = pageSize\n              this.findList1()\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-overflow\n          height="200"\n          row-id="id"\n          size="medium"\n          :loading="loading2"\n          :data="tableData2">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          border\n          size="medium"\n          :loading="loading2"\n          :current-page="tablePage2.currentPage"\n          :page-size="tablePage2.pageSize"\n          :total="tablePage2.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange2">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              loading2: false,\n              tableData2: [],\n              tablePage2: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList2()\n          },\n          methods: {\n            findList2 () {\n              this.loading = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage2.pageSize}/${this.tablePage2.currentPage}`)then(({ page, result }) => {\n                this.tableData2 = result\n                this.tablePage2.totalResult = page.totalResult\n                this.loading2 = false\n              }).catch(e => {\n                this.loading2 = false\n              })\n            },\n            handlePageChange2 ({ currentPage, pageSize }) {\n              this.tablePage2.currentPage = currentPage\n              this.tablePage2.pageSize = pageSize\n              this.findList2()\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-overflow\n          height="200"\n          row-id="id"\n          size="small"\n          :loading="loading3"\n          :data="tableData3">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          background\n          size="small"\n          :loading="loading3"\n          :current-page="tablePage3.currentPage"\n          :page-size="tablePage3.pageSize"\n          :total="tablePage3.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange3">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              loading3: false,\n              tableData3: [],\n              tablePage3: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList3()\n          },\n          methods: {\n            findList3 () {\n              this.loading3 = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage3.pageSize}/${this.tablePage3.currentPage}`)then(({ page, result }) => {\n                this.tableData3 = result\n                this.tablePage3.totalResult = page.totalResult\n                this.loading3 = false\n              }).catch(e => {\n                this.loading3 = false\n              })\n            },\n            handlePageChange3 ({ currentPage, pageSize }) {\n              this.tablePage3.currentPage = currentPage\n              this.tablePage3.pageSize = pageSize\n              this.findList3()\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button size="mini" @click="getSelectReserveEvent">获取已保留选中的行数据</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          show-overflow\n          ref="xTable4"\n          height="200"\n          row-id="id"\n          size="mini"\n          :loading="loading4"\n          :seq-config="{startIndex: (tablePage4.currentPage - 1) * tablePage4.pageSize}"\n          :checkbox-config="{reserve: true}"\n          :data="tableData4">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          perfect\n          size="mini"\n          :loading="loading"\n          :current-page="tablePage4.currentPage"\n          :page-size="tablePage4.pageSize"\n          :total="tablePage4.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange4">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              loading4: false,\n              tableData4: [],\n              tablePage4: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList4()\n          },\n          methods: {\n            findList4 () {\n              this.loading = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage4.pageSize}/${this.tablePage4.currentPage}`)then(({ page, result }) => {\n                this.tableData4 = result\n                this.tablePage4.totalResult = page.totalResult\n                this.loading4 = false\n              }).catch(() => {\n                this.loading4 = false\n              })\n            },\n            handlePageChange4 ({ currentPage, pageSize }) {\n              this.tablePage4.currentPage = currentPage\n              this.tablePage4.pageSize = pageSize\n              this.findList4()\n            },\n            getSelectReserveEvent () {\n              const selectReserveRecords = this.$refs.xTable4.getCheckboxReserveRecords()\n              this.$XModal.alert(selectReserveRecords.length)\n            }\n          }\n        }\n        "]}},created:function(){this.findList1(),this.findList2(),this.findList3(),this.findList4()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList1:function(){var e=this;this.loading1=!0,i.a.get("/api/user/page/list/".concat(this.tablePage1.pageSize,"/").concat(this.tablePage1.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData1=a,e.tablePage1.totalResult=n.totalResult,e.loading1=!1})).catch((function(){e.loading1=!1}))},findList2:function(){var e=this;this.loading2=!0,i.a.get("/api/user/page/list/".concat(this.tablePage2.pageSize,"/").concat(this.tablePage2.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData2=a,e.tablePage2.totalResult=n.totalResult,e.loading2=!1})).catch((function(){e.loading2=!1}))},findList3:function(){var e=this;this.loading3=!0,i.a.get("/api/user/page/list/".concat(this.tablePage3.pageSize,"/").concat(this.tablePage3.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData3=a,e.tablePage3.totalResult=n.totalResult,e.loading3=!1})).catch((function(){e.loading3=!1}))},findList4:function(){var e=this;this.loading4=!0,i.a.get("/api/user/page/list/".concat(this.tablePage4.pageSize,"/").concat(this.tablePage4.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData4=a,e.tablePage4.totalResult=n.totalResult,e.loading4=!1})).catch((function(){e.loading4=!1}))},handlePageChange1:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage1.currentPage=t,this.tablePage1.pageSize=n,this.findList1()},handlePageChange2:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage2.currentPage=t,this.tablePage2.pageSize=n,this.findList2()},handlePageChange3:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage3.currentPage=t,this.tablePage3.pageSize=n,this.findList3()},handlePageChange4:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage4.currentPage=t,this.tablePage4.pageSize=n,this.findList4()},getSelectReserveEvent:function(){var e=this.$refs.xTable4.getCheckboxReserveRecords();this.$XModal.alert(e.length)}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"25ad":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("子路由 2")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1)},l=[],o=(n("fb6a"),{data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,30),e.loading=!1}),300)}}),i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"269e":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:"context-menu"}}),e._v("={header,body,footer}")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-footer":"","highlight-current-row":"","highlight-current-column":"","footer-method":e.footerMethod,data:e.tableData,"context-menu":e.tableMenu},on:{"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time"}})],1),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    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},l=[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  ")])}],o=(n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r=n("c695"),s=n.n(r),c=n("0edb"),d=n.n(c),u={data:function(){return{tableData:[],tableMenu:{className:"my-menus",header:{options:[[{code:"exportAll",name:"导出所有.csv"}]]},body:{options:[[{code:"copy",name:"app.body.label.copy",prefixIcon:"fa fa-copy",className:"my-copy-item"}],[{code:"remove",name:"删除",prefixIcon:"fa fa-trash-o color-red"},{code:"filter",name:"app.body.label.filter",children:[{code:"clearFilter",name:"清除筛选"},{code:"filterSelect",name:"按所选单元格的值筛选"}]},{code:"sort",name:"app.body.label.sort",prefixIcon:"fa fa-sort color-blue",children:[{code:"clearSort",name:"清除排序"},{code:"sortAsc",name:"升序",prefixIcon:"fa fa-sort-alpha-asc color-orange"},{code:"sortDesc",name:"倒序",prefixIcon:"fa fa-sort-alpha-desc color-orange"}]},{code:"print",name:"打印",disabled:!0}]]},footer:{options:[[{code:"clearAll",name:"清空数据"}]]}},demoCodes:['\n        <vxe-table\n          border\n          show-footer\n          highlight-current-row\n          highlight-current-column\n          ref="xTable"\n          :footer-method="footerMethod"\n          :data="tableData"\n          :context-menu="tableMenu"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableMenu: {\n                className: 'my-menus',\n                header: {\n                  options: [\n                    [\n                      { code: 'exportAll', name: '导出所有.csv' }\n                    ]\n                  ]\n                },\n                body: {\n                  options: [\n                    [\n                      { code: 'copy', name: 'app.body.label.copy', prefixIcon: 'fa fa-copy', className: 'my-copy-item' }\n                    ],\n                    [\n                      { code: 'remove', name: '删除', prefixIcon: 'fa fa-trash-o color-red' },\n                      {\n                        code: 'filter',\n                        name: 'app.body.label.filter',\n                        children: [\n                          { code: 'clearFilter', name: '清除筛选' },\n                          { code: 'filterSelect', name: '按所选单元格的值筛选' }\n                        ]\n                      },\n                      {\n                        code: 'sort',\n                        name: 'app.body.label.sort',\n                        prefixIcon: 'fa fa-sort color-blue',\n                        children: [\n                          { code: 'clearSort', name: '清除排序' },\n                          { code: 'sortAsc', name: '升序', prefixIcon: 'fa fa-sort-alpha-asc color-orange' },\n                          { code: 'sortDesc', name: '倒序', prefixIcon: 'fa fa-sort-alpha-desc color-orange' }\n                        ]\n                      },\n                      { code: 'print', name: '打印', disabled: true }\n                    ]\n                  ]\n                },\n                footer: {\n                  options: [\n                    [\n                      { code: 'clearAll', name: '清空数据' }\n                    ]\n                  ]\n                }\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            contextMenuClickEvent ({ menu, row, column }) {\n              switch (menu.code) {\n                case 'copy':\n                  // 示例\n                  if (row && column) {\n                    if (XEClipboard.copy(row[column.property])) {\n                      this.$XModal.message({ message: '已复制到剪贴板！', status: 'success' })\n                    }\n                  }\n                  break\n                default:\n                  this.$XModal.message(`点击了 ${menu.name} 选项`)\n              }\n            },\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 parseInt(XEUtils.mean(data, column.property))\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        ","\n        .my-menus {\n          background-color: #F8F8F9;\n        }\n        .my-menus .vxe-ctxmenu--link {\n          width: 200px;\n        }\n        .my-copy-item {\n          font-weight: 700;\n          font-style: oblique;\n        }\n        .color-red {\n          color: red;\n        }\n        .color-blue {\n          color: blue;\n        }\n        .color-orange {\n          color: orange;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column;switch(t.code){case"copy":n&&a&&d.a.copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;default:this.$XModal.message("点击了 ".concat(t.name," 选项"))}},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?parseInt(s.a.mean(n,e.property)):null}))]}}},m=u,v=(n("3cae"),n("2877")),b=Object(v["a"])(m,a,l,!1,null,null,null);t["default"]=b.exports},"2b5c":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("子路由 1")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1)],1)},l=[],o=(n("fb6a"),{data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,15),e.loading=!1}),300)}}),i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"2b6d":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(" 配合 v-for 动态生成，动态改变宽度、固定列..等"),n("span",{staticClass:"green"},[e._v("（如果是全动态的数据源建议使用 "),n("grid-api-link",{attrs:{name:"vxe-grid"}}),e._v("）")],1),n("br"),e._v(" 如果是列发生变动，则需要通过调用 "),n("table-api-link",{attrs:{prop:"refreshColumn"}}),e._v(" 方法刷新列信息"),n("br"),n("span",{staticClass:"red"},[e._v("（注：动态更新属性必须要先定义，否则将失去自动响应）")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.addColumn()}}},[e._v("最后增加一列")]),n("vxe-button",{on:{click:function(t){return e.removeColumn()}}},[e._v("删除最后一列")]),n("vxe-button",{on:{click:function(t){return e.updateSexFilter()}}},[e._v("修改sex列筛选条件")]),n("vxe-button",{on:{click:function(t){return e.toggleFixedColumn(0,"left")}}},[e._v("切换第一列固定")]),n("vxe-button",{on:{click:function(t){return e.toggleFixedColumn(1,"left")}}},[e._v("切换第二列固定")]),n("vxe-button",{on:{click:function(t){return e.updateWidthColumn(2,500)}}},[e._v("修改第三列宽度")]),n("vxe-button",{on:{click:function(t){return e.updateWidthColumn(3,500)}}},[e._v("修改第四列宽度")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"inner","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData}},e._l(e.tableColumn,(function(t,a){return n("vxe-table-column",e._b({key:a},"vxe-table-column",t,!1))})),1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("c7cd"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],tableColumn:[{type:"seq",width:60,fixed:null},{type:"checkbox",width:50,fixed:null},{field:"name",title:"Name",width:200},{field:"nickname",title:"Nickname",width:300},{field:"sex",title:"Sex",width:200,filters:[{value:"1",label:"男"}]},{field:"role",title:"Role",width:200},{field:"address",title:"Address",width:300,showOverflow:!0}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="addColumn()">最后增加一列</vxe-button>\n            <vxe-button @click="removeColumn()">删除最后一列</vxe-button>\n            <vxe-button @click="updateSexFilter()">修改sex列筛选条件</vxe-button>\n            <vxe-button @click="toggleFixedColumn(0, \'left\')">切换第一列固定</vxe-button>\n            <vxe-button @click="toggleFixedColumn(1, \'left\')">切换第二列固定</vxe-button>\n            <vxe-button @click="updateWidthColumn(2, 500)">修改第三列宽度</vxe-button>\n            <vxe-button @click="updateWidthColumn(3, 500)">修改第四列宽度</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border="inner"\n          highlight-hover-row\n          highlight-current-row\n          ref="xTable"\n          height="300"\n          :data="tableData">\n          <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'seq', width: 60, fixed: null },\n                { type: 'checkbox', width: 50, fixed: null },\n                { field: 'name', title: 'Name', width: 200 },\n                { field: 'nickname', title: 'Nickname', width: 300 },\n                { field: 'sex', title: 'Sex', width: 200 },\n                { field: 'role', title: 'Role', width: 200 },\n                { field: 'address', title: 'Address', width: 300, showOverflow: true }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            addColumn () {\n              const uniqueId = XEUtils.uniqueId()\n              this.tableColumn.push({\n                field: `new_${uniqueId}`,\n                title: `新列_${uniqueId}`,\n                minWidth: 100\n              })\n            },\n            removeColumn () {\n              this.tableColumn.pop()\n            },\n            updateSexFilter () {\n              const xTable = this.$refs.xTable\n              const column = xTable.getColumnByField('sex')\n              // 修改筛选列表，并默认设置为选中状态\n              xTable.setFilter(column, [\n                { value: '1', label: '男' },\n                { value: '0', label: '女', checked: true }\n              ])\n              // 修改条件之后，需要手动调用 updateData 处理表格数据\n              xTable.updateData()\n            },\n            toggleFixedColumn (index, value) {\n              const xTable = this.$refs.xTable\n              this.tableColumn[index].fixed = this.tableColumn[index].fixed ? null : value\n              // 更改了列属性，需要手动刷新列\n              this.$nextTick(() => {\n                // 由于固定列的动态切换是无状态的，所以需要手动刷新滚动位置\n                xTable.refreshColumn().then(() => xTable.refreshScroll())\n              })\n            },\n            updateWidthColumn (index, value) {\n              this.tableColumn[index].width = value\n              // 更改了列属性，需要手动刷新列\n              this.$nextTick(() => {\n                this.$refs.xTable.refreshColumn()\n              })\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},methods:{addColumn:function(){var e=i.a.uniqueId();this.tableColumn.push({field:"new_".concat(e),title:"新列_".concat(e),minWidth:100})},removeColumn:function(){this.tableColumn.pop()},updateSexFilter:function(){var e=this.$refs.xTable,t=e.getColumnByField("sex");e.setFilter(t,[{value:"1",label:"男"},{value:"0",label:"女",checked:!0}]),e.updateData()},toggleFixedColumn:function(e,t){var n=this.$refs.xTable;this.tableColumn[e].fixed=this.tableColumn[e].fixed?null:t,this.$nextTick((function(){n.refreshColumn().then((function(){return n.refreshScroll()}))}))},updateWidthColumn:function(e,t){var n=this;this.tableColumn[e].width=t,this.$nextTick((function(){n.$refs.xTable.refreshColumn()}))}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"2e79":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-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-input",{attrs:{type:"search",placeholder:"试试全表搜索"},model:{value:e.filterName1,callback:function(t){e.filterName1=t},expression:"filterName1"}})]},proxy:!0}])}),n("vxe-table",{attrs:{border:"",height:"300",data:e.list1},scopedSlots:e._u([{key:"empty",fn:function(){return[n("span",{staticStyle:{color:"red"}},[n("img",{attrs:{src:"static/other/img2.gif"}}),n("p",[e._v("没有更多数据了！")])])]},proxy:!0}])},[n("vxe-table-column",{attrs:{type:"seq",width:"80"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",type:"html"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",type:"html"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",type:"html"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",type:"html"}})],1),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-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-input",{attrs:{type:"search",placeholder:"试试全表搜索"},model:{value:e.filterName2,callback:function(t){e.filterName2=t},expression:"filterName2"}})]},proxy:!0}])}),n("vxe-table",{ref:"xTree",attrs:{"tree-config":"","max-height":"400",data:e.list2},scopedSlots:e._u([{key:"empty",fn:function(){return[n("span",{staticStyle:{color:"red"}},[n("img",{attrs:{src:"static/other/img1.gif"}}),n("p",[e._v("搜索不到数据，可能输入的关键字姿势不对！")])])]},proxy:!0}])},[n("vxe-table-column",{attrs:{type:"seq",width:"220",title:"序号","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",type:"html"}}),n("vxe-table-column",{attrs:{field:"size",title:"Size",type:"html"}}),n("vxe-table-column",{attrs:{field:"type",title:"Type",type:"html"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date",type:"html"}})],1),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)},l=[],o=(n("4de4"),n("4160"),n("a630"),n("c975"),n("d81d"),n("fb6a"),n("45fc"),n("d3b7"),n("4d63"),n("ac1f"),n("25f0"),n("3ca3"),n("5319"),n("498a"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{filterName1:"",tableData1:[],filterName2:"",tableData2:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-input v-model="filterName" type="search" placeholder="试试全表搜索"></vxe-input>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          height="300"\n          :data="list">\n          <vxe-table-column type="seq" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" type="html"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" type="html"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" type="html"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" type="html"></vxe-table-column>\n          <template v-slot:empty>\n            <span style="color: red;">\n              <img src="static/other/img2.gif">\n              <p>没有更多数据了！</p>\n            </span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              filterName: '',\n              tableData: []\n            }\n          },\n          computed: {\n            list () {\n              const filterName = XEUtils.toString(this.filterName).trim().toLowerCase()\n              if (filterName) {\n                const filterRE = new RegExp(filterName, 'gi')\n                const searchProps = ['name', 'role', 'age', 'address']\n                const rest = this.tableData.filter(item => searchProps.some(key => XEUtils.toString(item[key]).toLowerCase().indexOf(filterName) > -1))\n                return rest.map(row => {\n                  const item = Object.assign({}, row)\n                  searchProps.forEach(key => {\n                    item[key] = XEUtils.toString(item[key]).replace(filterRE, match => `<span class=\"keyword-lighten\">${match}</span>`)\n                  })\n                  return item\n                })\n              }\n              return this.tableData\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        ","\n        .keyword-lighten {\n          color: #000;\n          background-color: #FFFF00;\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-input v-model="filterName" type="search" placeholder="试试全表搜索"></vxe-input>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          tree-config\n          ref="xTree"\n          max-height="400"\n          :data="list">\n          <vxe-table-column type="seq" width="220" title="序号" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name" type="html"></vxe-table-column>\n          <vxe-table-column field="size" title="Size" type="html"></vxe-table-column>\n          <vxe-table-column field="type" title="Type" type="html"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" type="html"></vxe-table-column>\n          <template v-slot:empty>\n            <span style="color: red;">\n              <img src="static/other/img1.gif">\n              <p>搜索不到数据，可能输入的关键字姿势不对！</p>\n            </span>\n          </template>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              filterName: '',\n              tableData: []\n            }\n          },\n          computed: {\n            list () {\n              const filterName = XEUtils.toString(this.filterName).trim().toLowerCase()\n              if (filterName) {\n                const filterRE = new RegExp(filterName, 'gi')\n                const options = { children: 'children' }\n                const searchProps = ['name', 'size', 'type', 'date']\n                const rest = XEUtils.searchTree(this.tableData, item => searchProps.some(key => XEUtils.toString(item[key]).toLowerCase().indexOf(filterName) > -1), options)\n                XEUtils.eachTree(rest, item => {\n                  searchProps.forEach(key => {\n                    item[key] = XEUtils.toString(item[key]).replace(filterRE, match => `<span class=\"keyword-lighten\">${match}</span>`)\n                  })\n                }, options)\n                // 搜索之后默认展开所有子节点\n                this.$nextTick(() => {\n                  this.$refs.xTree.setAllTreeExpansion(true)\n                })\n                return rest\n              }\n              return this.tableData\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST\n          }\n        }","\n        .keyword-lighten {\n          color: #000;\n          background-color: #FFFF00;\n        }\n        "]}},computed:{list1:function(){var e=i.a.toString(this.filterName1).trim().toLowerCase();if(e){var t=new RegExp(e,"gi"),n=["name","role","age","address"],a=this.tableData1.filter((function(t){return n.some((function(n){return i.a.toString(t[n]).toLowerCase().indexOf(e)>-1}))}));return a.map((function(e){var a=Object.assign({},e);return n.forEach((function(e){a[e]=i.a.toString(a[e]).replace(t,(function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")}))})),a}))}return this.tableData1},list2:function(){var e=this,t=i.a.toString(this.filterName2).trim().toLowerCase();if(t){var n=new RegExp(t,"gi"),a={children:"children"},l=["name","size","type","date"],o=i.a.searchTree(this.tableData2,(function(e){return l.some((function(n){return i.a.toString(e[n]).toLowerCase().indexOf(t)>-1}))}),a);return i.a.eachTree(o,(function(e){l.forEach((function(t){e[t]=i.a.toString(e[t]).replace(n,(function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")}))}))}),a),this.$nextTick((function(){e.$refs.xTree.setAllTreeExpansion(!0)})),o}return this.tableData2}},created:function(){this.tableData1=window.MOCK_DATA_LIST.slice(0,50),this.tableData2=i.a.clone(window.MOCK_TREE_DATA_LIST,!0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"3cae":function(e,t,n){"use strict";var a=n("8392"),l=n.n(a);l.a},"3d3f":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:"id"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"custom-config"}}),e._v("={storage: true} 参数开启将列个性化 localStorage 保存功能"),n("br"),e._v(" 通过 "),n("table-api-link",{attrs:{prop:"custom"}}),e._v(" 事件实现显示/隐藏列服务端保存，通过 "),n("table-api-link",{attrs:{prop:"resizable-change"}}),e._v(" 事件实现列宽状态服务端保存 ")],1),n("vxe-toolbar",{attrs:{custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",[e._v("按钮1")]),n("vxe-button",[e._v("按钮2")])]},proxy:!0}])}),n("vxe-table",{attrs:{border:"",resizable:"",id:"toolbar_demo5",height:"400","custom-config":{storage:!0,checkMethod:e.checkColumnMethod},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar custom>\n          <template v-slot:buttons>\n            <vxe-button>按钮1</vxe-button>\n            <vxe-button>按钮2</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          id="toolbar_demo5"\n          height="400"\n          :custom-config="{storage: true, checkMethod: checkColumnMethod}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            checkColumnMethod ({ column }) {\n              if (column.property === 'role') {\n                return false\n              }\n              return true\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{checkColumnMethod:function(e){var t=e.column;return"role"!==t.property}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"3e18":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:"keyboard-config"}}),e._v("={isArrow: true} 启用方向键功能")],1),n("vxe-table",{attrs:{border:"",resizable:"","highlight-current-row":"",height:"500",data:e.tableData,"keyboard-config":{isArrow:!0}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),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)},l=[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    ")]),e._v("\n  ")])}],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-current-row\n          height="500"\n          :data="tableData"\n          :keyboard-config="{isArrow: true}">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"551f":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:"span-method"}}),e._v(" 方法，使用 $rowIndex 获取渲染中的行索引，rowIndex 指向真实数据的行索引，可以根据不同场景使用"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 合并的逻辑都是自行实现的，该示例仅供参考）")],1)],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){e.allAlign="left"}}},[e._v("居左")]),n("vxe-button",{on:{click:function(t){e.allAlign="center"}}},[e._v("居中")]),n("vxe-button",{on:{click:function(t){e.allAlign="right"}}},[e._v("居右")])]},proxy:!0}])}),n("vxe-table",{attrs:{border:"",resizable:"",height:"300",align:e.allAlign,"span-method":e.colspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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-table",{attrs:{border:"",resizable:"",height:"300","span-method":e.mergeRowMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"key",title:"Key"}}),n("vxe-table-column",{attrs:{field:"content",title:"Translate"}}),n("vxe-table-column",{attrs:{field:"language",title:"Language",filters:[{label:"中文",value:"zh_CN"},{label:"English",value:"en_US"}]}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v("通用单元格合并，按区域合并 { row: 起始行, col: 起始列, rowspan: 合并几行, colspan: 合并几列 }")]),n("vxe-table",{attrs:{border:"",resizable:"",height:"300","span-method":e.mergeMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("caad"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{allAlign:null,tableData:[],mergeCells:[{row:1,col:1,rowspan:3,colspan:3},{row:6,col:0,rowspan:2,colspan:2}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="allAlign = \'left\'">居左</vxe-button>\n            <vxe-button @click="allAlign = \'center\'">居中</vxe-button>\n            <vxe-button @click="allAlign = \'right\'">居右</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          height="300"\n          :align="allAlign"\n          :span-method="colspanMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              allAlign: null,\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            colspanMethod ({ rowIndex, columnIndex }) {\n              if (rowIndex % 2 === 0) {\n                if (columnIndex === 2) {\n                  return { rowspan: 1, colspan: 2 }\n                } else if (columnIndex === 3) {\n                  return { rowspan: 0, colspan: 0 }\n                }\n              }\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          height="300"\n          :span-method="mergeRowMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="key" title="Key"></vxe-table-column>\n          <vxe-table-column field="content" title="Translate"></vxe-table-column>\n          <vxe-table-column field="language" title="Language" :filters="[{label: \'中文\', value: \'zh_CN\'}, {label: \'English\', value: \'en_US\'}]"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            // 通用行合并函数（将相同多列数据合并为一行）\n            mergeRowMethod ({ row, $rowIndex, column, data }) {\n              const fields = ['key']\n              const cellValue = XEUtils.get(row, column.property)\n              if (cellValue && fields.includes(column.property)) {\n                const prevRow = data[$rowIndex - 1]\n                let nextRow = data[$rowIndex + 1]\n                if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {\n                  return { rowspan: 0, colspan: 0 }\n                } else {\n                  let countRowspan = 1\n                  while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {\n                    nextRow = data[++countRowspan + $rowIndex]\n                  }\n                  if (countRowspan > 1) {\n                    return { rowspan: countRowspan, colspan: 1 }\n                  }\n                }\n              }\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          height="300"\n          :span-method="mergeMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="date12" title="Date"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              mergeCells: [\n                { row: 1, col: 1, rowspan: 3, colspan: 3 },\n                { row: 6, col: 0, rowspan: 2, colspan: 2 }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            // 通用单元格合并函数（将指定区域进行合并）\n            mergeMethod ({ rowIndex, columnIndex }) {\n              const { mergeCells } = this\n              for (let mIndex = 0; mIndex < mergeCells.length; mIndex++) {\n                const { row, col, rowspan, colspan } = mergeCells[mIndex]\n                if (row === rowIndex && col === columnIndex) {\n                  return { rowspan, colspan }\n                }\n                if (rowIndex >= row && rowIndex < row + rowspan && columnIndex >= col && columnIndex < col + colspan) {\n                  return { rowspan: 0, colspan: 0 }\n                }\n              }\n              return { rowspan: 1, colspan: 1 }\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{colspanMethod:function(e){var t=e.rowIndex,n=e.columnIndex;if(t%2===0){if(2===n)return{rowspan:1,colspan:2};if(3===n)return{rowspan:0,colspan:0}}},mergeRowMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["key"],r=i.a.get(t,a.property);if(r&&o.includes(a.property)){var s=l[n-1],c=l[n+1];if(s&&i.a.get(s,a.property)===r)return{rowspan:0,colspan:0};var d=1;while(c&&i.a.get(c,a.property)===r)c=l[++d+n];if(d>1)return{rowspan:d,colspan:1}}},mergeMethod:function(e){for(var t=e.rowIndex,n=e.columnIndex,a=this.mergeCells,l=0;l<a.length;l++){var o=a[l],i=o.row,r=o.col,s=o.rowspan,c=o.colspan;if(i===t&&r===n)return{rowspan:s,colspan:c};if(t>=i&&t<i+s&&n>=r&&n<r+c)return{rowspan:0,colspan:0}}return{rowspan:1,colspan:1}}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},5596: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-form",{attrs:{data:e.formData},on:{submit:e.findList}},[n("vxe-form-item",{attrs:{title:"app.body.label.name",field:"name"}},[n("vxe-input",{attrs:{placeholder:"请输入名称"},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}})],1),n("vxe-form-item",{attrs:{title:"性别",field:"sex","title-prefix":{message:"帮助信息！！！"}}},[n("vxe-select",{attrs:{placeholder:"请选择性别",clearable:""},model:{value:e.formData.sex,callback:function(t){e.$set(e.formData,"sex",t)},expression:"formData.sex"}},[n("vxe-option",{attrs:{value:"1",label:"女"}}),n("vxe-option",{attrs:{value:"2",label:"男"}})],1)],1),n("vxe-form-item",[n("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("查询")]),n("vxe-button",{attrs:{type:"reset"}},[e._v("重置")])],1)],1),n("vxe-table",{attrs:{"show-overflow":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,formData:{name:"",sex:""},tableData:[],demoCodes:['\n        <vxe-form :data="formData" @submit="findList">\n          <vxe-form-item title="app.body.label.name" field="name">\n            <vxe-input v-model="formData.name" placeholder="请输入名称"></vxe-input>\n          </vxe-form-item>\n          <vxe-form-item title="性别" field="sex" :title-prefix="{ message: \'帮助信息！！！\' }">\n            <vxe-select v-model="formData.sex" placeholder="请选择性别" clearable>\n              <vxe-option value="1" label="女"></vxe-option>\n              <vxe-option value="2" label="男"></vxe-option>\n            </vxe-select>\n          </vxe-form-item>\n          <vxe-form-item>\n            <vxe-button type="submit" status="primary">查询</vxe-button>\n            <vxe-button type="reset">重置</vxe-button>\n          </vxe-form-item>\n        </vxe-form>\n\n        <vxe-table\n          show-overflow\n          height="400"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              formData: {\n                name: '',\n                sex: ''\n              },\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.get('/api/user/list', this.formData).then(data => {\n                this.tableData = data\n                this.loading = false\n              })\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},created:function(){this.findList()},methods:{findList:function(){var e=this;this.loading=!0,i.a.get("/api/user/list",this.formData).then((function(t){e.tableData=t,e.loading=!1}))}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"662d":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("子路由 3")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1)},l=[],o=(n("fb6a"),{data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,50),e.loading=!1}),300)}}),i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"6c0e":function(e,t,n){"use strict";var a=n("e179"),l=n.n(a);l.a},"6e14":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:"sort-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"iconAsc"}}),e._v(", "),n("table-api-link",{attrs:{prop:"iconDesc"}}),e._v("} 局部替换默认的图标")],1),n("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"300","sort-config":{iconAsc:"fa fa-chevron-up",iconDesc:"fa fa-chevron-down"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",filters:[{label:"id大于10",value:10},{label:"id大于40",value:40}],"filter-method":e.filterNameMethod}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          highlight-current-row\n          height="300"\n          :sort-config="{iconAsc: \'fa fa-chevron-up\', iconDesc: \'fa fa-chevron-down\'}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable :filters="[{label: \'id大于10\', value: 10}, {label: \'id大于40\', value: 40}]" :filter-method="filterNameMethod"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            filterNameMethod ({ value, row }) {\n              return row.id >= value\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{filterNameMethod:function(e){var t=e.value,n=e.row;return n.id>=t}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},7062: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-table",{ref:"xTable",attrs:{border:"","show-footer":"","highlight-current-row":"","highlight-current-column":"","footer-method":e.footerMethod,data:e.tableData,"context-menu":e.tableMenu},on:{"header-cell-context-menu":e.headerCellContextMenuEvent,"cell-context-menu":e.cellContextMenuEvent,"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time"}})],1),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)},l=[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  ")])}],o=(n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r=n("c695"),s=n.n(r),c=n("0edb"),d=n.n(c),u={data:function(){return{tableData:[],tableMenu:{header:{options:[[{code:"exportAll",name:"导出所有.csv",visible:!0,disabled:!1}]]},body:{options:[[{code:"details",name:"查看详情",prefixIcon:"fa fa-link",visible:!0,disabled:!1}],[{code:"copy",name:"app.body.label.copy",prefixIcon:"fa fa-copy",visible:!0,disabled:!1},{code:"clear",name:"清除内容",prefixIcon:"fa fa-copy",visible:!0,disabled:!1}],[{code:"remove",name:"删除",visible:!0,disabled:!1},{code:"filter",name:"app.body.label.filter",visible:!0,disabled:!1,children:[{code:"clearFilter",name:"清除筛选",visible:!0,disabled:!1},{code:"filterSelect",name:"按所选单元格的值筛选",visible:!0,disabled:!1}]},{code:"sort",name:"app.body.label.sort",visible:!0,disabled:!1,children:[{code:"clearSort",name:"清除排序",visible:!0,disabled:!1},{code:"sortAsc",name:"升序",visible:!0,disabled:!1},{code:"sortDesc",name:"倒序",visible:!0,disabled:!1}]},{code:"print",name:"打印",disabled:!0}]]},footer:{options:[[{code:"clearAll",name:"清空数据",visible:!0,disabled:!1}]]},visibleMethod:this.visibleMethod},demoCodes:['\n        <vxe-table\n          border\n          show-footer\n          highlight-current-row\n          highlight-current-column\n          ref="xTable"\n          :footer-method="footerMethod"\n          :data="tableData"\n          :context-menu="tableMenu"\n          @header-cell-context-menu="headerCellContextMenuEvent"\n          @cell-context-menu="cellContextMenuEvent"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableMenu: {\n                header: {\n                  options: [\n                    [\n                      { code: 'exportAll', name: '导出所有.csv', visible: true, disabled: false }\n                    ]\n                  ]\n                },\n                body: {\n                  options: [\n                    [\n                      { code: 'details', name: '查看详情', prefixIcon: 'fa fa-link', visible: true, disabled: false }\n                    ],\n                    [\n                      { code: 'copy', name: 'app.body.label.copy', prefixIcon: 'fa fa-copy', visible: true, disabled: false },\n                      { code: 'clear', name: '清除内容', prefixIcon: 'fa fa-copy', visible: true, disabled: false }\n                    ],\n                    [\n                      { code: 'remove', name: '删除', visible: true, disabled: false },\n                      {\n                        code: 'filter',\n                        name: 'app.body.label.filter',\n                        visible: true,\n                        disabled: false,\n                        children: [\n                          { code: 'clearFilter', name: '清除筛选', visible: true, disabled: false },\n                          { code: 'filterSelect', name: '按所选单元格的值筛选', visible: true, disabled: false }\n                        ]\n                      },\n                      {\n                        code: 'sort',\n                        name: 'app.body.label.sort',\n                        visible: true,\n                        disabled: false,\n                        children: [\n                          { code: 'clearSort', name: '清除排序', visible: true, disabled: false },\n                          { code: 'sortAsc', name: '升序', visible: true, disabled: false },\n                          { code: 'sortDesc', name: '倒序', visible: true, disabled: false }\n                        ]\n                      },\n                      { code: 'print', name: '打印', disabled: true }\n                    ]\n                  ]\n                },\n                footer: {\n                  options: [\n                    [\n                      { code: 'clearAll', name: '清空数据', visible: true, disabled: false }\n                    ]\n                  ]\n                },\n                visibleMethod: this.visibleMethod\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            headerCellContextMenuEvent ({ column }) {\n              this.$refs.xTable.setCurrentColumn(column)\n            },\n            cellContextMenuEvent ({ row }) {\n              this.$refs.xTable.setCurrentRow(row)\n            },\n            visibleMethod ({ options, column }) {\n              // 示例：只有 name 列允许操作，清除按钮只能在 age 才显示\n              // 显示之前处理按钮的操作权限\n              const isDisabled = !column || column.property !== 'name'\n              const isVisible = column && column.property === 'age'\n              options.forEach(list => {\n                list.forEach(item => {\n                  if (['copy', 'remove'].includes(item.code)) {\n                    item.disabled = isDisabled\n                  }\n                  if (['details'].includes(item.code)) {\n                    item.visible = column.property === 'name'\n                  } else if (['clear', 'filter'].includes(item.code)) {\n                    item.visible = isVisible\n                  }\n                })\n              })\n              return true\n            },\n            contextMenuClickEvent ({ menu, row, column }) {\n              switch (menu.code) {\n                case 'copy':\n                  // 示例\n                  if (row && column) {\n                    if (XEClipboard.copy(row[column.property])) {\n                      this.$XModal.message({ message: '已复制到剪贴板！', status: 'success' })\n                    }\n                  }\n                  break\n                default:\n                  this.$XModal.message({ message: `点击了 \"${menu.name}\"`, status: 'info' })\n              }\n            },\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 parseInt(XEUtils.mean(data, column.property))\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{headerCellContextMenuEvent:function(e){var t=e.column;this.$refs.xTable.setCurrentColumn(t)},cellContextMenuEvent:function(e){var t=e.row;this.$refs.xTable.setCurrentRow(t)},visibleMethod:function(e){var t=e.options,n=e.column,a=!n||"name"!==n.property,l=n&&"age"===n.property;return t.forEach((function(e){e.forEach((function(e){["copy","remove"].includes(e.code)&&(e.disabled=a),["details"].includes(e.code)?e.visible="name"===n.property:["clear","filter"].includes(e.code)&&(e.visible=l)}))})),!0},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column;switch(t.code){case"copy":n&&a&&d.a.copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;default:this.$XModal.message({message:'点击了 "'.concat(t.name,'"'),status:"info"})}},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?parseInt(s.a.mean(n,e.property)):null}))]}}},m=u,v=n("2877"),b=Object(v["a"])(m,a,l,!1,null,null,null);t["default"]=b.exports},"70d1":function(e,t,n){"use strict";var a=n("86f4"),l=n.n(a);l.a},78196: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:{name:"vxe-toolbar"}}),e._v("，配合模板可以非常简单的实现强大的功能"),n("br"),e._v(" 支持显示/隐藏列、列宽拖动状态的保存功能，还可以配合 "),n("table-api-link",{attrs:{prop:"custom"}}),e._v(" 事件实现显示/隐藏列的服务端保存 ")],1),n("vxe-toolbar",{attrs:{custom:"",print:""}}),n("vxe-table",{attrs:{border:"","export-config":"",height:"300",data:e.tableData1}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{title:"分组信息"}},[n("vxe-table-column",{attrs:{title:"基本信息"}},[n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}})],1),n("vxe-table-column",{attrs:{field:"sex",title:"app.body.label.sex"}})],1),n("vxe-table-column",{attrs:{field:"age",title:"app.body.label.age"}}),n("vxe-table-column",{attrs:{title:"其他信息"}},[n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1),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("工具栏和表格默认是上下相邻关系，渲染时会自动进行关联；如果位置不是相邻关系，也可以手动调用 connect() 方法关联")]),n("div",[n("p",[e._v("工具栏位置随意放")]),n("my-div",[n("vxe-toolbar",{ref:"xToolbar",attrs:{custom:"",print:"",buttons:e.toolbarButtons,refresh:{query:e.findList}}})],1),n("p",[e._v("工具栏位置随意放")])],1),n("vxe-table",{ref:"xTable",attrs:{border:"","export-config":"",height:"300",loading:e.loading,data:e.tableData},on:{custom:e.toolbarCustomEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"app.body.label.sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"app.body.label.age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("d3b7"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData1:[],tableData:[],toolbarButtons:[{code:"btn1",name:"app.body.button.insert"},{name:"下拉按钮",dropdowns:[{name:"按钮111",code:"btn2"},{name:"按钮222",code:"btn3"}]}],demoCodes:['\n        <vxe-toolbar custom print></vxe-toolbar>\n\n        <vxe-table\n          border\n          export-config\n          height="300"\n          :data="tableData1">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column title="分组信息">\n            <vxe-table-column title="基本信息">\n              <vxe-table-column field="name" title="app.body.label.name"></vxe-table-column>\n              <vxe-table-column field="role" title="Role"></vxe-table-column>\n            </vxe-table-column>\n            <vxe-table-column field="sex" title="app.body.label.sex"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column field="age" title="app.body.label.age"></vxe-table-column>\n          <vxe-table-column title="其他信息">\n            <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData1: []\n            }\n          },\n          created () {\n            this.tableData1 = window.MOCK_DATA_LIST.slice(0, 10)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          export-config\n          ref="xTable"\n          height="300"\n          :loading="loading"\n          :data="tableData"\n          @custom="toolbarCustomEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="app.body.label.name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="app.body.label.sex"></vxe-table-column>\n          <vxe-table-column field="age" title="app.body.label.age"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n        </vxe-table>\n\n        <div>\n          <p>工具栏位置随意放</p>\n          <my-div>\n            <vxe-toolbar\n              custom\n              print\n              ref="xToolbar"\n              :buttons="toolbarButtons"\n              :refresh="{query: findList}">\n            </vxe-toolbar>\n          </my-div>\n          <p>工具栏位置随意放</p>\n        </div>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              toolbarButtons: [\n                { code: 'btn1', name: 'app.body.button.insert' },\n                {\n                  name: '下拉按钮',\n                  dropdowns: [\n                    { name: '按钮111', code: 'btn2' },\n                    { name: '按钮222', code: 'btn3' }\n                  ]\n                }\n              ]\n            }\n          },\n          created () {\n            this.$nextTick(() => {\n              // 手动将表格和工具栏进行关联\n              this.$refs.xTable.connect(this.$refs.xToolbar)\n            })\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n                  this.loading = false\n                  resolve()\n                }, 300)\n              })\n            },\n            toolbarCustomEvent (params) {\n              const visibleColumn = this.$refs.xTable.getColumns()\n              switch (params.type) {\n                case 'confirm': {\n                  this.$XModal.message({ message: `点击了确认，显示为 ${visibleColumn.length} 列`, status: 'info' })\n                  break\n                }\n                case 'reset': {\n                  this.$XModal.message({ message: `点击了重置，显示为 ${visibleColumn.length} 列`, status: 'info' })\n                  break\n                }\n                case 'close': {\n                  this.$XModal.message({ message: `关闭了面板，显示为 ${visibleColumn.length} 列`, status: 'info' })\n                  break\n                }\n              }\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.$nextTick((function(){e.$refs.xTable.connect(e.$refs.xToolbar)})),this.tableData1=window.MOCK_DATA_LIST.slice(0,10),this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;return this.loading=!0,new Promise((function(t){setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,20),e.loading=!1,t()}),300)}))},toolbarCustomEvent:function(e){var t=this.$refs.xTable.getColumns();switch(e.type){case"confirm":this.$XModal.message({message:"点击了确认，显示为 ".concat(t.length," 列"),status:"info"});break;case"reset":this.$XModal.message({message:"点击了重置，显示为 ".concat(t.length," 列"),status:"info"});break;case"close":this.$XModal.message({message:"关闭了面板，显示为 ".concat(t.length," 列"),status:"info"});break}}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},7882: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("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 合并的逻辑都是自行实现的，该示例仅供参考）")],1)]),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"",height:"800",align:"center","column-width":"80","cell-style":e.cellStyleMethod,"span-method":e.mergeMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"a",title:"名称"}}),n("vxe-table-column",{attrs:{field:"b",title:"教育经费投入"}},[n("vxe-table-column",{attrs:{field:"c",title:"总计"}}),n("vxe-table-column",{attrs:{title:"基本投入"}},[n("vxe-table-column",{attrs:{title:"合计"}},[n("vxe-table-column",{attrs:{field:"d",title:"合计"}}),n("vxe-table-column",{attrs:{field:"e",title:"比上年增长"}})],1),n("vxe-table-column",{attrs:{field:"f",title:"人员经费"}}),n("vxe-table-column",{attrs:{field:"g",title:"公用经费"}}),n("vxe-table-column",{attrs:{title:"其他经费"}},[n("vxe-table-column",{attrs:{field:"d",title:"合计"}}),n("vxe-table-column",{attrs:{title:"其中"}},[n("vxe-table-column",{attrs:{field:"h",title:"标准化建设"}}),n("vxe-table-column",{attrs:{field:"i",title:"信息化建设"}})],1)],1)],1),n("vxe-table-column",{attrs:{field:"j",title:"附加信息"}})],1),n("vxe-table-column",{attrs:{title:"其他投入"}},[n("vxe-table-column",{attrs:{title:"投入"}},[n("vxe-table-column",{attrs:{field:"k",title:"合计"}}),n("vxe-table-column",{attrs:{title:"其中"}},[n("vxe-table-column",{attrs:{field:"l",title:"人员经费"}}),n("vxe-table-column",{attrs:{field:"m",title:"教育经费"}}),n("vxe-table-column",{attrs:{field:"n",title:"项目经费"}}),n("vxe-table-column",{attrs:{field:"o",title:"基建投入"}})],1)],1),n("vxe-table-column",{attrs:{title:"社会捐款"}},[n("vxe-table-column",{attrs:{field:"p",title:"合计"}}),n("vxe-table-column",{attrs:{title:"其中"}},[n("vxe-table-column",{attrs:{field:"q",title:"项目经费"}}),n("vxe-table-column",{attrs:{field:"r",title:"基建投入"}})],1)],1)],1),n("vxe-table-column",{attrs:{title:"补充资料"}},[n("vxe-table-column",{attrs:{title:"信息化建设"}},[n("vxe-table-column",{attrs:{field:"s",title:"本年投入金额"}}),n("vxe-table-column",{attrs:{title:"其中"}},[n("vxe-table-column",{attrs:{field:"t",title:"合计"}}),n("vxe-table-column",{attrs:{field:"u",title:"建设数"}})],1),n("vxe-table-column",{attrs:{field:"v",title:"备注"}})],1)],1)],1),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)},l=[],o=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],mergeCells:[{row:0,col:0,rowspan:2,colspan:1},{row:0,col:1,rowspan:2,colspan:1},{row:0,col:2,rowspan:2,colspan:1},{row:0,col:3,rowspan:2,colspan:1},{row:0,col:4,rowspan:2,colspan:1},{row:0,col:5,rowspan:2,colspan:1},{row:0,col:6,rowspan:2,colspan:1},{row:0,col:7,rowspan:2,colspan:1},{row:0,col:8,rowspan:2,colspan:1},{row:0,col:9,rowspan:2,colspan:1},{row:0,col:15,rowspan:10,colspan:1,style:{color:"#DD001B",fontWeight:700,fontSize:"40px"}},{row:0,col:16,rowspan:10,colspan:1},{row:0,col:18,rowspan:2,colspan:1},{row:0,col:19,rowspan:2,colspan:1},{row:0,col:20,rowspan:2,colspan:1},{row:0,col:21,rowspan:2,colspan:1},{row:1,col:11,rowspan:1,colspan:4},{row:2,col:0,rowspan:4,colspan:2,style:{color:"#ffffff",backgroundColor:"#008000"}},{row:2,col:2,rowspan:4,colspan:1},{row:2,col:3,rowspan:4,colspan:1},{row:2,col:6,rowspan:4,colspan:1},{row:2,col:7,rowspan:4,colspan:1},{row:2,col:8,rowspan:4,colspan:1},{row:2,col:9,rowspan:4,colspan:1},{row:2,col:17,rowspan:4,colspan:1},{row:2,col:18,rowspan:3,colspan:1},{row:2,col:19,rowspan:3,colspan:1},{row:2,col:20,rowspan:3,colspan:2},{row:3,col:4,rowspan:2,colspan:2,style:{color:"#ffffff",backgroundColor:"#F5680B",fontSize:"40px"}},{row:4,col:11,rowspan:2,colspan:4,style:{color:"#ffffff",backgroundColor:"#409eff"}},{row:5,col:18,rowspan:1,colspan:4},{row:6,col:0,rowspan:3,colspan:1},{row:6,col:1,rowspan:3,colspan:1},{row:6,col:4,rowspan:3,colspan:1},{row:6,col:5,rowspan:3,colspan:1},{row:6,col:6,rowspan:3,colspan:1},{row:6,col:7,rowspan:3,colspan:1},{row:6,col:8,rowspan:3,colspan:1},{row:6,col:9,rowspan:3,colspan:1},{row:6,col:18,rowspan:3,colspan:1},{row:6,col:19,rowspan:3,colspan:1},{row:6,col:20,rowspan:3,colspan:1},{row:6,col:21,rowspan:3,colspan:1},{row:6,col:2,rowspan:1,colspan:2},{row:8,col:2,rowspan:1,colspan:2},{row:9,col:0,rowspan:1,colspan:15}],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          ref="xTable"\n          height="800"\n          align="center"\n          column-width="80"\n          :cell-style="cellStyleMethod"\n          :span-method="mergeMethod"\n          :data="tableData">\n          <vxe-table-column field="a" title="名称"></vxe-table-column>\n          <vxe-table-column field="b" title="教育经费投入">\n            <vxe-table-column field="c" title="总计"></vxe-table-column>\n            <vxe-table-column title="基本投入">\n              <vxe-table-column title="合计">\n                <vxe-table-column field="d" title="合计"></vxe-table-column>\n                <vxe-table-column field="e" title="比上年增长"></vxe-table-column>\n              </vxe-table-column>\n              <vxe-table-column field="f" title="人员经费"></vxe-table-column>\n              <vxe-table-column field="g" title="公用经费"></vxe-table-column>\n              <vxe-table-column title="其他经费">\n                <vxe-table-column field="d" title="合计"></vxe-table-column>\n                <vxe-table-column title="其中">\n                  <vxe-table-column field="h" title="标准化建设"></vxe-table-column>\n                  <vxe-table-column field="i" title="信息化建设"></vxe-table-column>\n                </vxe-table-column>\n              </vxe-table-column>\n            </vxe-table-column>\n            <vxe-table-column field="j" title="附加信息"></vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column title="其他投入">\n            <vxe-table-column title="投入">\n              <vxe-table-column field="k" title="合计"></vxe-table-column>\n              <vxe-table-column title="其中">\n                <vxe-table-column field="l" title="人员经费"></vxe-table-column>\n                <vxe-table-column field="m" title="教育经费"></vxe-table-column>\n                <vxe-table-column field="n" title="项目经费"></vxe-table-column>\n                <vxe-table-column field="o" title="基建投入"></vxe-table-column>\n              </vxe-table-column>\n            </vxe-table-column>\n            <vxe-table-column title="社会捐款">\n              <vxe-table-column field="p" title="合计"></vxe-table-column>\n              <vxe-table-column title="其中">\n                <vxe-table-column field="q" title="项目经费"></vxe-table-column>\n                <vxe-table-column field="r" title="基建投入"></vxe-table-column>\n              </vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n          <vxe-table-column title="补充资料">\n            <vxe-table-column title="信息化建设">\n              <vxe-table-column field="s" title="本年投入金额"></vxe-table-column>\n              <vxe-table-column title="其中">\n                <vxe-table-column field="t" title="合计"></vxe-table-column>\n                <vxe-table-column field="u" title="建设数"></vxe-table-column>\n              </vxe-table-column>\n              <vxe-table-column field="v" title="备注"></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              mergeCells: [\n                { row: 0, col: 0, rowspan: 2, colspan: 1 },\n                { row: 0, col: 1, rowspan: 2, colspan: 1 },\n                { row: 0, col: 2, rowspan: 2, colspan: 1 },\n                { row: 0, col: 3, rowspan: 2, colspan: 1 },\n                { row: 0, col: 4, rowspan: 2, colspan: 1 },\n                { row: 0, col: 5, rowspan: 2, colspan: 1 },\n                { row: 0, col: 6, rowspan: 2, colspan: 1 },\n                { row: 0, col: 7, rowspan: 2, colspan: 1 },\n                { row: 0, col: 8, rowspan: 2, colspan: 1 },\n                { row: 0, col: 9, rowspan: 2, colspan: 1 },\n                { row: 0, col: 15, rowspan: 10, colspan: 1, style: { color: '#DD001B', fontWeight: 700, fontSize: '40px' } },\n                { row: 0, col: 16, rowspan: 10, colspan: 1 },\n                { row: 0, col: 18, rowspan: 2, colspan: 1 },\n                { row: 0, col: 19, rowspan: 2, colspan: 1 },\n                { row: 0, col: 20, rowspan: 2, colspan: 1 },\n                { row: 0, col: 21, rowspan: 2, colspan: 1 },\n                { row: 1, col: 11, rowspan: 1, colspan: 4 },\n                { row: 2, col: 0, rowspan: 4, colspan: 2, style: { color: '#ffffff', backgroundColor: '#008000' } },\n                { row: 2, col: 2, rowspan: 4, colspan: 1 },\n                { row: 2, col: 3, rowspan: 4, colspan: 1 },\n                { row: 2, col: 6, rowspan: 4, colspan: 1 },\n                { row: 2, col: 7, rowspan: 4, colspan: 1 },\n                { row: 2, col: 8, rowspan: 4, colspan: 1 },\n                { row: 2, col: 9, rowspan: 4, colspan: 1 },\n                { row: 2, col: 17, rowspan: 4, colspan: 1 },\n                { row: 2, col: 18, rowspan: 3, colspan: 1 },\n                { row: 2, col: 19, rowspan: 3, colspan: 1 },\n                { row: 2, col: 20, rowspan: 3, colspan: 2 },\n                { row: 3, col: 4, rowspan: 2, colspan: 2, style: { color: '#ffffff', backgroundColor: '#F5680B', fontSize: '40px' } },\n                { row: 4, col: 11, rowspan: 2, colspan: 4, style: { color: '#ffffff', backgroundColor: '#409eff' } },\n                { row: 5, col: 18, rowspan: 1, colspan: 4 },\n                { row: 6, col: 0, rowspan: 3, colspan: 1 },\n                { row: 6, col: 1, rowspan: 3, colspan: 1 },\n                { row: 6, col: 4, rowspan: 3, colspan: 1 },\n                { row: 6, col: 5, rowspan: 3, colspan: 1 },\n                { row: 6, col: 6, rowspan: 3, colspan: 1 },\n                { row: 6, col: 7, rowspan: 3, colspan: 1 },\n                { row: 6, col: 8, rowspan: 3, colspan: 1 },\n                { row: 6, col: 9, rowspan: 3, colspan: 1 },\n                { row: 6, col: 18, rowspan: 3, colspan: 1 },\n                { row: 6, col: 19, rowspan: 3, colspan: 1 },\n                { row: 6, col: 20, rowspan: 3, colspan: 1 },\n                { row: 6, col: 21, rowspan: 3, colspan: 1 },\n                { row: 6, col: 2, rowspan: 1, colspan: 2 },\n                { row: 8, col: 2, rowspan: 1, colspan: 2 },\n                { row: 9, col: 0, rowspan: 1, colspan: 15 }\n              ]\n            }\n          },\n          created () {\n            const list = []\n            for (let index = 0; index < 15; index++) {\n              list.push({\n                a: 'a' + index,\n                b: 'b' + index,\n                c: 'c' + index,\n                d: 'd' + index,\n                e: 'e' + index,\n                f: 'f' + index,\n                g: 'g' + index,\n                h: 'h' + index,\n                i: 'i' + index,\n                j: 'j' + index,\n                k: 'k' + index,\n                l: 'l' + index,\n                m: 'm' + index,\n                n: 'n' + index,\n                o: 'o' + index,\n                p: 'p' + index,\n                q: 'q' + index,\n                r: 'r' + index,\n                s: 's' + index,\n                t: 't' + index,\n                u: 'u' + index,\n                v: 'v' + index\n              })\n            }\n            this.tableData = list\n          },\n          methods: {\n            // 通过单元格样式渲染函数\n            cellStyleMethod ({ row, column }) {\n              const { mergeCells } = this\n              const xTable = this.$refs.xTable\n              const _rowIndex = xTable._getRowIndex(row)\n              const _columnIndex = xTable._getColumnIndex(column)\n              for (let mIndex = 0; mIndex < mergeCells.length; mIndex++) {\n                const { row, col, style } = mergeCells[mIndex]\n                if (style && row === _rowIndex && col === _columnIndex) {\n                  return style\n                }\n              }\n              return null\n            },\n            // 通用单元格合并函数（将指定区域进行合并）\n            mergeMethod ({ row, column }) {\n              const { mergeCells } = this\n              const xTable = this.$refs.xTable\n              const _rowIndex = xTable._getRowIndex(row)\n              const _columnIndex = xTable._getColumnIndex(column)\n              for (let mIndex = 0; mIndex < mergeCells.length; mIndex++) {\n                const { row, col, rowspan, colspan } = mergeCells[mIndex]\n                if (row === _rowIndex && col === _columnIndex) {\n                  return { rowspan, colspan }\n                }\n                if (_rowIndex >= row && _rowIndex < row + rowspan && _columnIndex >= col && _columnIndex < col + colspan) {\n                  return { rowspan: 0, colspan: 0 }\n                }\n              }\n              return { rowspan: 1, colspan: 1 }\n            }\n          }\n        }\n        "]}},created:function(){for(var e=[],t=0;t<15;t++)e.push({a:"a"+t,b:"b"+t,c:"c"+t,d:"d"+t,e:"e"+t,f:"f"+t,g:"g"+t,h:"h"+t,i:"i"+t,j:"j"+t,k:"k"+t,l:"l"+t,m:"m"+t,n:"n"+t,o:"o"+t,p:"p"+t,q:"q"+t,r:"r"+t,s:"s"+t,t:"t"+t,u:"u"+t,v:"v"+t});this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{cellStyleMethod:function(e){for(var t=e.row,n=e.column,a=this.mergeCells,l=this.$refs.xTable,o=l._getRowIndex(t),i=l._getColumnIndex(n),r=0;r<a.length;r++){var s=a[r],c=s.row,d=s.col,u=s.style;if(u&&c===o&&d===i)return u}return null},mergeMethod:function(e){for(var t=e.row,n=e.column,a=this.mergeCells,l=this.$refs.xTable,o=l._getRowIndex(t),i=l._getColumnIndex(n),r=0;r<a.length;r++){var s=a[r],c=s.row,d=s.col,u=s.rowspan,m=s.colspan;if(c===o&&d===i)return{rowspan:u,colspan:m};if(o>=c&&o<c+u&&i>=d&&i<d+m)return{rowspan:0,colspan:0}}return{rowspan:1,colspan:1}}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"7d8e":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:"setFilter"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"updateData"}}),e._v(" 方法来处理复杂场景的筛选逻辑"),n("br"),e._v(" 进阶用法："),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererFilter"}}},[e._v("查看渲染器的使用")]),n("br")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.filterNameEvent}},[e._v("筛选 Name")]),n("vxe-button",{on:{click:e.filterAgeEvent}},[e._v("筛选 Age")]),n("vxe-button",{on:{click:e.updateNameFilterEvent}},[e._v("更改 Name 的筛选条件")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable.clearFilter(e.$refs.xTable.getColumnByField("age"))}}},[e._v("清除 Age 的筛选条件")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearFilter()}}},[e._v("清除所有的筛选条件")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","highlight-hover-row":"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",filters:[{label:"包含 z",value:"z"}],"filter-method":e.filterNameMethod}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",sortable:"",filters:[{data:""}],"filter-method":e.filterRoleMethod},scopedSlots:e._u([{key:"filter",fn:function(t){var a=t.$panel,l=t.column;return e._l(l.filters,(function(t,l){return n("select",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:l,staticClass:"my-select",on:{change:[function(n){var a=Array.prototype.filter.call(n.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(t,"data",n.target.multiple?a:a[0])},function(e){return a.changeOption(e,!!t.data,t)}]}},e._l(e.roleList,(function(t,a){return n("option",{key:a,domProps:{value:t}},[e._v(e._s(t))])})),0)}))}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",sortable:"","filter-multiple":!1,filters:[{label:"Man",value:"1"},{label:"Woman",value:"0"}]}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",filters:[{data:""}],"filter-method":e.filterAgeMethod},scopedSlots:e._u([{key:"filter",fn:function(t){var a=t.$panel,l=t.column;return[e._l(l.filters,(function(t,l){return[n("input",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:l,staticClass:"my-input",attrs:{type:"type",placeholder:"按回车确认筛选"},domProps:{value:t.data},on:{input:[function(n){n.target.composing||e.$set(t,"data",n.target.value)},function(e){return a.changeOption(e,!!t.data,t)}],keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:a.confirmFilter()}}})]}))]}}])}),n("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}}),n("vxe-table-column",{attrs:{field:"nickname",title:"实现复杂的筛选",filters:[{data:{type:"has",isCase:!0,name:""}}],"filter-render":{name:"FilterComplex"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("c975"),n("fb6a"),n("b0c0"),n("a9e3"),n("d3b7"),n("25f0"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData:[],roleList:["","前端","后端","设计师"],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="filterNameEvent">筛选 Name</vxe-button>\n            <vxe-button @click="filterAgeEvent">筛选 Age</vxe-button>\n            <vxe-button @click="updateNameFilterEvent">更改 Name 的筛选条件</vxe-button>\n            <vxe-button @click="$refs.xTable.clearFilter($refs.xTable.getColumnByField(\'age\'))">清除 Age 的筛选条件</vxe-button>\n            <vxe-button @click="$refs.xTable.clearFilter()">清除所有的筛选条件</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          ref="xTable"\n          height="400"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column\n            field="name"\n            title="Name"\n            sortable\n            :filters="[{ label: \'包含 z\', value: \'z\' }]"\n            :filter-method="filterNameMethod"></vxe-table-column>\n          <vxe-table-column\n            field="role"\n            title="Role"\n            sortable\n            :filters="[{ data: \'\' }]"\n            :filter-method="filterRoleMethod">\n            <template v-slot:filter="{ $panel, column }">\n              <select class="my-select" v-model="option.data" v-for="(option, index) in column.filters" :key="index" @change="$panel.changeOption($event, !!option.data, option)">\n                <option v-for="(label, cIndex) in roleList" :key="cIndex" :value="label">{{ label }}</option>\n              </select>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column\n            field="sex"\n            title="Sex"\n            sortable\n            :filter-multiple="false"\n            :filters="[{label: \'Man\', value: \'1\'}, {label: \'Woman\', value: \'0\'}]"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" :filters="[{ data: \'\' }]" :filter-method="filterAgeMethod">\n            <template v-slot:filter="{ $panel, column }">\n              <template v-for="(option, index) in column.filters">\n                <input class="my-input" type="type" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()" placeholder="按回车确认筛选">\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable></vxe-table-column>\n          <vxe-table-column\n            field="nickname"\n            title="实现复杂的筛选"\n            :filters="[{data: {type: \'has\', isCase: true, name: \'\'}}]"\n            :filter-render="{name: \'FilterComplex\'}">\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              roleList: ['', '前端', '后端', '设计师']\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n                  this.loading = false\n                  resolve()\n                }, 300)\n              })\n            },\n            filterNameMethod ({ value, row, column }) {\n              return XEUtils.toString(row.name).toLowerCase().indexOf(value) > -1\n            },\n            filterRoleMethod ({ option, row }) {\n              return row.role === option.data\n            },\n            filterAgeMethod ({ option, row }) {\n              return row.age === Number(option.data)\n            },\n            updateNameFilterEvent () {\n              const xTable = this.$refs.xTable\n              const column = xTable.getColumnByField('name')\n              // 修改筛选列表，并默认设置为选中状态\n              xTable.setFilter(column, [\n                { label: '包含 a', value: 'a' },\n                { label: '包含 b', value: 'b' },\n                { label: '包含 c', value: 'c', checked: true },\n                { label: '包含 h', value: 'h' },\n                { label: '包含 j', value: 'j' }\n              ])\n              // 修改条件之后，需要手动调用 updateData 处理表格数据\n              xTable.updateData()\n            },\n            filterNameEvent () {\n              const xTable = this.$refs.xTable\n              const column = xTable.getColumnByField('name')\n              // 修改第二个选项为勾选状态\n              const option = column.filters[1]\n              option.checked = true\n              // 修改条件之后，需要手动调用 updateData 处理表格数据\n              xTable.updateData()\n            },\n            filterAgeEvent () {\n              const xTable = this.$refs.xTable\n              const column = xTable.getColumnByField('age')\n              // 修改第一个选项为勾选状态\n              const option = column.filters[0]\n              option.data = '26'\n              option.checked = true\n              // 修改条件之后，需要手动调用 updateData 处理表格数据\n              xTable.updateData()\n            }\n          }\n        }\n        ","\n        .my-select {\n          margin: 10px;\n          width: 100px;\n          height: 32px;\n        }\n        .my-input {\n          margin: 10px;\n          width: 140px;\n          height: 32px;\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;return this.loading=!0,new Promise((function(t){setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,50),e.loading=!1,t()}),300)}))},filterNameMethod:function(e){var t=e.value,n=e.row;return i.a.toString(n.name).toLowerCase().indexOf(t)>-1},filterRoleMethod:function(e){var t=e.option,n=e.row;return n.role===t.data},filterAgeMethod:function(e){var t=e.option,n=e.row;return n.age===Number(t.data)},updateNameFilterEvent:function(){var e=this.$refs.xTable,t=e.getColumnByField("name");e.setFilter(t,[{label:"包含 a",value:"a"},{label:"包含 b",value:"b"},{label:"包含 c",value:"c",checked:!0},{label:"包含 h",value:"h"},{label:"包含 j",value:"j"}]),e.updateData()},filterNameEvent:function(){var e=this.$refs.xTable,t=e.getColumnByField("name"),n=t.filters[1];n.checked=!0,e.updateData()},filterAgeEvent:function(){var e=this.$refs.xTable,t=e.getColumnByField("age"),n=t.filters[0];n.data="26",n.checked=!0,e.updateData()}}},d=c,u=(n("9a8c"),n("2877")),m=Object(u["a"])(d,a,l,!1,null,"891e5cae",null);t["default"]=m.exports},8323: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:"id"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"custom-config"}}),e._v("={storage: true} 参数开启将列个性化 localStorage 保存功能"),n("br"),e._v(" 通过 "),n("table-api-link",{attrs:{prop:"custom"}}),e._v(" 事件实现显示/隐藏列服务端保存，通过 "),n("table-api-link",{attrs:{prop:"resizable-change"}}),e._v(" 事件实现列宽状态服务端保存 ")],1),n("vxe-toolbar",{attrs:{custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",[e._v("按钮1")]),n("vxe-button",[e._v("按钮2")])]},proxy:!0}])}),n("vxe-table",{attrs:{border:"",height:"400",id:"toolbar_demo3","custom-config":{storage:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar id="toolbar_demo3" custom>\n          <template v-slot:buttons>\n            <vxe-button>按钮1</vxe-button>\n            <vxe-button>按钮2</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          height="400"\n          id="toolbar_demo3"\n          :custom-config="{storage: true}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},8392:function(e,t,n){},"86f4":function(e,t,n){},"8b04":function(e,t,n){},"8e5c":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:"importData"}}),e._v(" 函数可以直接将数据导入表格中"),n("br"),e._v(" 如果是服务端导出，通过设置 "),n("table-api-link",{attrs:{prop:"remote"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"importMethod"}}),e._v(" 开启服务端自定义导入"),n("br"),n("span",{staticClass:"red"},[e._v("（注：附件中的字段名必须和表格一致，数据格式不正确将无法导入；前端导入的数据量有限，建议使用后端导入）")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.clearDataEvent}},[e._v("清空数据")]),n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("导出数据")]),n("vxe-button",{on:{click:e.importDataEvent}},[e._v("导入数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{"highlight-hover-row":"",height:"400","export-config":{isPrint:!1},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",formatter:e.formatterSex}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),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)},l=[],o=(n("7db0"),n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],sexList:[{label:"女",value:"0"},{label:"男",value:"1"}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="clearDataEvent">清空数据</vxe-button>\n            <vxe-button @click="exportDataEvent">导出数据</vxe-button>\n            <vxe-button @click="importDataEvent">导入数据</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          export-config\n          highlight-hover-row\n          ref="xTable"\n          height="400"\n          :export-config="{isPrint: false}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            formatterSex ({ cellValue }) {\n              const item = this.sexList.find(item => item.value === cellValue)\n              return item ? item.label : ''\n            },\n            clearDataEvent () {\n              this.tableData = []\n            },\n            exportDataEvent () {\n              this.$refs.xTable.openExport({\n                // 默认勾选源\n                original: true\n              })\n            },\n            importDataEvent () {\n              this.$refs.xTable.importData()\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{formatterSex:function(e){var t=e.cellValue,n=this.sexList.find((function(e){return e.value===t}));return n?n.label:""},clearDataEvent:function(){this.tableData=[]},exportDataEvent:function(){this.$refs.xTable.openExport({original:!0})},importDataEvent:function(){this.$refs.xTable.importData()}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"988e":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:"filter-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"iconMatch"}}),e._v(", "),n("table-api-link",{attrs:{prop:"iconMatch"}}),e._v("} 局部替换默认的图标")],1),n("vxe-table",{attrs:{border:"","highlight-hover-row":"",height:"400","filter-config":{iconNone:"fa fa-wheelchair",iconMatch:"fa fa-wheelchair-alt"},loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",filters:[{label:"前端",value:"前端"},{label:"后端",value:"后端"}]}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",sortable:"","filter-multiple":!1,filters:[{label:"Man",value:"1"},{label:"Woman",value:"0"}]}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",sortable:""}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("d3b7"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],demoCodes:['\n        <vxe-table\n          border\n          highlight-hover-row\n          height="400"\n          :filter-config="{iconNone: \'fa fa-wheelchair\', iconMatch: \'fa fa-wheelchair-alt\'}"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" :filters="[{label: \'前端\', value: \'前端\'}, {label: \'后端\', value: \'后端\'}]"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" sortable :filter-multiple="false" :filters="[{label: \'Man\', value: \'1\'}, {label: \'Woman\', value: \'0\'}]"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n                  this.loading = false\n                  resolve()\n                }, 300)\n              })\n            }\n          }\n        }\n        "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;return this.loading=!0,new Promise((function(t){setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,20),e.loading=!1,t()}),300)}))}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},9976: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("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 合并的逻辑都是自行实现的，该示例仅供参考）")],1)]),n("vxe-table",{attrs:{border:"",height:"600","span-method":e.rowspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name1",title:"功能模块"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-checkbox",{on:{change:function(t){return e.check1ChangeEvent(a,a.check1)}},model:{value:a.check1,callback:function(t){e.$set(a,"check1",t)},expression:"row.check1"}},[e._v(e._s(a.name1))])]}}])}),n("vxe-table-column",{attrs:{field:"name2",title:"详细功能"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-checkbox",{on:{change:function(t){return e.check2ChangeEvent(a,a.check2)}},model:{value:a.check2,callback:function(t){e.$set(a,"check2",t)},expression:"row.check2"}},[e._v(e._s(a.name2))])]}}])}),n("vxe-table-column",{attrs:{field:"name3",title:"权限类型"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-checkbox",{on:{change:function(t){return e.check3ChangeEvent(a,a.check3)}},model:{value:a.check3,callback:function(t){e.$set(a,"check3",t)},expression:"row.check3"}},[e._v(e._s(a.name3))])]}}])}),n("vxe-table-column",{attrs:{field:"name4",title:"权限列表"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-checkbox",{on:{change:function(t){return e.check4ChangeEvent(a,a.check4)}},model:{value:a.check4,callback:function(t){e.$set(a,"check4",t)},expression:"row.check4"}},[e._v(e._s(a.name4))])]}}])})],1),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)},l=[],o=(n("99af"),n("a623"),n("4de4"),n("4160"),n("a630"),n("caad"),n("b0c0"),n("d3b7"),n("3ca3"),n("159b"),n("ddb0"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="600"\n          :span-method="rowspanMethod"\n          :data="tableData">\n          <vxe-table-column field="name1" title="功能模块">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check1" @change="check1ChangeEvent(row, row.check1)">{{ row.name1 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name2" title="详细功能">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check2" @change="check2ChangeEvent(row, row.check2)">{{ row.name2 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name3" title="权限类型">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check3" @change="check3ChangeEvent(row, row.check3)">{{ row.name3 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name4" title="权限列表">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check4" @change="check4ChangeEvent(row, row.check4)">{{ row.name4 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            const treeData = XEUtils.toArrayTree(this.getList())\n            this.toColTreeData(treeData)\n          },\n          methods: {\n            check1ChangeEvent (row, checked) {\n              const { tableData } = this\n              let childList = tableData.filter(item => item.name1 === row.name1)\n              childList.forEach(item => {\n                item.check1 = checked\n              })\n              childList = this.tableData.filter(item => item.id1 === row.id1)\n              childList.forEach(item => {\n                this.check2ChangeEvent(item, checked)\n              })\n            },\n            check2ChangeEvent (row, checked) {\n              const { tableData } = this\n              let childList = tableData.filter(item => item.id1 === row.id1 && item.name2 === row.name2)\n              childList.forEach(item => {\n                item.check2 = checked\n              })\n              childList = this.tableData.filter(item => item.id2 === row.id2)\n              childList.forEach(item => {\n                this.check3ChangeEvent(item, checked)\n              })\n            },\n            check3ChangeEvent (row, checked) {\n              const { tableData } = this\n              let childList = tableData.filter(item => item.id2 === row.id2 && item.name3 === row.name3)\n              childList.forEach(item => {\n                item.check3 = checked\n              })\n              childList = tableData.filter(item => item.id3 === row.id3)\n              childList.forEach(item => {\n                this.check4ChangeEvent(item, checked)\n              })\n            },\n            check4ChangeEvent (row, checked) {\n              const { tableData } = this\n              let childList = tableData.filter(item => item.id3 === row.id3 && item.name4 === row.name4)\n              childList.forEach(item => {\n                item.check4 = checked\n              })\n              childList = tableData.filter(item => item.id3 === row.id3)\n              const isChecked3 = childList.every(item => item.check4)\n              childList.forEach(item => {\n                item.check3 = isChecked3\n              })\n              childList = tableData.filter(item => item.id2 === row.id2)\n              const isChecked2 = childList.every(item => item.check3)\n              childList.forEach(item => {\n                item.check2 = isChecked2\n              })\n              childList = tableData.filter(item => item.id1 === row.id1)\n              const isChecked1 = childList.every(item => item.check2)\n              childList.forEach(item => {\n                item.check1 = isChecked1\n              })\n            },\n            getList () {\n              const list = [\n                { id: '10000', parentId: null, name: '账号管理' },\n                { id: '11000', parentId: '10000', name: '用户管理' },\n                { id: '11100', parentId: '11000', name: '查看' },\n                { id: '11110', parentId: '11100', name: '用户列表' },\n                { id: '11200', parentId: '11000', name: '编辑' },\n                { id: '11210', parentId: '11200', name: '用户列表' },\n                { id: '11220', parentId: '11200', name: '新增用户' },\n                { id: '11300', parentId: '11000', name: '操作' },\n                { id: '11310', parentId: '11300', name: '新增' },\n                { id: '11320', parentId: '11300', name: '删除' },\n                { id: '11330', parentId: '11300', name: '修改' },\n                { id: '12000', parentId: '10000', name: '角色管理' },\n                { id: '12100', parentId: '12000', name: '查看' },\n                { id: '12110', parentId: '12100', name: '角色列表' },\n                { id: '12200', parentId: '12000', name: '编辑' },\n                { id: '122100', parentId: '12200', name: '角色列表' },\n                { id: '12220', parentId: '12200', name: '新增角色' },\n                { id: '12300', parentId: '12000', name: '操作' },\n                { id: '12310', parentId: '12300', name: '新增' },\n                { id: '12320', parentId: '12300', name: '删除' },\n                { id: '12330', parentId: '12300', name: '修改' },\n                { id: '20000', parentId: null, name: '个人中心' },\n                { id: '21000', parentId: '20000', name: '个性化设置' },\n                { id: '21100', parentId: '21000', name: '查看' },\n                { id: '21110', parentId: '21100', name: '信息列表' },\n                { id: '21200', parentId: '21000', name: '操作' },\n                { id: '21210', parentId: '21200', name: '重置信息' },\n                { id: '22000', parentId: '20000', name: '账户管理' },\n                { id: '22100', parentId: '22000', name: '查看' },\n                { id: '22110', parentId: '22100', name: '账户余额' },\n                { id: '22120', parentId: '22100', name: '帐变记录' }\n              ]\n              return list\n            },\n            // 将普通树结构转换为横向树列表\n            toColTreeData (treeData) {\n              const options = { children: 'children' }\n              const list = []\n              const keyMap = {}\n              XEUtils.eachTree(treeData, (item, index, result, paths, parent) => {\n                keyMap[item.id] = item\n                item.keys = parent ? parent.keys.concat([item.id]) : [item.id]\n                if (!item.children || !item.children.length) {\n                  const row = { }\n                  item.keys.forEach((key, index) => {\n                    const level = index + 1\n                    const obj = keyMap[key]\n                    row[`check${level}`] = false\n                    row[`id${level}`] = obj.id\n                    row[`name${level}`] = obj.name\n                  })\n                  list.push(row)\n                }\n              }, options)\n              this.keyMap = keyMap\n              this.tableData = list\n            },\n            // 通用行合并函数（将相同多列数据合并为一行）\n            rowspanMethod ({ row, $rowIndex, column, data }) {\n              const fields = ['name1', 'name2', 'name3']\n              const cellValue = XEUtils.get(row, column.property)\n              if (cellValue && fields.includes(column.property)) {\n                const prevRow = data[$rowIndex - 1]\n                let nextRow = data[$rowIndex + 1]\n                if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {\n                  return { rowspan: 0, colspan: 0 }\n                } else {\n                  let countRowspan = 1\n                  while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {\n                    nextRow = data[++countRowspan + $rowIndex]\n                  }\n                  if (countRowspan > 1) {\n                    return { rowspan: countRowspan, colspan: 1 }\n                  }\n                }\n              }\n            }\n          }\n        }\n        "]}},created:function(){var e=i.a.toArrayTree(this.getList());this.toColTreeData(e)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{check1ChangeEvent:function(e,t){var n=this,a=this.tableData,l=a.filter((function(t){return t.name1===e.name1}));l.forEach((function(e){e.check1=t})),l=this.tableData.filter((function(t){return t.id1===e.id1})),l.forEach((function(e){n.check2ChangeEvent(e,t)}))},check2ChangeEvent:function(e,t){var n=this,a=this.tableData,l=a.filter((function(t){return t.id1===e.id1&&t.name2===e.name2}));l.forEach((function(e){e.check2=t})),l=this.tableData.filter((function(t){return t.id2===e.id2})),l.forEach((function(e){n.check3ChangeEvent(e,t)}))},check3ChangeEvent:function(e,t){var n=this,a=this.tableData,l=a.filter((function(t){return t.id2===e.id2&&t.name3===e.name3}));l.forEach((function(e){e.check3=t})),l=a.filter((function(t){return t.id3===e.id3})),l.forEach((function(e){n.check4ChangeEvent(e,t)}))},check4ChangeEvent:function(e,t){var n=this.tableData,a=n.filter((function(t){return t.id3===e.id3&&t.name4===e.name4}));a.forEach((function(e){e.check4=t})),a=n.filter((function(t){return t.id3===e.id3}));var l=a.every((function(e){return e.check4}));a.forEach((function(e){e.check3=l})),a=n.filter((function(t){return t.id2===e.id2}));var o=a.every((function(e){return e.check3}));a.forEach((function(e){e.check2=o})),a=n.filter((function(t){return t.id1===e.id1}));var i=a.every((function(e){return e.check2}));a.forEach((function(e){e.check1=i}))},getList:function(){var e=[{id:"10000",parentId:null,name:"账号管理"},{id:"11000",parentId:"10000",name:"用户管理"},{id:"11100",parentId:"11000",name:"查看"},{id:"11110",parentId:"11100",name:"用户列表"},{id:"11200",parentId:"11000",name:"编辑"},{id:"11210",parentId:"11200",name:"用户列表"},{id:"11220",parentId:"11200",name:"新增用户"},{id:"11300",parentId:"11000",name:"操作"},{id:"11310",parentId:"11300",name:"新增"},{id:"11320",parentId:"11300",name:"删除"},{id:"11330",parentId:"11300",name:"修改"},{id:"12000",parentId:"10000",name:"角色管理"},{id:"12100",parentId:"12000",name:"查看"},{id:"12110",parentId:"12100",name:"角色列表"},{id:"12200",parentId:"12000",name:"编辑"},{id:"122100",parentId:"12200",name:"角色列表"},{id:"12220",parentId:"12200",name:"新增角色"},{id:"12300",parentId:"12000",name:"操作"},{id:"12310",parentId:"12300",name:"新增"},{id:"12320",parentId:"12300",name:"删除"},{id:"12330",parentId:"12300",name:"修改"},{id:"20000",parentId:null,name:"个人中心"},{id:"21000",parentId:"20000",name:"个性化设置"},{id:"21100",parentId:"21000",name:"查看"},{id:"21110",parentId:"21100",name:"信息列表"},{id:"21200",parentId:"21000",name:"操作"},{id:"21210",parentId:"21200",name:"重置信息"},{id:"22000",parentId:"20000",name:"账户管理"},{id:"22100",parentId:"22000",name:"查看"},{id:"22110",parentId:"22100",name:"账户余额"},{id:"22120",parentId:"22100",name:"帐变记录"}];return e},toColTreeData:function(e){var t={children:"children"},n=[],a={};i.a.eachTree(e,(function(e,t,l,o,i){if(a[e.id]=e,e.keys=i?i.keys.concat([e.id]):[e.id],!e.children||!e.children.length){var r={};e.keys.forEach((function(e,t){var n=t+1,l=a[e];r["check".concat(n)]=!1,r["id".concat(n)]=l.id,r["name".concat(n)]=l.name})),n.push(r)}}),t),this.keyMap=a,this.tableData=n},rowspanMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["name1","name2","name3"],r=i.a.get(t,a.property);if(r&&o.includes(a.property)){var s=l[n-1],c=l[n+1];if(s&&i.a.get(s,a.property)===r)return{rowspan:0,colspan:0};var d=1;while(c&&i.a.get(c,a.property)===r)c=l[++d+n];if(d>1)return{rowspan:d,colspan:1}}}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"99c3":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:"expand-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"iconOpen"}}),e._v(", "),n("table-api-link",{attrs:{prop:"iconClose"}}),e._v("} 局部替换默认的图标"),n("br"),e._v(" 也可以通过 "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义内容模板，还可以使用 "),n("router-link",{staticClass:"link",attrs:{to:{name:"RendererExpand"}}},[e._v("渲染器")]),e._v(" 创建可复用的展开行内容模板 ")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.toggleRowExpansion(e.tableData[1])}}},[e._v("切换第二行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setRowExpansion([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setAllRowExpansion(!0)}}},[e._v("设置所有行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearRowExpand()}}},[e._v("关闭所有行展开")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","expand-config":{iconOpen:"fa fa-minus-square",iconClose:"fa fa-plus-square"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",title:"Name"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(a.name))])]}},{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("还可以通过 "),n("table-api-link",{attrs:{prop:"expand-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"toggleMethod"}}),e._v("} 方法实现展开与关闭的细节处理，返回值用来决定是否允许继续执行")],1),n("vxe-table",{attrs:{border:"","expand-config":{toggleMethod:e.toggleExpandMethod},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",title:"Name"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(a.name))])]}},{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v("还可以通过 "),n("table-api-link",{attrs:{prop:"expand-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"visibleMethod"}}),e._v("} 方法实现权限控制，返回值用来决定是否显示展开按钮")],1),n("vxe-table",{attrs:{border:"","expand-config":{visibleMethod:e.expandVisibleMethod},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",title:"Name"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(a.name))])]}},{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          ref="xTable"\n          border\n          :expand-config="{iconOpen: \'fa fa-minus-square\', iconClose: \'fa fa-plus-square\'}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" title="Name">\n            <template v-slot="{ row, rowIndex }">\n              <span>{{ row.name }}</span>\n            </template>\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :expand-config="{toggleMethod: toggleExpandMethod}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" title="Name">\n            <template v-slot="{ row, rowIndex }">\n              <span>{{ row.name }}</span>\n            </template>\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          },\n          methods: {\n            toggleExpandMethod ({ expanded, row }) {\n              if (expanded) {\n                if (row.sex === '1') {\n                  this.$XModal.message({ id: 'openErr', message: '不允许展开', status: 'error' })\n                  return false\n                }\n              } else {\n                if (row.sex === '0') {\n                  this.$XModal.message({ id: 'closeErr', message: '不允许关闭', status: 'error' })\n                  return false\n                }\n              }\n              return true\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :expand-config="{visibleMethod: expandVisibleMethod}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" title="Name">\n            <template v-slot="{ row, rowIndex }">\n              <span>{{ row.name }}</span>\n            </template>\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          },\n          methods: {\n            expandVisibleMethod ({ row }) {\n              if (row.sex === '1') {\n                return false\n              }\n              return true\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{toggleExpandMethod:function(e){var t=e.expanded,n=e.row;if(t){if("1"===n.sex)return this.$XModal.message({id:"openErr",message:"不允许展开",status:"error"}),!1}else if("0"===n.sex)return this.$XModal.message({id:"closeErr",message:"不允许关闭",status:"error"}),!1;return!0},expandVisibleMethod:function(e){var t=e.row;return"1"!==t.sex}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"9a8c":function(e,t,n){"use strict";var a=n("8b04"),l=n.n(a);l.a},a1cc:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 通过 "),n("table-column-api-link",{attrs:{prop:"visible"}}),e._v(" 属性设置默认是否显示，也可以通过函数式调用 "),n("table-api-link",{attrs:{prop:"showColumn"}}),e._v("、"),n("table-api-link",{attrs:{prop:"hideColumn"}}),e._v(" 操作列的显示/隐藏"),n("br"),e._v(" 还可以通过动态修改列的 visible 属性，可以轻松实现远程读取配置后控制是否显示，最后调用 "),n("table-api-link",{attrs:{prop:"refreshColumn"}}),e._v(" 刷新列 ")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){e.$refs.xTable1.hideColumn(e.$refs.xTable1.getColumnByField("role"))}}},[e._v("隐藏role")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable1.showColumn(e.$refs.xTable1.getColumnByField("role"))}}},[e._v("显示role")]),n("vxe-button",{on:{click:function(t){e.$refs.xTable1.showColumn(e.$refs.xTable1.getColumnByField("sex"))}}},[e._v("显示sex")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable1.resetColumn()}}},[e._v("重置")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable1",attrs:{border:"",height:"200",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",visible:!1}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("如果是根据服务端数据控制显示/隐藏列，在获取到配置信息后动态更改列的 "),n("table-column-api-link",{attrs:{prop:"visible"}}),e._v(" 属性，然后调用 "),n("table-api-link",{attrs:{prop:"refreshColumn"}}),e._v(" 属性列即可")],1),n("div",[e._l(e.columns2,(function(t,a){return[n("vxe-checkbox",{key:a,on:{change:function(t){return e.$refs.xTable2.refreshColumn()}},model:{value:t.visible,callback:function(n){e.$set(t,"visible",n)},expression:"column.visible"}},[e._v(e._s(t.title))])]}))],2),n("vxe-table",{ref:"xTable2",attrs:{border:"",height:"200",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v("通过 "),n("table-column-api-link",{attrs:{prop:"visible"}}),e._v(" 属性设置默认是否显示，通过 "),n("table-api-link",{attrs:{prop:"resetColumn"}}),e._v(" 函数重置全部列为可视状态")],1),n("div",[e._l(e.columns3,(function(t,a){return[t.title?n("vxe-checkbox",{key:a,model:{value:t.visible,callback:function(n){e.$set(t,"visible",n)},expression:"column.visible"}},[e._v(e._s(t.title))]):e._e()]})),n("vxe-button",{on:{click:function(t){return e.$refs.xTable3.refreshColumn()}}},[e._v("刷新列信息")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable3.resetColumn()}}},[e._v("重置自定义列")])],2),n("vxe-table",{ref:"xTable3",attrs:{border:"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",visible:!1}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{title:"基本信息"}},[n("vxe-table-column",{attrs:{field:"sex",title:"Sex",visible:!1}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{title:"其他信息"}},[n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}}),n("vxe-table-column",{attrs:{field:"flag",title:"Flag"}})],1)],1)],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("caad"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],columns2:[],columns3:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable1.hideColumn($refs.xTable1.getColumnByField(\'role\'))">隐藏role</vxe-button>\n            <vxe-button @click="$refs.xTable1.showColumn($refs.xTable1.getColumnByField(\'role\'))">显示role</vxe-button>\n            <vxe-button @click="$refs.xTable1.showColumn($refs.xTable1.getColumnByField(\'sex\'))">显示sex</vxe-button>\n            <vxe-button @click="$refs.xTable1.resetColumn()">重置</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable1"\n          height="200"\n          :data="tableData">\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 8)\n          }\n        }\n        ",'\n        <div>\n          <template v-for="(column,index) in columns">\n            <vxe-checkbox v-model="column.visible" :key="index" @change="$refs.xTable.refreshColumn()">{{ column.title }}</vxe-checkbox>\n          </template>\n        </div>\n\n        <vxe-table\n          border\n          ref="xTable"\n          height="200"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              columns: []\n            }\n          },\n          created () {\n            // 获取所有列配置\n            this.$nextTick(() => {\n              this.columns = this.$refs.xTable.getColumns()\n            })\n            this.loading = true\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 8)\n            setTimeout(() => {\n              // 将指定列设置为隐藏状态\n              this.columns.forEach(column => {\n                if (['name'].includes(column.property)) {\n                  column.visible = false\n                }\n              })\n              if (this.$refs.xTable) {\n                this.$refs.xTable.refreshColumn()\n              }\n              this.loading = false\n            }, 800)\n          }\n        }\n        ",'\n        <div>\n          <template v-for="(column,index) in columns">\n            <vxe-checkbox v-if="column.title" v-model="column.visible" :key="index">{{ column.title }}</vxe-checkbox>\n          </template>\n          <vxe-button @click="$refs.xTable.refreshColumn()">刷新列信息</vxe-button>\n          <vxe-button @click="$refs.xTable.resetColumn()">重置自定义列</vxe-button>\n        </div>\n\n        <vxe-table\n          border\n          ref="xTable"\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" :visible="false"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column title="基本信息">\n            <vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column title="其他信息">\n              <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n              <vxe-table-column field="flag" title="Flag"></vxe-table-column>\n            </vxe-table-column>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              columns: []\n            }\n          },\n          created () {\n            // 获取所有列配置\n            this.$nextTick(() => {\n              this.columns = this.$refs.xTable.getColumns()\n            })\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 8)\n          }\n        }\n        "]}},created:function(){var e=this;this.$nextTick((function(){e.columns2=e.$refs.xTable2.getColumns(),e.columns3=e.$refs.xTable3.getColumns()})),this.loading=!0,this.tableData=window.MOCK_DATA_LIST.slice(0,8),setTimeout((function(){e.columns2.forEach((function(e){["name"].includes(e.property)&&(e.visible=!1)})),e.$refs.xTable2&&e.$refs.xTable2.refreshColumn(),e.loading=!1}),800)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},ad77:function(e,t,n){},b9c70:function(e,t,n){},c07b: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:"cell-click"}}),e._v("、"),n("table-api-link",{attrs:{prop:"cell-dblclick"}}),e._v(" ...等常用事件")],1),n("vxe-table",{attrs:{border:"","context-menu":"","highlight-hover-row":"","show-overflow":"",resizable:"",height:"500",data:e.tableData},on:{"header-cell-click":e.headerCellClickEvent,"header-cell-dblclick":e.headerCellDBLClickEvent,"header-cell-context-menu":e.headerCellContextMenuEvent,"cell-click":e.cellClickEvent,"cell-dblclick":e.cellDBLClickEvent,"cell-mouseenter":e.cellMouseenterEvent,"cell-mouseleave":e.cellMouseleaveEvent,"cell-context-menu":e.cellContextMenuEvent,scroll:e.scrollEvent}},[n("vxe-table-column",{attrs:{type:"seq",title:"序号",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",width:"300"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",width:"300"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",width:"300"}}),n("vxe-table-column",{attrs:{field:"date",title:"Date",width:"300"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",fixed:"right",width:"300"}})],1),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)},l=[],o=(n("99af"),n("4160"),n("a630"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          context-menu\n          highlight-hover-row\n          show-overflow\n          resizable\n          height="500"\n          :data="tableData"\n          @header-cell-click="headerCellClickEvent"\n          @header-cell-dblclick="headerCellDBLClickEvent"\n          @header-cell-context-menu="headerCellContextMenuEvent"\n          @cell-click="cellClickEvent"\n          @cell-dblclick="cellDBLClickEvent"\n          @cell-mouseenter="cellMouseenterEvent"\n          @cell-mouseleave="cellMouseleaveEvent"\n          @cell-context-menu="cellContextMenuEvent"\n          @scroll="scrollEvent">\n          <vxe-table-column type="seq" title="序号" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>\n          <vxe-table-column field="date" title="Date" width="300"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" fixed="right" width="300"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            headerCellClickEvent ({ column }) {\n              console.log(`表头单元格点击${column.title}`)\n            },\n            headerCellDBLClickEvent ({ column }) {\n              console.log(`表头单元格双击${column.title}`)\n            },\n            headerCellContextMenuEvent ({ column }) {\n              console.log(`右键列 ${column.title}`)\n            },\n            cellClickEvent ({ column }) {\n              console.log(`单元格点击${column.title}`)\n            },\n            cellDBLClickEvent ({ column }) {\n              console.log(`单元格双击${column.title}`)\n            },\n            cellMouseenterEvent ({ column }) {\n              console.log(`鼠标进入单元格${column.title}`)\n            },\n            cellMouseleaveEvent ({ column }) {\n              console.log(`鼠标离开单元格${column.title}`)\n            },\n            cellContextMenuEvent ({ row }) {\n              console.log(`右键行 ${row.name}`)\n            },\n            scrollEvent ({ scrollTop, scrollLeft }) {\n              console.log(`滚动事件scrollTop=${scrollTop} scrollLeft=${scrollLeft}`)\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},methods:{headerCellClickEvent:function(e){var t=e.column;console.log("表头单元格点击".concat(t.title))},headerCellDBLClickEvent:function(e){var t=e.column;console.log("表头单元格双击".concat(t.title))},headerCellContextMenuEvent:function(e){var t=e.column;console.log("右键列 ".concat(t.title))},cellClickEvent:function(e){var t=e.column;console.log("单元格点击".concat(t.title))},cellDBLClickEvent:function(e){var t=e.column;console.log("单元格双击".concat(t.title))},cellMouseenterEvent:function(e){var t=e.column;console.log("鼠标进入单元格".concat(t.title))},cellMouseleaveEvent:function(e){var t=e.column;console.log("鼠标离开单元格".concat(t.title))},cellContextMenuEvent:function(e){var t=e.row;console.log("右键行 ".concat(t.name))},scrollEvent:function(e){var t=e.scrollTop,n=e.scrollLeft;console.log("滚动事件scrollTop=".concat(t," scrollLeft=").concat(n))}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},c3db: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:"checkbox-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"range"}}),e._v("} 启用，还可以同时按住 ctrl 键取消/勾选不连续的行")],1),n("vxe-table",{attrs:{border:"","checkbox-config":{trigger:"row",highlight:!0,range:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"80"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          :checkbox-config="{trigger: \'row\', highlight: true, range: true}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="time" title="Time"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},c41b: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-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"500",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",formatter:e.formatterSex}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}}),n("vxe-table-column",{attrs:{title:"操作",width:"100","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("vxe-button",{attrs:{type:"text",icon:"fa fa-edit"},on:{click:function(t){return e.editEvent(a)}}}),n("vxe-button",{attrs:{type:"text",icon:"fa fa-trash-o"}})]}}])})],1),n("vxe-modal",{ref:"xModal",attrs:{title:"编辑&保存",width:"800",resize:"","destroy-on-close":""},model:{value:e.showEdit,callback:function(t){e.showEdit=t},expression:"showEdit"}},[n("vxe-form",{attrs:{data:e.formData,rules:e.formRules,"title-align":"right","title-width":"100"},on:{submit:e.submitEvent}},[n("vxe-form-item",{attrs:{title:"Basic information",span:"24","title-align":"left","title-width":"200px","title-prefix":{icon:"fa fa-address-card-o"}}}),n("vxe-form-item",{attrs:{title:"Name",field:"name",span:"12","item-render":{name:"input",attrs:{placeholder:"请输入名称"}}}}),n("vxe-form-item",{attrs:{title:"Nickname",field:"nickname",span:"12","item-render":{name:"input",attrs:{placeholder:"请输入昵称"}}}}),n("vxe-form-item",{attrs:{title:"Role",field:"role",span:"12","item-render":{name:"input",attrs:{placeholder:"请输入角色"}}}}),n("vxe-form-item",{attrs:{title:"Sex",field:"sex",span:"12","item-render":{name:"$select",options:e.sexList}}}),n("vxe-form-item",{attrs:{title:"Age",field:"age",span:"12","item-render":{name:"input",attrs:{type:"number",placeholder:"请输入年龄"}}}}),n("vxe-form-item",{attrs:{title:"Other information",span:"24","title-align":"left","title-width":"200px","title-prefix":{message:"请填写必填项",icon:"fa fa-info-circle"}}}),n("vxe-form-item",{attrs:{title:"Number",field:"num",span:"12","item-render":{name:"input",attrs:{type:"number",placeholder:"请输入数值"}}}}),n("vxe-form-item",{attrs:{title:"Date",field:"date3",span:"12","item-render":{name:"input",attrs:{type:"date",placeholder:"请选择日期"}}}}),n("vxe-form-item",{attrs:{title:"Address",field:"address",span:"24","title-suffix":{message:"啦啦啦，就是这么强大！！！",icon:"fa fa-question-circle"},"item-render":{name:"textarea",attrs:{placeholder:"请输入地址"}}}}),n("vxe-form-item",{attrs:{align:"center",span:"24"}},[n("vxe-button",{attrs:{type:"submit",status:"primary"}},[e._v("保存")]),n("vxe-button",{attrs:{type:"reset"}},[e._v("重置")]),n("vxe-button",{on:{click:function(t){return e.$refs.xModal.close()}}},[e._v("取消")])],1)],1)],1),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)},l=[],o=(n("7db0"),n("4160"),n("a630"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],selectRow:null,showEdit:!1,sexList:[{label:"",value:""},{label:"女",value:"0"},{label:"男",value:"1"}],formData:null,formRules:{name:[{required:!0,message:"请输入名称"},{min:3,max:5,message:"长度在 3 到 5 个字符"}],nickname:[{required:!0,message:"请输入昵称"}],sex:[{required:!0,message:"请选择性别"}]},demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          highlight-current-row\n          height="500"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n          <vxe-table-column title="操作" width="100" show-overflow>\n            <template v-slot="{ row }">\n              <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>\n              <vxe-button type="text" icon="fa fa-trash-o"></vxe-button>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n\n        <vxe-modal ref="xModal" v-model="showEdit" title="编辑&保存" width="800" resize destroy-on-close>\n          <vxe-form :data="formData" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent">\n            <vxe-form-item title="Basic information" span="24" title-align="left" title-width="200px" :title-prefix="{icon: \'fa fa-address-card-o\'}"></vxe-form-item>\n            <vxe-form-item title="Name" field="name" span="12" :item-render="{name: \'input\', attrs: {placeholder: \'请输入名称\'}}"></vxe-form-item>\n            <vxe-form-item title="Nickname" field="nickname" span="12" :item-render="{name: \'input\', attrs: {placeholder: \'请输入昵称\'}}"></vxe-form-item>\n            <vxe-form-item title="Role" field="role" span="12" :item-render="{name: \'input\', attrs: {placeholder: \'请输入角色\'}}"></vxe-form-item>\n            <vxe-form-item title="Sex" field="sex" span="12" :item-render="{name: \'$select\', options: sexList}"></vxe-form-item>\n            <vxe-form-item title="Age" field="age" span="12" :item-render="{name: \'input\', attrs: {type: \'number\', placeholder: \'请输入年龄\'}}"></vxe-form-item>\n            <vxe-form-item title="Other information" span="24" title-align="left" title-width="200px" :title-prefix="{message: \'请填写必填项\', icon: \'fa fa-info-circle\'}"></vxe-form-item>\n            <vxe-form-item title="Number" field="num" span="12" :item-render="{name: \'input\', attrs: {type: \'number\', placeholder: \'请输入数值\'}}"></vxe-form-item>\n            <vxe-form-item title="Date" field="date3" span="12" :item-render="{name: \'input\', attrs: {type: \'date\', placeholder: \'请选择日期\'}}"></vxe-form-item>\n            <vxe-form-item title="Address" field="address" span="24" :title-suffix="{message: \'啦啦啦，就是这么强大！！！\', icon: \'fa fa-question-circle\'}" :item-render="{name: \'textarea\', attrs: {placeholder: \'请输入地址\'}}"></vxe-form-item>\n            <vxe-form-item align="center" span="24">\n              <vxe-button type="submit" status="primary">保存</vxe-button>\n              <vxe-button type="reset">重置</vxe-button>\n              <vxe-button @click="$refs.xModal.close()">取消</vxe-button>\n            </vxe-form-item>\n          </vxe-form>\n        </vxe-modal>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              selectRow: null,\n              showEdit: false,\n              sexList: [\n                { label: '', value: '' },\n                { label: '女', value: '0' },\n                { label: '男', value: '1' }\n              ],\n              formData: null,\n              formRules: {\n                name: [\n                  { required: true, message: '请输入名称' },\n                  { min: 3, max: 5, message: '长度在 3 到 5 个字符' }\n                ],\n                nickname: [\n                  { required: true, message: '请输入昵称' }\n                ],\n                sex: [\n                  { required: true, message: '请选择性别' }\n                ]\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            formatterSex ({ cellValue }) {\n              const item = this.sexList.find(item => item.value === cellValue)\n              return item ? item.label : ''\n            },\n            editEvent (row) {\n              this.formData = {\n                name: row.name,\n                nickname: row.nickname,\n                role: row.role,\n                sex: row.sex,\n                age: row.age,\n                num: row.num,\n                date3: row.date3,\n                address: row.address\n              }\n              this.showEdit = true\n            },\n            submitEvent () {\n              this.showEdit = false\n              this.$XModal.message({ message: '保存成功', status: 'success' })\n              Object.assign(this.selectRow, this.formData)\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{formatterSex:function(e){var t=e.cellValue,n=this.sexList.find((function(e){return e.value===t}));return n?n.label:""},editEvent:function(e){this.formData={name:e.name,nickname:e.nickname,role:e.role,sex:e.sex,age:e.age,num:e.num,date3:e.date3,address:e.address},this.selectRow=e,this.showEdit=!0},submitEvent:function(){this.showEdit=!1,this.$XModal.message({message:"保存成功",status:"success"}),Object.assign(this.selectRow,this.formData)}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},c82b: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:"exportData"}}),e._v(" 函数指定 type='csv' 可以直接将表格导出为 CSV/HTML/XML/TXT 格式的文件；"),n("br"),e._v(" 默认会排除 field 为空和 type 相关的功能列，可以通过自定义 "),n("table-api-link",{attrs:{prop:"data"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"columns"}}),e._v(" 导出数据"),n("br"),e._v(" 对于 csv 等特殊类型，可以通过设置 "),n("table-column-api-link",{attrs:{prop:"cell-type"}}),e._v(" 将数值类型转为字符串类型"),n("br"),e._v(" 如果是服务端导出，通过设置 "),n("table-api-link",{attrs:{prop:"remote"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"exportMethod"}}),e._v(" 开启服务端自定义导出"),n("br"),n("span",{staticClass:"red"},[e._v("（注：只支持基本数据结构，目前不支持分组、合并等；树结构和虚拟滚动只允许导出数据源，前端导出的数据量有限，建议使用后端导出）")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("默认导出")]),n("vxe-button",{on:{click:e.exportSelectEvent}},[e._v("导出选中")]),n("vxe-button",{on:{click:e.openExportEvent}},[e._v("高级导出")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable1",attrs:{"highlight-hover-row":"","export-config":"",border:"inner",height:"300",data:e.tableData1}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"自动转换"}}),n("vxe-table-column",{attrs:{field:"amount",title:"导出数值","cell-type":"number"}}),n("vxe-table-column",{attrs:{field:"num",title:"导出字符串","cell-type":"string",sortable:""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("配置 "),n("table-api-link",{attrs:{prop:"columnFilterMethod"}}),e._v(" 参数过滤指定列")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent2}},[e._v("导出指定列 [name,sex]")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable2",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v("配置 "),n("table-api-link",{attrs:{prop:"dataFilterMethod"}}),e._v(" 参数过滤指定行")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent3}},[e._v("导出指定第10-20行")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable3",attrs:{"show-footer":"","highlight-hover-row":"",height:"300","footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",formatter:e.formatterSex}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("不导出表头，指定文件名，导出源数据,格式化数据")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCurrDataEvent4}},[e._v("导出当前页")]),n("vxe-button",{on:{click:e.exportDataEvent4}},[e._v("自定义数据导出")]),n("vxe-button",{on:{click:e.exportAllDataEvent4}},[e._v("全量导出后台数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable4",attrs:{border:"","show-footer":"","highlight-hover-row":"",height:"300",loading:e.loading,"footer-method":e.footerMethod,data:e.tableData4}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",formatter:e.formatterSex}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}})],1),n("vxe-pager",{attrs:{loading:e.loading,"current-page":e.tablePage4.currentPage,"page-size":e.tablePage4.pageSize,total:e.tablePage4.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[6]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},l=[],o=(n("99af"),n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("628a"),s=n.n(r),c=n("1487"),d=n.n(c),u={data:function(){return{loading:!1,tableData:[],tableData1:[{name:"test1",amount:"12953.6985",num:1259326},{name:"154645623546345",amount:"45646464888888654654",num:4564566456645},{name:1231242,amount:"4564564545646.6985",num:0},{name:!0,amount:"12953.6985",num:54646646},{name:"0",amount:"0",num:"645645645665567645234326456"},{name:!1,amount:"1231231213123.456",num:"45645645645646456"},{name:"test2",amount:"99999.08",num:9999.88}],tableData4:[],tablePage4:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent">默认导出</vxe-button>\n            <vxe-button @click="exportSelectEvent">导出选中</vxe-button>\n            <vxe-button @click="openExportEvent">高级导出</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          highlight-hover-row\n          export-config\n          border="inner"\n          ref="xTable1"\n          height="300"\n          :data="tableData1">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="自动转换"></vxe-table-column>\n          <vxe-table-column field="amount" title="导出数值" cell-type="number"></vxe-table-column>\n          <vxe-table-column field="num" title="导出字符串" cell-type="string" sortable></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData1: [\n                { name: 'test1', amount: '12953.6985', num: 1259326 },\n                { name: '154645623546345', amount: '45646464888888654654', num: 4564566456645 },\n                { name: 1231242, amount: '4564564545646.6985', num: 0 },\n                { name: true, amount: '12953.6985', num: 54646646 },\n                { name: '0', amount: '0', num: '645645645665567645234326456' },\n                { name: false, amount: '1231231213123.456', num: '45645645645646456' },\n                { name: 'test2', amount: '99999.08', num: 9999.88 }\n              ]\n            }\n          },\n          methods: {\n            exportDataEvent () {\n              this.$refs.xTable1.exportData({ type: 'csv' })\n            },\n            exportSelectEvent () {\n              this.$refs.xTable1.exportData({\n                data: this.$refs.xTable1.getCheckboxRecords()\n              })\n            },\n            openExportEvent () {\n              this.$refs.xTable1.openExport({ isPrint: false })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent2">导出指定列 [name,sex]</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          highlight-hover-row\n          ref="xTable2"\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            exportDataEvent2 () {\n              this.$refs.xTable2.exportData({\n                type: 'csv',\n                columnFilterMethod: column => ['name', 'sex'].includes(column.property)\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent3">导出指定第10-20行</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          show-footer\n          highlight-hover-row\n          height="300"\n          ref="xTable3"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            formatterSex ({ cellValue }) {\n              if (cellValue === '1') {\n                return '男'\n              } else if (cellValue === '0') {\n                return '女'\n              }\n              return cellValue\n            },\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age'].includes(column.property)) {\n                    return XEUtils.mean(data, column.property)\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\n            exportDataEvent3 () {\n              this.$refs.xTable3.exportData({\n                type: 'csv',\n                dataFilterMethod: (row, rowIndex) => rowIndex >= 9 && rowIndex < 20\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportCurrDataEvent4">导出当前页</vxe-button>\n            <vxe-button @click="exportDataEvent4">自定义数据导出</vxe-button>\n            <vxe-button @click="exportAllDataEvent4">全量导出后台数据</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          show-footer\n          highlight-hover-row\n          ref="xTable4"\n          height="300"\n          :loading="loading"\n          :footer-method="footerMethod"\n          :data="tableData4">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" :formatter="formatterSex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          :loading="loading"\n          :current-page="tablePage4.currentPage"\n          :page-size="tablePage4.pageSize"\n          :total="tablePage4.totalResult"\n          :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n          @page-change="handlePageChange">\n        </vxe-pager>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData4: [],\n              tablePage4: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              }\n            }\n          },\n          created () {\n            this.findList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.get(`/api/user/page/list/${this.tablePage4.pageSize}/${this.tablePage4.currentPage}`).then(({ page, result }) => {\n                this.tableData4 = result\n                this.tablePage4.totalResult = page.totalResult\n                this.loading = false\n              }).catch(e => {\n                this.loading = false\n              })\n            },\n            handlePageChange ({ currentPage, pageSize }) {\n              this.tablePage4.currentPage = currentPage\n              this.tablePage4.pageSize = pageSize\n              this.findList()\n            },\n            formatterSex ({ cellValue }) {\n              if (cellValue === '1') {\n                return '男'\n              } else if (cellValue === '0') {\n                return '女'\n              }\n              return cellValue\n            },\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age'].includes(column.property)) {\n                    return XEUtils.mean(data, column.property)\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\n            exportCurrDataEvent4 () {\n              this.$refs.xTable4.exportData({\n                filename: '自定义文件名',\n                type: 'html',\n                isHeader: true,\n                isFooter: true\n              })\n            },\n            exportDataEvent4 () {\n              this.$refs.xTable4.exportData({\n                filename: '自定义文件名',\n                type: 'html',\n                isHeader: true,\n                isFooter: true,\n                // 自定义导出的数据源\n                data: [\n                  { name: 'Name1', sex: '男', age: 26, role: '前端' },\n                  { name: 'Name2', sex: '女', age: 20, role: '测试' },\n                  { name: 'Name3', sex: '男', age: 32, role: '后端' },\n                  { name: 'Name4', sex: '女', age: 22, role: '设计师' }\n                ]\n              })\n            },\n            exportAllDataEvent4 () {\n              this.loading = true\n              XEAjax.get('/api/user/full').then(data => {\n                this.$refs.xTable4.exportData({\n                  filename: '自定义文件名',\n                  type: 'csv',\n                  isHeader: true,\n                  isFooter: true,\n                  data\n                })\n                this.loading = false\n              }).catch(e => {\n                this.loading = false\n              })\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50),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,s.a.get("/api/user/page/list/".concat(this.tablePage4.pageSize,"/").concat(this.tablePage4.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData4=a,e.tablePage4.totalResult=n.totalResult,e.loading=!1})).catch((function(){e.loading=!1}))},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage4.currentPage=t,this.tablePage4.pageSize=n,this.findList()},formatterSex:function(e){var t=e.cellValue;return"1"===t?"男":"0"===t?"女":t},footerMethod:function(e){var t=e.columns,n=e.data,a=[t.map((function(e,t){return 0===t?"平均":["age"].includes(e.property)?i.a.mean(n,e.property):null}))];return a},exportDataEvent:function(){this.$refs.xTable1.exportData({type:"csv"})},exportSelectEvent:function(){this.$refs.xTable1.exportData({data:this.$refs.xTable1.getCheckboxRecords()})},openExportEvent:function(){this.$refs.xTable1.openExport({isPrint:!1})},exportDataEvent2:function(){this.$refs.xTable2.exportData({type:"csv",columnFilterMethod:function(e){return["name","sex"].includes(e.property)}})},exportDataEvent3:function(){this.$refs.xTable3.exportData({type:"csv",dataFilterMethod:function(e,t){return t>=9&&t<20}})},exportCurrDataEvent4:function(){this.$refs.xTable4.exportData({filename:"自定义文件名",type:"html",isHeader:!0,isFooter:!0})},exportDataEvent4:function(){this.$refs.xTable4.exportData({filename:"自定义文件名",type:"html",isHeader:!0,isFooter:!0,data:[{name:"Name1",sex:"男",age:26,role:"前端"},{name:"Name2",sex:"女",age:20,role:"测试"},{name:"Name3",sex:"男",age:32,role:"后端"},{name:"Name4",sex:"女",age:22,role:"设计师"}]})},exportAllDataEvent4:function(){var e=this;this.loading=!0,s.a.get("/api/user/full").then((function(t){e.$refs.xTable4.exportData({filename:"自定义文件名",type:"csv",isHeader:!0,isFooter:!0,data:t}),e.loading=!1})).catch((function(){e.loading=!1}))}}},m=u,v=n("2877"),b=Object(v["a"])(m,a,l,!1,null,null,null);t["default"]=b.exports},c88d:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("自定义列头排序的实现，你可以把表格封装成子组件进行定制，通过 "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 非常简单就可以实现自定义排序，通过设置 "),n("table-column-api-link",{attrs:{prop:"showIcon"}}),e._v(" 可以去掉内置排序图标")],1),n("vxe-table",{ref:"xTable",staticClass:"my-sort",attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData,"sort-config":{showIcon:!1}},on:{"header-cell-click":e.headerCellClickEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",filters:[{label:"id大于10",value:10},{label:"id大于40",value:40}],"filter-method":e.filterNameMethod},scopedSlots:e._u([{key:"header",fn:function(t){var a=t.column;return[n("span",[e._v(e._s(a.title))]),n("span",{staticClass:"custom-sort",class:{"is-order":a.order}},[n("i",{staticClass:"fa",class:[a.order?"fa-sort-alpha-"+a.order:"fa-long-arrow-down"]})])]}}])}),n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:""},scopedSlots:e._u([{key:"header",fn:function(t){var a=t.column;return[n("span",[e._v(e._s(a.title))]),n("span",{staticClass:"custom-sort",class:{"is-order":a.order}},[n("i",{staticClass:"fa",class:[a.order?"fa-sort-numeric-"+a.order:"fa-long-arrow-down"]})])]}}])}),n("vxe-table-column",{attrs:{field:"amount",title:"Amount",formatter:e.formatAmount,sortable:""},scopedSlots:e._u([{key:"header",fn:function(t){var a=t.column;return[n("span",[e._v(e._s(a.title))]),n("span",{staticClass:"custom-sort",class:{"is-order":a.order}},[n("i",{staticClass:"fa",class:[a.order?"fa-sort-amount-"+a.order:"fa-long-arrow-down"]})])]}}])})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          highlight-current-row\n          class="my-sort"\n          ref="xTable"\n          height="300"\n          :data="tableData"\n          :sort-config="{showIcon: false}"\n          @header-cell-click="headerCellClickEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable :filters="[{label: \'id大于10\', value: 10}, {label: \'id大于40\', value: 40}]" :filter-method="filterNameMethod">\n            <template v-slot:header="{ column }">\n              <span>{{ column.title }}</span>\n              <span class="custom-sort" :class="{\'is-order\': column.order}">\n                <i class="fa" :class="[column.order ? `fa-sort-alpha-${column.order}` : \'fa-long-arrow-down\']"></i>\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="role" title="Role"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" sortable>\n            <template v-slot:header="{ column }">\n              <span>{{ column.title }}</span>\n              <span class="custom-sort" :class="{\'is-order\': column.order}">\n                <i class="fa" :class="[column.order ? `fa-sort-numeric-${column.order}` : \'fa-long-arrow-down\']"></i>\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="amount" title="Amount" :formatter="formatAmount" sortable>\n            <template v-slot:header="{ column }">\n              <span>{{ column.title }}</span>\n              <span class="custom-sort" :class="{\'is-order\': column.order}">\n                <i class="fa" :class="[column.order ? `fa-sort-amount-${column.order}` : \'fa-long-arrow-down\']"></i>\n              </span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        \n        ","\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n          },\n          methods: {\n            headerCellClickEvent ({ column, triggerResizable, triggerSort, triggerFilter }) {\n              // 如果触发了列的其他功能按钮\n              if (column.sortable && !(triggerResizable || triggerSort || triggerFilter)) {\n                if (column.order === 'desc') {\n                  this.$refs.xTable.clearSort()\n                } else if (column.order === 'asc') {\n                  this.$refs.xTable.sort(column.property, 'desc')\n                } else {\n                  this.$refs.xTable.sort(column.property, 'asc')\n                }\n              }\n            },\n            formatAmount ({ cellValue }) {\n              return XEUtils.commafy(cellValue)\n            },\n            filterNameMethod ({ value, row, column }) {\n              return row.id >= value\n            }\n          }\n        }\n        ","\n        .my-sort .custom-sort {\n          padding: 0 4px;\n        }\n        .my-sort .custom-sort.is-order {\n          color: #409eff;\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{headerCellClickEvent:function(e){var t=e.column,n=e.triggerResizable,a=e.triggerSort,l=e.triggerFilter;t.sortable&&!(n||a||l)&&("desc"===t.order?this.$refs.xTable.clearSort():"asc"===t.order?this.$refs.xTable.sort(t.property,"desc"):this.$refs.xTable.sort(t.property,"asc"))},formatAmount:function(e){var t=e.cellValue;return i.a.commafy(t)},filterNameMethod:function(e){var t=e.value,n=e.row;return n.id>=t}}},d=c,u=(n("e1b0"),n("2877")),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},cd2e: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:"max-height"}}),e._v(" 启用，当数据少时自适应")],1),n("vxe-table",{attrs:{border:"",resizable:"","show-footer":"","show-overflow":"","max-height":"400",loading:e.loading,data:e.tableData1,"footer-method":e.footerMethod}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"120"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"120"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region",width:"200"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address",width:"300","show-overflow":""}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),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-table",{attrs:{border:"",resizable:"","show-footer":"","show-overflow":"","max-height":"400",loading:e.loading,data:e.tableData2,"footer-method":e.footerMethod}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"100"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"",width:"200"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",width:"120"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"120"}}),n("vxe-table-column",{attrs:{field:"time",title:"Time",width:"200"}}),n("vxe-table-column",{attrs:{field:"updateTime",title:"UpdateTime",width:"200"}}),n("vxe-table-column",{attrs:{field:"createTime",title:"CreateTime",width:"200"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("b680"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{loading:!1,tableData1:[],tableData2:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          show-footer\n          show-overflow\n          max-height="400"\n          :loading="loading"\n          :data="tableData"\n          :footer-method="footerMethod">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" width="100"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="120"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate" width="120"></vxe-table-column>\n          <vxe-table-column field="region" title="Region" width="200"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" width="300" show-overflow></vxe-table-column>\n          <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n          <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n              this.loading = false\n            }, 300)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.mean(data, column.property).toFixed(2)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          resizable\n          show-footer\n          show-overflow\n          max-height="400"\n          :loading="loading"\n          :data="tableData"\n          :footer-method="footerMethod">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" width="100"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" width="120"></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate" width="120"></vxe-table-column>\n          <vxe-table-column field="time" title="Time" width="200"></vxe-table-column>\n          <vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>\n          <vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.loading = true\n            setTimeout(() => {\n              this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n              this.loading = false\n            }, 300)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.mean(data, column.property).toFixed(2)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            }\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData1=window.MOCK_DATA_LIST.slice(0,3),e.tableData2=window.MOCK_DATA_LIST.slice(0,50),e.loading=!1}),300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{footerMethod:function(e){var t=e.columns,n=e.data,a=[t.map((function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?i.a.mean(n,e.property).toFixed(2):null})),t.map((function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?i.a.sum(n,e.property):null}))];return a}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},d0fc: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:"expand-config"}}),e._v("={"),n("table-api-link",{attrs:{prop:"lazy"}}),e._v(", "),n("table-api-link",{attrs:{prop:"loadMethod"}}),e._v("} 加载方法来开启懒加载"),n("br")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.toggleRowExpansion(e.tableData[1])}}},[e._v("切换第二行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setRowExpansion([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setAllRowExpansion(!0)}}},[e._v("设置所有行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearRowExpand()}}},[e._v("关闭所有行展开")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",data:e.tableData,"expand-config":{lazy:!0,loadMethod:e.loadContentMethod}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"80"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row;return[n("ul",e._l(a.detailList,(function(t,a){return n("li",{key:a},[n("span",[e._v("Role: "+e._s(t.role))]),n("span",{staticStyle:{"margin-left":"100px"}},[e._v(" Age: "+e._s(t.age))]),n("span",{staticStyle:{"margin-left":"100px"}},[e._v(" Sex: "+e._s(t.sex))])])})),0)]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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-table",{attrs:{border:"",data:e.tableData2,"expand-config":{accordion:!0,lazy:!0,loadMethod:e.loadContentMethod2}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"80"},scopedSlots:e._u([{key:"content",fn:function(e){var t=e.row;return[n("vxe-grid",{attrs:{columns:t.childCols,data:t.childData}})]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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)},l=[],o=(n("4160"),n("a630"),n("d3b7"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[{name:"Develop",age:20,sex:"女",detailList:[]},{name:"Develop",age:22,sex:"女",detailList:[]},{name:"Develop",age:24,sex:"男",detailList:[]},{name:"Develop",age:26,sex:"女",detailList:[]}],tableData2:[{name:"Develop",age:20,sex:"女",childCols:[],childData:[]},{name:"Develop",age:22,sex:"女",childCols:[],childData:[]},{name:"Develop",age:24,sex:"男",childCols:[],childData:[]},{name:"Develop",age:26,sex:"女",childCols:[],childData:[]}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.toggleRowExpansion(tableData[1])">切换第二行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.setRowExpansion([tableData[2], tableData[3]], true)">设置第三、四行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.setAllRowExpansion(true)">设置所有行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.clearRowExpand()">关闭所有行展开</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          ref="xTable"\n          :data="tableData"\n          :expand-config="{lazy: true, loadMethod: loadContentMethod}">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="80">\n            <template v-slot:content="{ row }">\n              <ul>\n                <li v-for="(item, index) in row.detailList" :key="index">\n                  <span>Role: {{ item.role }}</span>\n                  <span style="margin-left: 100px"> Age: {{ item.age }}</span>\n                  <span style="margin-left: 100px"> Sex: {{ item.sex }}</span>\n                </li>\n              </ul>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                { name: 'Develop', age: 20, sex: '女', detailList: [] },\n                { name: 'Develop', age: 22, sex: '女', detailList: [] },\n                { name: 'Develop', age: 24, sex: '男', detailList: [] },\n                { name: 'Develop', age: 26, sex: '女', detailList: [] }\n              ]\n            }\n          },\n          methods: {\n            loadContentMethod ({ row }) {\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  const detailList = XEUtils.sample([\n                    { role: 'Develop', age: 20, sex: '女' },\n                    { role: 'Develop', age: 22, sex: '女' },\n                    { role: 'Develop', age: 24, sex: '男' },\n                    { role: 'Develop', age: 26, sex: '女' },\n                    { role: 'Develop', age: 28, sex: '男' },\n                    { role: 'Develop', age: 30, sex: '男' }\n                  ], XEUtils.random(1, 5))\n                  row.detailList = detailList\n                  resolve()\n                }, 500)\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :data="tableData"\n          :expand-config="{accordion: true, lazy: true, loadMethod: loadContentMethod}">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="80">\n            <template v-slot:content="{ row }">\n              <vxe-grid :columns="row.childCols" :data="row.childData"></vxe-grid>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [\n                { name: 'Develop', age: 20, sex: '女', childCols: [], childData: [] },\n                { name: 'Develop', age: 22, sex: '女', childCols: [], childData: [] },\n                { name: 'Develop', age: 24, sex: '男', childCols: [], childData: [] },\n                { name: 'Develop', age: 26, sex: '女', childCols: [], childData: [] }\n              ]\n            }\n          },\n          methods: {\n            loadContentMethod ({ row }) {\n              return new Promise(resolve => {\n                setTimeout(() => {\n                  const childCols = XEUtils.sample([\n                    { type: 'seq', title: 'Sequence' },\n                    { field: 'name', title: 'Name' },\n                    { field: 'role', title: 'Role' },\n                    { field: 'age', title: 'Age' },\n                    { field: 'sex', title: 'Sex' }\n                  ], XEUtils.random(3, 5))\n                  const childData = XEUtils.sample([\n                    { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },\n                    { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },\n                    { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },\n                    { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },\n                    { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },\n                    { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }\n                  ], XEUtils.random(1, 5))\n                  row.childCols = childCols\n                  row.childData = childData\n                  resolve()\n                }, 500)\n              })\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{loadContentMethod:function(e){var t=e.row;return new Promise((function(e){setTimeout((function(){var n=i.a.sample([{role:"Develop",age:20,sex:"女"},{role:"Develop",age:22,sex:"女"},{role:"Develop",age:24,sex:"男"},{role:"Develop",age:26,sex:"女"},{role:"Develop",age:28,sex:"男"},{role:"Develop",age:30,sex:"男"}],i.a.random(1,5));t.detailList=n,e()}),500)}))},loadContentMethod2:function(e){var t=e.row;return new Promise((function(e){setTimeout((function(){var n=i.a.sample([{type:"seq",title:"Sequence"},{field:"name",title:"Name"},{field:"role",title:"Role"},{field:"age",title:"Age"},{field:"sex",title:"Sex"}],i.a.random(3,5)),a=i.a.sample([{name:"TEST1",role:"Develop",age:20,sex:"女"},{name:"TEST2",role:"Develop",age:22,sex:"女"},{name:"TEST3",role:"Develop",age:24,sex:"男"},{name:"TEST4",role:"Develop",age:26,sex:"女"},{name:"TEST5",role:"Develop",age:28,sex:"男"},{name:"TEST6",role:"Develop",age:30,sex:"男"}],i.a.random(1,5));t.childCols=n,t.childData=a,e()}),500)}))}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},d223: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:"footer-span-method"}}),e._v(" 方法"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 表尾的数据都是自行生成的，该示例仅供参考）")],1)],1),n("vxe-table",{attrs:{border:"","show-footer":"",height:"400","span-method":e.colspanMethod,"footer-span-method":e.footerColspanMethod,"footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",sortable:""}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate","footer-align":"center"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","footer-align":"center"}})],1),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-table",{attrs:{border:"","show-footer":"",height:"400","span-method":e.rowspanMethod,"footer-span-method":e.footerRowspanMethod,"footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"key",title:"Key"}}),n("vxe-table-column",{attrs:{field:"content",title:"Translate"}}),n("vxe-table-column",{attrs:{field:"language",title:"Language",filters:[{label:"中文",value:"zh_CN"},{label:"English",value:"en_US"}]}})],1),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)},l=[],o=(n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-footer\n          height="400"\n          :span-method="colspanMethod"\n          :footer-span-method="footerColspanMethod"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n          <vxe-table-column field="role" title="Role" sortable></vxe-table-column>\n          <vxe-table-column field="rate" title="Rate" footer-align="center"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" footer-align="center"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  // 合并为一列显示\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.mean(data, 'age')\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  // 合并为一列显示\n                  if (['age', 'rate'].includes(column.property)) {\n                    return XEUtils.sum(data, 'age')\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\n            colspanMethod ({ rowIndex, columnIndex }) {\n              if (rowIndex % 2 === 0) {\n                if (columnIndex === 2) {\n                  return {\n                    rowspan: 1,\n                    colspan: 2\n                  }\n                } else if (columnIndex === 3) {\n                  return {\n                    rowspan: 0,\n                    colspan: 0\n                  }\n                }\n              }\n            },\n            footerColspanMethod ({ columnIndex }) {\n              if (columnIndex === 3) {\n                return {\n                  rowspan: 1,\n                  colspan: 2\n                }\n              } else if (columnIndex === 4) {\n                return {\n                  rowspan: 0,\n                  colspan: 0\n                }\n              }\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-footer\n          height="400"\n          :span-method="rowspanMethod"\n          :footer-span-method="footerRowspanMethod"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="key" title="Key"></vxe-table-column>\n          <vxe-table-column field="content" title="Translate"></vxe-table-column>\n          <vxe-table-column field="language" title="Language" :filters="[{label: \'中文\', value: \'zh_CN\'}, {label: \'English\', value: \'en_US\'}]"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['content'].includes(column.property)) {\n                    return '合并为一行显示'\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['content'].includes(column.property)) {\n                    return '合并为一行显示'\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\n            // 通用行合并函数（将相同多列数据合并为一行）\n            rowspanMethod ({ row, $rowIndex, column, data }) {\n              let fields = ['key']\n              let cellValue = row[column.property]\n              if (cellValue && fields.includes(column.property)) {\n                let prevRow = data[$rowIndex - 1]\n                let nextRow = data[$rowIndex + 1]\n                if (prevRow && prevRow[column.property] === cellValue) {\n                  return { rowspan: 0, colspan: 0 }\n                } else {\n                  let countRowspan = 1\n                  while (nextRow && nextRow[column.property] === cellValue) {\n                    nextRow = data[++countRowspan + $rowIndex]\n                  }\n                  if (countRowspan > 1) {\n                    return { rowspan: countRowspan, colspan: 1 }\n                  }\n                }\n              }\n            },\n            footerRowspanMethod ({ $rowIndex, columnIndex }) {\n              if ($rowIndex === 0) {\n                if (columnIndex === 2) {\n                  return { rowspan: 2, colspan: 1 }\n                }\n              } else if ($rowIndex === 1) {\n                if (columnIndex === 2) {\n                  return { rowspan: 0, colspan: 0 }\n                }\n              }\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{footerMethod:function(e){var t=e.columns,n=e.data,a=[t.map((function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?i.a.mean(n,"age"):["content"].includes(e.property)?"合并为一行显示":null})),t.map((function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?i.a.sum(n,"age"):["content"].includes(e.property)?"合并为一行显示":null}))];return a},colspanMethod:function(e){var t=e.rowIndex,n=e.columnIndex;if(t%2===0){if(2===n)return{rowspan:1,colspan:2};if(3===n)return{rowspan:0,colspan:0}}},footerColspanMethod:function(e){var t=e.columnIndex;return 3===t?{rowspan:1,colspan:2}:4===t?{rowspan:0,colspan:0}:void 0},rowspanMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["key"],i=t[a.property];if(i&&o.includes(a.property)){var r=l[n-1],s=l[n+1];if(r&&r[a.property]===i)return{rowspan:0,colspan:0};var c=1;while(s&&s[a.property]===i)s=l[++c+n];if(c>1)return{rowspan:c,colspan:1}}},footerRowspanMethod:function(e){var t=e.$rowIndex,n=e.columnIndex;if(0===t){if(2===n)return{rowspan:2,colspan:1}}else if(1===t&&2===n)return{rowspan:0,colspan:0}}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},da5b:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("使用 "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义模板；可以实现自定义任意内容及 html 元素"),n("br"),n("table-column-api-link",{attrs:{prop:"default"}}),e._v("：自定义内容模板（提前格式化（最优） > "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v("（值发生变化时） > "),n("table-column-api-link",{attrs:{prop:"slots"}}),e._v("（即时））"),n("br"),n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板"),n("br"),n("table-column-api-link",{attrs:{prop:"footer"}}),e._v("：自定义表尾模板"),n("br"),n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{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("，可以更好的复用） ")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",[e._v(e._s(e.$t("app.body.button.insert")))]),n("vxe-button",{scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",[e._v("删除")]),n("vxe-button",[e._v("保存")])]},proxy:!0}])},[[e._v("下拉按钮")]],2)]},proxy:!0},{key:"tools",fn:function(){return[n("vxe-input",{attrs:{placeholder:"搜索"},model:{value:e.value2,callback:function(t){e.value2=t},expression:"value2"}})]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-footer":"",height:"500","footer-method":e.footerMethod,data:e.tableData},on:{"checkbox-change":e.checkboxChangeEvent,"checkbox-all":e.checkboxChangeEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"160",resizable:!1,"show-overflow":""},scopedSlots:e._u([{key:"header",fn:function(){return[n("div",{staticClass:"first-col"},[n("div",{staticClass:"first-col-top"},[e._v("名称")]),n("div",{staticClass:"first-col-bottom"},[e._v("序号")])])]},proxy:!0},{key:"footer",fn:function(t){var a=t.items,l=t._columnIndex;return[n("vxe-button",{attrs:{status:"primary"},on:{click:function(t){return e.clickFooterItem(a,l)}}},[e._v("支持")]),n("vxe-button",{on:{click:function(t){return e.clickFooterItem(a,l)}}},[e._v("放弃")])]}},{key:"default",fn:function(t){var a=t.row;return[n("vxe-button",{on:{click:function(t){return e.showDetailEvent(a)}}},[e._v("弹框"+e._s(a.name))])]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name",sortable:""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("a",{attrs:{href:"https://github.com/xuliangzhan/vxe-table",target:"_black"}},[e._v("我是超链接："+e._s(a.name))])]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"app.body.label.sex",filters:[{data:""}],"filter-method":e.filterSexMethod},scopedSlots:e._u([{key:"header",fn:function(){return[n("span",{staticStyle:{color:"red"}},[e._v("自定义头部")])]},proxy:!0},{key:"footer",fn:function(t){var a=t.items,l=t._columnIndex;return[n("span",{staticStyle:{color:"red"}},[e._v("累计："+e._s(a[l]))])]}},{key:"filter",fn:function(t){var a=t.$panel,l=t.column;return[e._l(l.filters,(function(t,l){return[n("input",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:l,staticClass:"my-filter",attrs:{type:"type"},domProps:{value:t.data},on:{input:[function(n){n.target.composing||e.$set(t,"data",n.target.value)},function(n){return e.changeFilterEvent(n,t,a)}]}})]}))]}},{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(a.sex)+" ")]),n("vxe-button",{attrs:{type:"text"}},[e._v("编辑")]),n("vxe-button",{attrs:{type:"text"}},[e._v("删除")])]}}])}),n("vxe-table-column",{attrs:{field:"time",title:"Time"},scopedSlots:e._u([{key:"header",fn:function(){return[n("vxe-input",{attrs:{placeholder:"放个输入框",size:"mini"},model:{value:e.value1,callback:function(t){e.value1=t},expression:"value1"}})]},proxy:!0},{key:"default",fn:function(t){var a=t.row;return[n("span",[e._v(e._s(e.formatDate(a.time)))])]}}])}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?n("select",[n("option",{attrs:{value:"1"}},[e._v("还可以这样")])]):e._e(),n("a",{attrs:{href:"https://github.com/xuliangzhan/vxe-table"}},[e._v(e._s(a.name))])]}}])}),n("vxe-table-column",{attrs:{field:"html1",title:"Html片段",width:"200","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.html1)}})]}},{key:"footer",fn:function(){return[n("span",[n("img",{staticStyle:{width:"36px"},attrs:{src:"static/other/img1.gif"}}),e._v("就是这么强大"),n("img",{staticStyle:{width:"30px"},attrs:{src:"static/other/img2.gif"}})])]},proxy:!0}])}),n("vxe-table-column",{attrs:{field:"img1",title:"图片路径",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[a.img1?n("img",{staticStyle:{width:"100px"},attrs:{src:a.img1}}):n("span",[e._v("无")])]}}])})],1),n("vxe-pager",{attrs:{perfect:"","current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.total,layouts:["PrevJump","PrevPage","Number","NextPage","NextJump","Sizes","FullJump","Total"]},on:{"update:currentPage":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:current-page":function(t){return e.$set(e.tablePage,"currentPage",t)},"update:pageSize":function(t){return e.$set(e.tablePage,"pageSize",t)},"update:page-size":function(t){return e.$set(e.tablePage,"pageSize",t)}},scopedSlots:e._u([{key:"left",fn:function(){return[n("span",{staticClass:"page-left"},[n("vxe-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.changeAllEvent},model:{value:e.isAllChecked,callback:function(t){e.isAllChecked=t},expression:"isAllChecked"}}),n("span",{staticClass:"select-count"},[e._v("已选中 "+e._s(e.selectRecords.length)+" 条")]),n("vxe-button",[e._v("修改")]),n("vxe-button",[e._v("管理")]),n("vxe-button",[e._v("删除")]),n("vxe-button",{attrs:{size:"small"},scopedSlots:e._u([{key:"dropdowns",fn:function(){return[n("vxe-button",{attrs:{type:"text"}},[e._v("批量修改")]),n("vxe-button",{attrs:{type:"text"}},[e._v("批量管理")]),n("vxe-button",{attrs:{type:"text"}},[e._v("批量删除")])]},proxy:!0}])},[[e._v("更多操作")]],2)],1)]},proxy:!0},{key:"right",fn:function(){return[n("img",{attrs:{src:"static/other/img1.gif",height:"34"}}),n("img",{attrs:{src:"static/other/img1.gif",height:"34"}}),n("img",{attrs:{src:"static/other/img1.gif",height:"34"}})]},proxy:!0}])}),n("vxe-modal",{attrs:{title:"查看详情",width:"800",height:"400",resize:""},model:{value:e.showDetails,callback:function(t){e.showDetails=t},expression:"showDetails"}},[[e._v(e._s(e.selectRow?e.selectRow.text:""))]],2),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),i=n.n(o),r=n("1487"),s=n.n(r),c={data:function(){return{value1:"",value2:"",showDetails:!1,selectRow:null,isAllChecked:!1,isIndeterminate:!1,selectRecords:[],tableData:[],tablePage:{total:0,currentPage:1,pageSize:10},demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button>{{ $t(\'app.body.button.insert\') }}</vxe-button>\n            <vxe-button>\n              <template>下拉按钮</template>\n              <template v-slot:dropdowns>\n                <vxe-button>删除</vxe-button>\n                <vxe-button>保存</vxe-button>\n              </template>\n            </vxe-button>\n          </template>\n          <template v-slot:tools>\n            <vxe-input v-model="value2" placeholder="搜索"></vxe-input>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          resizable\n          show-footer\n          ref="xTable"\n          height="500"\n          :footer-method="footerMethod"\n          :data="tableData"\n          @checkbox-change="checkboxChangeEvent"\n          @checkbox-all="checkboxChangeEvent">\n          <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n          <vxe-table-column type="seq" width="160" :resizable="false" show-overflow>\n            <template v-slot:header>\n              <div class="first-col">\n                <div class="first-col-top">名称</div>\n                <div class="first-col-bottom">序号</div>\n              </div>\n            </template>\n            <template v-slot:footer="{ items, _columnIndex }">\n              <vxe-button status="primary" @click="clickFooterItem(items, _columnIndex)">支持</vxe-button>\n              <vxe-button @click="clickFooterItem(items, _columnIndex)">放弃</vxe-button>\n            </template>\n            <template v-slot="{ row }">\n              <vxe-button @click="showDetailEvent(row)">弹框{{ row.name }}</vxe-button>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="app.body.label.name" sortable>\n            <template v-slot="{ row }">\n              <a href="https://github.com/xuliangzhan/vxe-table" target="_black">我是超链接：{{ row.name }}</a>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="app.body.label.sex" :filters="[{data: \'\'}]" :filter-method="filterSexMethod">\n            <template v-slot:header>\n              <span style="color: red;">自定义头部</span>\n            </template>\n            <template v-slot:footer="{ items, _columnIndex }">\n              <span style="color: red">累计：{{ items[_columnIndex] }}</span>\n            </template>\n            <template v-slot:filter="{ $panel, column }">\n              <template v-for="(option, index) in column.filters">\n                <input class="my-filter" type="type" v-model="option.data" :key="index" @input="changeFilterEvent($event, option, $panel)">\n              </template>\n            </template>\n            <template v-slot="{ row }">\n              <span>{{ row.sex }} </span>\n              <vxe-button type="text">编辑</vxe-button>\n              <vxe-button type="text">删除</vxe-button>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="time" title="Time">\n            <template v-slot:header>\n              <vxe-input v-model="value1" placeholder="放个输入框" size="mini"></vxe-input>\n            </template>\n            <template v-slot="{ row }">\n              <span>{{ formatDate(row.time) }}</span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow>\n            <template v-slot="{ row, rowIndex }">\n              <select v-if="rowIndex === 1">\n                <option value="1">还可以这样</option>\n              </select>\n              <a href="https://github.com/xuliangzhan/vxe-table">{{ row.name }}</a>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="html1" title="Html片段" width="200" show-overflow>\n            <template v-slot="{ row }">\n              <span v-html="row.html1"></span>\n            </template>\n            <template v-slot:footer>\n              <span>\n                <img src="static/other/img1.gif" style="width: 36px;">就是这么强大<img src="static/other/img2.gif" style="width: 30px;">\n              </span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="img1" title="图片路径" width="120">\n            <template v-slot="{ row }">\n              <img v-if="row.img1" :src="row.img1" style="width: 100px;">\n              <span v-else>无</span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n\n        <vxe-pager\n          perfect\n          :current-page.sync="tablePage.currentPage"\n          :page-size.sync="tablePage.pageSize"\n          :total="tablePage.total"\n          :layouts="[\'PrevJump\', \'PrevPage\', \'Number\', \'NextPage\', \'NextJump\', \'Sizes\', \'FullJump\', \'Total\']">\n          <template v-slot:left>\n            <span class="page-left">\n              <vxe-checkbox v-model="isAllChecked" :indeterminate="isIndeterminate" @change="changeAllEvent"></vxe-checkbox>\n              <span class="select-count">已选中 {{ selectRecords.length }} 条</span>\n              <vxe-button>修改</vxe-button>\n              <vxe-button>管理</vxe-button>\n              <vxe-button>删除</vxe-button>\n              <vxe-button size="small">\n                <template>更多操作</template>\n                <template v-slot:dropdowns>\n                  <vxe-button type="text">批量修改</vxe-button>\n                  <vxe-button type="text">批量管理</vxe-button>\n                  <vxe-button type="text">批量删除</vxe-button>\n                </template>\n              </vxe-button>\n            </span>\n          </template>\n          <template v-slot:right>\n            <img src="static/other/img1.gif" height="34">\n            <img src="static/other/img1.gif" height="34">\n            <img src="static/other/img1.gif" height="34">\n          </template>\n        </vxe-pager>\n\n        <vxe-modal v-model="showDetails" title="查看详情" width="800" height="400" resize>\n          <template>{{ selectRow ? selectRow.text : \'\' }}</template>\n        </vxe-modal>\n        ',"\n        export default {\n          data () {\n            return {\n              value1: '',\n              value2: '',\n              showDetails: false,\n              selectRow: null,\n              isAllChecked: false,\n              isIndeterminate: false,\n              selectRecords: [],\n              tableData: [],\n              tablePage: {\n                total: 0,\n                currentPage: 1,\n                pageSize: 10\n              }\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n          },\n          methods: {\n            formatDate (value) {\n              return XEUtils.toDateString(value, 'yyyy-MM-dd HH:mm:ss.S')\n            },\n            filterSexMethod ({ option, row }) {\n              return row.sex === option.data\n            },\n            changeFilterEvent (evnt, option, $panel) {\n              $panel.changeOption(evnt, !!option.data, option)\n            },\n            showDetailEvent (row) {\n              this.selectRow = row\n              this.showDetails = true\n            },\n            clickFooterItem (items, _columnIndex) {\n              this.$XModal.alert(`点击了表尾第${_columnIndex}列`)\n            },\n            checkboxChangeEvent ({ records }) {\n              this.isAllChecked = this.$refs.xTable.isAllCheckboxChecked()\n              this.isIndeterminate = this.$refs.xTable.isCheckboxIndeterminate()\n              this.selectRecords = records\n            },\n            changeAllEvent () {\n              this.$refs.xTable.setAllCheckboxRow(this.isAllChecked)\n            },\n            footerMethod ({ columns, data }) {\n              return [\n                columns.map(column => {\n                  if (['sex', 'num'].includes(column.property)) {\n                    return XEUtils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        ",'\n        .first-col {\n          position: relative;\n          height: 20px;\n        }\n        .first-col:before {\n          content: "";\n          position: absolute;\n          left: -15px;\n          top: 10px;\n          width: 170px;\n          height: 1px;\n          transform: rotate(20deg);\n          background-color: #e8eaec;\n        }\n        .first-col .first-col-top {\n          position: absolute;\n          right: 4px;\n          top: -10px;\n        }\n        .first-col .first-col-bottom {\n          position: absolute;\n          left: 4px;\n          bottom: -10px;\n        }\n        .my-filter {\n          margin: 10px;\n        }\n        .page-left {\n          position: absolute;\n          left: 10px;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 10;\n        }\n        ']}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{formatDate:function(e){return i.a.toDateString(e,"yyyy-MM-dd HH:mm:ss.S")},filterSexMethod:function(e){var t=e.option,n=e.row;return n.sex===t.data},changeFilterEvent:function(e,t,n){n.changeOption(e,!!t.data,t)},showDetailEvent:function(e){this.selectRow=e,this.showDetails=!0},clickFooterItem:function(e,t){this.$XModal.alert("点击了表尾第".concat(t,"列"))},checkboxChangeEvent:function(e){var t=e.records;this.isAllChecked=this.$refs.xTable.isAllCheckboxChecked(),this.isIndeterminate=this.$refs.xTable.isCheckboxIndeterminate(),this.selectRecords=t},changeAllEvent:function(){this.$refs.xTable.setAllCheckboxRow(this.isAllChecked)},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e){return["sex","num"].includes(e.property)?i.a.sum(n,e.property):null}))]}}},d=c,u=(n("0168"),n("2877")),m=Object(u["a"])(d,a,l,!1,null,"3dde095c",null);t["default"]=m.exports},e179:function(e,t,n){},e1b0:function(e,t,n){"use strict";var a=n("ad77"),l=n.n(a);l.a},ee3d: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:"expand-config"}}),e._v(" 属性和 type="),n("table-api-link",{attrs:{prop:"expand"}}),e._v(" 与 "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 可以开启展开行功能")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.toggleRowExpansion(e.tableData[1])}}},[e._v("切换第二行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setRowExpansion([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setAllRowExpansion(!0)}}},[e._v("设置所有行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearRowExpand()}}},[e._v("关闭所有行展开")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",data:e.tableData},on:{"toggle-row-expand":e.toggleExpandChangeEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"80"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("默认展开指定行，通过 "),n("table-api-link",{attrs:{prop:"expandRowKeys"}}),e._v(" 参数设置默认展开行，指定默认值需要有 "),n("table-api-link",{attrs:{prop:"row-id"}})],1),n("vxe-table",{attrs:{border:"","row-id":"id","expand-config":{expandRowKeys:["1"]},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"60"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row,l=t.rowIndex;return[1===l?[n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"role",title:"Role"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1)]:[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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  ")]),n("p",{staticClass:"tip"},[e._v(" 默认展开所有行，通过 "),n("table-api-link",{attrs:{prop:"expandAll"}}),e._v(" 参数设置默认展开所有行"),n("br"),e._v(" 还可以配置 "),n("table-api-link",{attrs:{prop:"labelField"}}),e._v(" 列显示属性 ")],1),n("vxe-table",{attrs:{border:"",data:e.tableData,"expand-config":{labelField:"name",expandAll:!0}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",title:"Name"},scopedSlots:e._u([{key:"content",fn:function(t){var a=t.row;return[n("ul",[n("li",[n("span",[e._v("ID：")]),n("span",[e._v(e._s(a.id))])]),n("li",[n("span",[e._v("Name：")]),n("span",[e._v(e._s(a.name))])]),n("li",[n("span",[e._v("UpdateTime：")]),n("span",[e._v(e._s(a.updateTime))])]),n("li",[n("span",[e._v("CreateTime：")]),n("span",[e._v(e._s(a.createTime))])])])]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.toggleRowExpansion(tableData[1])">切换第二行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.setRowExpansion([tableData[2], tableData[3]], true)">设置第三、四行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.setAllRowExpansion(true)">设置所有行展开</vxe-button>\n            <vxe-button @click="$refs.xTable.clearRowExpand()">关闭所有行展开</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable"\n          border\n          :data="tableData"\n          @toggle-row-expand="toggleExpandChangeEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          },\n          methods: {\n            toggleExpandChangeEvent ({ row, expanded }) {\n              console.log('行展开事件' + expanded)\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          row-id="id"\n          :expand-config="{expandRowKeys: [\'1\']}"\n          :data="tableData">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot:content="{ row, rowIndex }">\n              <template v-if="rowIndex === 1">\n                <vxe-table\n                  border\n                  :data="tableData">\n                  <vxe-table-column field="role" title="Role"></vxe-table-column>\n                  <vxe-table-column field="age" title="Age"></vxe-table-column>\n                </vxe-table>\n              </template>\n              <template v-else>\n                <ul>\n                  <li>\n                    <span>ID：</span>\n                    <span>{{ row.id }}</span>\n                  </li>\n                  <li>\n                    <span>Name：</span>\n                    <span>{{ row.name }}</span>\n                  </li>\n                  <li>\n                    <span>UpdateTime：</span>\n                    <span>{{ row.updateTime }}</span>\n                  </li>\n                  <li>\n                    <span>CreateTime：</span>\n                    <span>{{ row.createTime }}</span>\n                  </li>\n                </ul>\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          :data="tableData"\n          :expand-config="{labelField: \'name\', expandAll: true}">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" title="Name">\n            <template v-slot:content="{ row }">\n              <ul>\n                <li>\n                  <span>ID：</span>\n                  <span>{{ row.id }}</span>\n                </li>\n                <li>\n                  <span>Name：</span>\n                  <span>{{ row.name }}</span>\n                </li>\n                <li>\n                  <span>UpdateTime：</span>\n                  <span>{{ row.updateTime }}</span>\n                </li>\n                <li>\n                  <span>CreateTime：</span>\n                  <span>{{ row.createTime }}</span>\n                </li>\n              </ul>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 3)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{toggleExpandChangeEvent:function(e){var t=e.expanded;console.log("行展开事件"+t)}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},fd61: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-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"500",data:e.tableData},on:{"cell-click":e.cellClickEvent}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"address",title:"Address","show-overflow":""}})],1),n("vxe-modal",{attrs:{title:"查看详情",width:"600",height:"400",mask:!1,"lock-view":!1,resize:""},model:{value:e.showDetails,callback:function(t){e.showDetails=t},expression:"showDetails"}},[n("vxe-table",{attrs:{border:"inner","auto-resize":"","show-overflow":"","highlight-hover-row":"",height:"auto","show-header":!1,"sync-resize":e.showDetails,data:e.detailData}},[n("vxe-table-column",{attrs:{field:"label",width:"40%"}}),n("vxe-table-column",{attrs:{field:"value"}})],1)],1),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)},l=[],o=(n("4160"),n("a630"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),i=n.n(o),r={data:function(){return{showDetails:!1,detailData:[],tableData:[],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          highlight-current-row\n          height="500"\n          :data="tableData"\n          @cell-click="cellClickEvent">\n          <vxe-table-column type="seq" width="60"></vxe-table-column>\n          <vxe-table-column field="name" title="Name"></vxe-table-column>\n          <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n          <vxe-table-column field="age" title="Age"></vxe-table-column>\n          <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n        </vxe-table>\n\n        <vxe-modal v-model="showDetails" title="查看详情" width="600" height="400" :mask="false" :lock-view="false" resize>\n          <vxe-table\n            border="inner"\n            auto-resize\n            show-overflow\n            highlight-hover-row\n            height="auto"\n            :show-header="false"\n            :sync-resize="showDetails"\n            :data="detailData">\n            <vxe-table-column field="label" width="40%"></vxe-table-column>\n            <vxe-table-column field="value"></vxe-table-column>\n          </vxe-table>\n        </vxe-modal>\n        ',"\n        export default {\n          data () {\n            return {\n              showDetails: false,\n              detailData: [],\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            cellClickEvent ({ row }) {\n              this.detailData = ['name', 'nickname', 'role', 'sex', 'age', 'date12', 'address'].map(field => {\n                return { label: field, value: row[field] }\n              })\n              this.showDetails = true\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{cellClickEvent:function(e){var t=e.row;this.detailData=["name","nickname","role","sex","age","date12","address"].map((function(e){return{label:e,value:t[e]}})),this.showDetails=!0}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports}}]);