vxe-table/docs/static/js/advanced.9a264a6e.js

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["advanced"],{"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    设置 "),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("\n    需要注意的是表尾的的计算并非实时的，而是在 data 初始化时才会触发自动计算；如果要达到实时计算请手动调用 "),n("table-api-link",{attrs:{prop:"updateFooter"}}),e._v(" 方法\n  ")],1),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","highlight-hover-row":"","show-footer":"",height:"400","footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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:"index",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-table",{staticClass:"mytable-footer",attrs:{border:"","show-footer":"",height:"400","show-overflow":"","footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          class="mytable-footer"\n          border\n          highlight-hover-row\n          show-footer\n          height="400"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="index" 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            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 this.$utils.mean(data, column.property)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\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="index" 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              return [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.mean(data, column.property)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          class="mytable-footer"\n          border\n          show-footer\n          height="400"\n          show-overflow\n          :footer-method="footerMethod"\n          :footer-cell-class-name="footerCellClassName"\n          :data="tableData">\n          <vxe-table-column type="index" 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              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 footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.mean(data, column.property)\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.sum(data, column.property)\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            }\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,50);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{footerCellClassName:function(e){var t=e.$rowIndex,n=(e.column,e.columnIndex);if(0===n)return 0===t?"col-blue":"col-red"},footerMethod:function(e){var t=this,n=e.columns,a=e.data,l=[n.map(function(e,n){return 0===n?"平均":["age","rate"].includes(e.property)?t.$utils.mean(a,e.property):null}),n.map(function(e,n){return 0===n?"和值":["age","rate"].includes(e.property)?t.$utils.sum(a,e.property):null})];return l}}},s=r,c=(n("6c0e"),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    使用自带的分页 "),n("pager-api-link",{attrs:{name:"vxe-pager"}}),n("br"),e._v("\n    如果要支持动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"start-index"}}),e._v(" 属性设置起始值"),n("br"),e._v("\n    如果要支持保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性"),n("br"),e._v("\n    启用 reserve 功能需要有 row-id 唯一主键\n  ")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"460","row-id":"id",loading:e.loading,"start-index":(e.tablePage.currentPage-1)*e.tablePage.pageSize,"select-config":{reserve:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",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.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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],tablePage:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          ref="xTable"\n          height="460"\n          row-id="id"\n          :loading="loading"\n          :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"\n          :select-config="{reserve: true}"\n          :data="tableData">\n          <vxe-table-column type="selection" width="60"></vxe-table-column>\n          <vxe-table-column type="index" 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="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              this.$ajax.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(response => {\n                let { page, result } = response.data\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){i.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then(function(t){var n=t.data,a=n.page,l=n.result;e.tableData=l,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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":{header:{options:e.headerMenus},body:{options:e.bodyMenus},footer:{options:e.footerMenus}}},on:{"header-cell-context-menu":e.headerCellContextMenuEvent,"cell-context-menu":e.cellContextMenuEvent,"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{type:"index",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("6762"),n("2fdb"),n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r=n("f11d"),s={data:function(){return{tableData:[],headerMenus:[[{code:"exportAll",name:"导出所有.csv"}]],bodyMenus:[[{code:"copy",name:"app.body.label.copy",prefixIcon:"fa fa-copy"}],[{code:"remove",name:"删除"},{code:"filter",name:"app.body.label.filter",children:[{code:"clearFilter",name:"清除筛选"},{code:"filterSelect",name:"按所选单元格的值筛选"}]},{code:"sort",name:"app.body.label.sort",children:[{code:"clearSort",name:"清除排序"},{code:"sortAsc",name:"升序"},{code:"sortDesc",name:"倒序"}]},{code:"print",name:"打印",disabled:!0}]],footerMenus:[[{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="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}}"\n          @header-cell-context-menu="headerCellContextMenuEvent"\n          @cell-context-menu="cellContextMenuEvent"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column type="index" 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              headerMenus: [\n                [\n                  {\n                    code: 'exportAll',\n                    name: '导出所有.csv'\n                  }\n                ]\n              ],\n              bodyMenus: [\n                [\n                  {\n                    code: 'copy',\n                    name: 'app.body.label.copy',\n                    prefixIcon: 'fa fa-copy'\n                  }\n                ],\n                [\n                  {\n                    code: 'remove',\n                    name: '删除'\n                  },\n                  {\n                    code: 'filter',\n                    name: 'app.body.label.filter',\n                    children: [\n                      {\n                        code: 'clearFilter',\n                        name: '清除筛选'\n                      },\n                      {\n                        code: 'filterSelect',\n                        name: '按所选单元格的值筛选'\n                      }\n                    ]\n                  },\n                  {\n                    code: 'sort',\n                    name: 'app.body.label.sort',\n                    children: [\n                      {\n                        code: 'clearSort',\n                        name: '清除排序'\n                      },\n                      {\n                        code: 'sortAsc',\n                        name: '升序'\n                      },\n                      {\n                        code: 'sortDesc',\n                        name: '倒序'\n                      }\n                    ]\n                  },\n                  {\n                    code: 'print',\n                    name: '打印',\n                    disabled: true\n                  }\n                ]\n              ],\n              footerMenus: [\n                [\n                  {\n                    code: 'clearAll',\n                    name: '清空数据'\n                  }\n                ]\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            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 this.$utils.mean(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},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)},contextMenuClickEvent:function(e){var t=e.menu,n=e.row,a=e.column;switch(t.code){case"copy":n&&a&&r["a"].copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;default:this.$XModal.message("点击了 ".concat(t.name," 选项"))}},footerMethod:function(e){var t=this,n=e.columns,a=e.data;return[n.map(function(e,n){return 0===n?"平均":["age","rate"].includes(e.property)?t.$utils.mean(a,e.property):null})]}}},c=s,d=n("2877"),u=Object(d["a"])(c,a,l,!1,null,null,null);t["default"]=u.exports},"2e28":function(e,t,n){},"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}},[n("vxe-table-column",{attrs:{type:"index",width:"80"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.name)}})]}}])}),n("vxe-table-column",{attrs:{field:"role",title:"Role"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.role)}})]}}])}),n("vxe-table-column",{attrs:{field:"age",title:"Age"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.age)}})]}}])}),n("vxe-table-column",{attrs:{field:"address",title:"Address"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.address)}})]}}])})],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",{attrs:{data:e.list2,"tree-config":{children:"children",expandAll:!!e.filterName2}}},[n("vxe-table-column",{attrs:{type:"index",width:"160",title:"序号","tree-node":""}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.name)}})]}}])}),n("vxe-table-column",{attrs:{field:"size",title:"Size"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.size)}})]}}])}),n("vxe-table-column",{attrs:{field:"type",title:"Type"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.type)}})]}}])}),n("vxe-table-column",{attrs:{field:"date",title:"Date"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.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[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("5df3"),n("1c4c"),n("ac6a"),n("a481"),n("3b2b"),n("6b54"),n("1487")),i=n.n(o),r={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="index" width="80"></vxe-table-column>\n          <vxe-table-column field="name" title="Name">\n            <template v-slot="{ row }">\n              <span v-html="row.name"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="role" title="Role">\n            <template v-slot="{ row }">\n              <span v-html="row.role"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="age" title="Age">\n            <template v-slot="{ row }">\n              <span v-html="row.age"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="address" title="Address">\n            <template v-slot="{ row }">\n              <span v-html="row.address"></span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              filterName: '',\n              tableData: []\n            }\n          },\n          computed: {\n            list () {\n              let filterName = this.$utils.toString(this.filterName).trim().toLowerCase()\n              if (filterName) {\n                let filterRE = new RegExp(filterName, 'gi')\n                let searchProps = ['name', 'role', 'age', 'address']\n                let rest = this.tableData.filter(item => searchProps.some(key => this.$utils.toString(item[key]).toLowerCase().indexOf(filterName) > -1))\n                return rest.map(row => {\n                  let item = Object.assign({}, row)\n                  searchProps.forEach(key => {\n                    item[key] = this.$utils.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          :data="list"\n          :tree-config="{children: \'children\', expandAll: !!filterName}">\n          <vxe-table-column type="index" width="160" title="序号" tree-node></vxe-table-column>\n          <vxe-table-column field="name" title="Name">\n            <template v-slot="{ row }">\n              <span v-html="row.name"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="size" title="Size">\n            <template v-slot="{ row }">\n              <span v-html="row.size"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="type" title="Type">\n            <template v-slot="{ row }">\n              <span v-html="row.type"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="date" title="Date">\n            <template v-slot="{ row }">\n              <span v-html="row.date"></span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              filterName: '',\n              tableData: []\n            }\n          },\n          computed: {\n            list () {\n              let filterName = this.$utils.toString(this.filterName).trim().toLowerCase()\n              if (filterName) {\n                let filterRE = new RegExp(filterName, 'gi')\n                let options = { children: 'children' }\n                let searchProps = ['name', 'size', 'type', 'date']\n                let rest = this.$utils.searchTree(this.tableData, item => searchProps.some(key => this.$utils.toString(item[key]).toLowerCase().indexOf(filterName) > -1), options)\n                this.$utils.eachTree(rest, item => {\n                  searchProps.forEach(key => {\n                    item[key] = this.$utils.toString(item[key]).replace(filterRE, match => `<span class=\"keyword-lighten\">${match}</span>`)\n                  })\n                }, options)\n                return rest\n              }\n              return this.tableData\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_TREE_DATA_LIST.slice(0)\n          }\n        }","\n        .keyword-lighten {\n          color: #000;\n          background-color: #FFFF00;\n        }\n        "]}},computed:{list1:function(){var e=this,t=this.$utils.toString(this.filterName1).trim().toLowerCase();if(t){var n=new RegExp(t,"gi"),a=["name","role","age","address"],l=this.tableData1.filter(function(n){return a.some(function(a){return e.$utils.toString(n[a]).toLowerCase().indexOf(t)>-1})});return l.map(function(t){var l=Object.assign({},t);return a.forEach(function(t){l[t]=e.$utils.toString(l[t]).replace(n,function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")})}),l})}return this.tableData1},list2:function(){var e=this,t=this.$utils.toString(this.filterName2).trim().toLowerCase();if(t){var n=new RegExp(t,"gi"),a={children:"children"},l=["name","size","type","date"],o=this.$utils.searchTree(this.tableData2,function(n){return l.some(function(a){return e.$utils.toString(n[a]).toLowerCase().indexOf(t)>-1})},a);return this.$utils.eachTree(o,function(t){l.forEach(function(a){t[a]=e.$utils.toString(t[a]).replace(n,function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")})})},a),o}return this.tableData2}},created:function(){this.tableData1=window.MOCK_DATA_LIST.slice(0,50),this.tableData2=this.$utils.clone(window.MOCK_TREE_DATA_LIST,!0)},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},3590:function(e,t,n){},"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    显示/隐藏列和列宽拖动保存功能，通过设置 "),n("toolbar-api-link",{attrs:{prop:"id"}}),e._v(" 和 "),n("toolbar-api-link",{attrs:{prop:"resizable"}}),e._v("={storage: true} 参数开启列宽拖动 localStorage 保存功能"),n("br"),e._v("\n    也可以通过配合 "),n("table-api-link",{attrs:{prop:"resizable-change"}}),e._v(" 事件实现服务端保存\n  ")],1),n("vxe-toolbar",{attrs:{id:"toolbar_demo5",resizable:{storage:!0},setting:{storage:!0}},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:"",height:"400",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar id="toolbar_demo5" :resizable="{storage: true}" :setting="{storage: true}">\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          height="400"\n          :data="tableData">\n          <vxe-table-column type="index" 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(){var e=window.MOCK_DATA_LIST.slice(0,20);this.tableData=e},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},"551ff":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 指向真实数据的行索引，可以根据不同场景使用")],1),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"400","span-method":e.colspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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:"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:"",height:"400","span-method":e.rowspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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("6762"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="400"\n          :span-method="colspanMethod"\n          :data="tableData">\n          <vxe-table-column type="index" 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="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            colspanMethod ({ row, rowIndex, column, columnIndex, data }) {\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          }\n        }\n        ",'\n        <vxe-table\n          border\n          height="400"\n          :span-method="rowspanMethod"\n          :data="tableData">\n          <vxe-table-column type="index" 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            // 通用行合并函数（将相同多列数据合并为一行）\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          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,20);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{colspanMethod:function(e){e.row;var t=e.rowIndex,n=(e.column,e.columnIndex);e.data;if(t%2===0){if(2===n)return{rowspan:1,colspan:2};if(3===n)return{rowspan:0,colspan: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}}}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"5a32":function(e,t,n){},"6c0e":function(e,t,n){"use strict";var a=n("5a32"),l=n.n(a);l.a},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":{header:{options:e.headerMenus},body:{options:e.bodyMenus},footer:{options:e.footerMenus},visibleMethod:e.visibleMethod}},on:{"header-cell-context-menu":e.headerCellContextMenuEvent,"cell-context-menu":e.cellContextMenuEvent,"context-menu-click":e.contextMenuClickEvent}},[n("vxe-table-column",{attrs:{type:"index",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("7f7f"),n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r=n("f11d"),s={data:function(){return{tableData:[],headerMenus:[[{code:"exportAll",name:"导出所有.csv",visible:!0,disabled:!1}]],bodyMenus:[[{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}]],footerMenus:[[{code:"clearAll",name:"清空数据",visible:!0,disabled:!1}]],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="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}, visibleMethod}"\n          @header-cell-context-menu="headerCellContextMenuEvent"\n          @cell-context-menu="cellContextMenuEvent"\n          @context-menu-click="contextMenuClickEvent">\n          <vxe-table-column type="index" 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              headerMenus: [\n                [\n                  {\n                    code: 'exportAll',\n                    name: '导出所有.csv',\n                    visible: true,\n                    disabled: false\n                  }\n                ]\n              ],\n              bodyMenus: [\n                [\n                  {\n                    code: 'copy',\n                    name: 'app.body.label.copy',\n                    prefixIcon: 'fa fa-copy',\n                    visible: true,\n                    disabled: false\n                  },\n                  {\n                    code: 'clear',\n                    name: '清除内容',\n                    prefixIcon: 'fa fa-copy',\n                    visible: true,\n                    disabled: false\n                  }\n                ],\n                [\n                  {\n                    code: 'remove',\n                    name: '删除',\n                    visible: true,\n                    disabled: false\n                  },\n                  {\n                    code: 'filter',\n                    name: 'app.body.label.filter',\n                    visible: true,\n                    disabled: false,\n                    children: [\n                      {\n                        code: 'clearFilter',\n                        name: '清除筛选',\n                        visible: true,\n                        disabled: false\n                      },\n                      {\n                        code: 'filterSelect',\n                        name: '按所选单元格的值筛选',\n                        visible: true,\n                        disabled: false\n                      }\n                    ]\n                  },\n                  {\n                    code: 'sort',\n                    name: 'app.body.label.sort',\n                    visible: true,\n                    disabled: false,\n                    children: [\n                      {\n                        code: 'clearSort',\n                        name: '清除排序',\n                        visible: true,\n                        disabled: false\n                      },\n                      {\n                        code: 'sortAsc',\n                        name: '升序',\n                        visible: true,\n                        disabled: false\n                      },\n                      {\n                        code: 'sortDesc',\n                        name: '倒序',\n                        visible: true,\n                        disabled: false\n                      }\n                    ]\n                  },\n                  {\n                    code: 'print',\n                    name: '打印',\n                    disabled: true\n                  }\n                ]\n              ],\n              footerMenus: [\n                [\n                  {\n                    code: 'clearAll',\n                    name: '清空数据',\n                    visible: true,\n                    disabled: false\n                  }\n                ]\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 ({ type, options, column }) {\n              // 示例：只有 name 列允许操作，清除按钮只能在 age 才显示\n              // 显示之前处理按钮的操作权限\n              let isDisabled = !column || column.property !== 'name'\n              let isVisible = column && column.property === 'age'\n              options.forEach(list => {\n                list.forEach(item => {\n                  if (['copy', 'remove'].includes(item.code)) {\n                    item.disabled = isDisabled\n                  }\n                  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(`点击了 ${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 this.$utils.mean(data, column.property)\n                  }\n                  return null\n                })\n              ]\n            }\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},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){e.type;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),["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&&r["a"].copy(n[a.property])&&this.$XModal.message({message:"已复制到剪贴板！",status:"success"});break;default:this.$XModal.message("点击了 ".concat(t.name," 选项"))}},footerMethod:function(e){var t=this,n=e.columns,a=e.data;return[n.map(function(e,n){return 0===n?"平均":["age","rate"].includes(e.property)?t.$utils.mean(a,e.property):null})]}}},c=s,d=n("2877"),u=Object(d["a"])(c,a,l,!1,null,null,null);t["default"]=u.exports},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    使用自带的工具栏 "),n("toolbar-api-link",{attrs:{name:"vxe-toolbar"}}),e._v("，配合模板可以非常简单的实现强大的功能"),n("br"),e._v("\n    支持显示/隐藏列、列宽拖动状态的保存功能"),n("br"),e._v("\n    组成一套完整的表格，工具栏和表格必须是上下相邻关系，渲染时会自动进行上下关联，不允许更换位置（如果是复杂的布局不建议使用工具栏，自行写模板即可）\n  ")],1),n("vxe-toolbar",{attrs:{setting:"",buttons:e.toolbarButtons,refresh:{query:e.findList}}}),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],toolbarButtons:[{code:"btn1",name:"app.body.button.insert"},{name:"下拉按钮",dropdowns:[{name:"按钮111",code:"btn2"},{name:"按钮222",code:"btn3"}]}],demoCodes:['\n        <vxe-toolbar \n          setting\n          :buttons="toolbarButtons" \n          :refresh="{query: findList}"></vxe-toolbar>\n\n        <vxe-table\n          border\n          height="400"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="index" 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        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              toolbarButtons: [\n                {\n                  code: 'btn1',\n                  name: 'app.body.button.insert'\n                },\n                {\n                  name: '下拉按钮',\n                  dropdowns: [\n                    {\n                      name: '按钮111',\n                      code: 'btn2'\n                    },\n                    {\n                      name: '按钮222',\n                      code: 'btn3'\n                    }\n                  ]\n                }\n              ]\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},"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:"filter"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"updateData"}}),e._v(" 方法来处理复杂场景的筛选逻辑")],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){return e.$refs.xTable.clearFilter("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:"index",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:"sex",title:"Sex",sortable:"",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.column,l=t.context;return e._l(a.filters,function(t,a){return n("input",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:a,attrs:{type:"type"},domProps:{value:t.data},on:{input:[function(n){n.target.composing||e.$set(t,"data",n.target.value)},function(e){return l.changeOption(e,!!t.data,t)}]}})})}}])}),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("c5f6"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],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(\'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="index" 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="sex" title="Sex" sortable :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="{ column, context }">\n              <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="context.changeOption($event, !!option.data, option)">\n            </template>\n          </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, 50)\n                  this.loading = false\n                  resolve()\n                }, 300)\n              })\n            },\n            filterNameMethod ({ value, row, column }) {\n              return row.id >= value\n            },\n            filterAgeMethod ({ option, row }) {\n              return row.age === Number(option.data)\n            },\n            updateNameFilterEvent () {\n              let xTable = this.$refs.xTable\n              xTable.filter('name', options => {\n                // 修改筛选列表\n                return [\n                  {\n                    label: 'id大于10',\n                    value: 10\n                  },\n                  {\n                    label: 'id大于20',\n                    value: 20\n                  },\n                  {\n                    label: 'id大于30',\n                    value: 30,\n                    checked: true // 设置为选中状态\n                  },\n                  {\n                    label: 'id大于40',\n                    value: 40\n                  }\n                ]\n              }).then(() => {\n                // 修改条件之后，需要手动调用 updateData 处理表格数据\n                xTable.updateData()\n              })\n            },\n            filterNameEvent () {\n              let xTable = this.$refs.xTable\n              xTable.filter('name')\n                .then(options => {\n                  // 处理条件并设置选中的选项\n                  if (options.length) {\n                    let option = options[1]\n                    option.checked = true\n                  }\n                })\n                .then(() => {\n                  // 修改条件之后，需要手动调用 updateData 处理表格数据\n                  xTable.updateData()\n                })\n            },\n            filterAgeEvent () {\n              let xTable = this.$refs.xTable\n              xTable.filter('age')\n                .then(options => {\n                  // 处理条件并设置选中的选项\n                  if (options.length) {\n                    let option = options[0]\n                    option.data = '26'\n                    option.checked = true\n                  }\n                })\n                .then(() => {\n                  // 修改条件之后，需要手动调用 updateData 处理表格数据\n                  xTable.updateData()\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,50),e.loading=!1,t()},300)})},filterNameMethod:function(e){var t=e.value,n=e.row;e.column;return n.id>=t},filterAgeMethod:function(e){var t=e.option,n=e.row;return n.age===Number(t.data)},updateNameFilterEvent:function(){var e=this.$refs.xTable;e.filter("name",function(e){return[{label:"id大于10",value:10},{label:"id大于20",value:20},{label:"id大于30",value:30,checked:!0},{label:"id大于40",value:40}]}).then(function(){e.updateData()})},filterNameEvent:function(){var e=this.$refs.xTable;e.filter("name").then(function(e){if(e.length){var t=e[1];t.checked=!0}}).then(function(){e.updateData()})},filterAgeEvent:function(){var e=this.$refs.xTable;e.filter("age").then(function(e){if(e.length){var t=e[0];t.data="26",t.checked=!0}}).then(function(){e.updateData()})}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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    显示/隐藏列功能，通过设置 "),n("toolbar-api-link",{attrs:{prop:"id"}}),e._v(" 和 "),n("toolbar-api-link",{attrs:{prop:"setting"}}),e._v("={storage: true} 参数开启将列个性化 localStorage 保存功能"),n("br"),e._v("\n    也可以通过配合 "),n("table-api-link",{attrs:{prop:"reloadCustoms"}}),e._v(" 函数实现服务端保存\n  ")],1),n("vxe-toolbar",{attrs:{id:"toolbar_demo3",setting:{storage:!0}},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",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar id="toolbar_demo3" :setting="{storage: true}">\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          :data="tableData">\n          <vxe-table-column type="index" 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(){var e=window.MOCK_DATA_LIST.slice(0,20);this.tableData=e},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},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("vxe-table",{attrs:{border:"",height:"600","span-method":e.rowspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name_1",title:"功能模块"}}),n("vxe-table-column",{attrs:{field:"name_2",title:"详细功能"}}),n("vxe-table-column",{attrs:{field:"name_3",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)}},model:{value:a.check_3,callback:function(t){e.$set(a,"check_3",t)},expression:"row.check_3"}},[e._v(e._s(a.name_3))])]}}])}),n("vxe-table-column",{attrs:{field:"name_4",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)}},model:{value:a.check_4,callback:function(t){e.$set(a,"check_4",t)},expression:"row.check_4"}},[e._v(e._s(a.name_4))])]}}])})],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("6762"),n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{treeData:[{id:"10000",name:"账号管理",children:[{id:"11000",name:"用户管理",children:[{id:"11100",name:"查看",children:[{id:"11110",name:"用户列表"}]},{id:"11200",name:"编辑",children:[{id:"11210",name:"用户列表"},{id:"11220",name:"新增用户"}]},{id:"11300",name:"操作",children:[{id:"11310",name:"新增"},{id:"11320",name:"删除"},{id:"11330",name:"修改"}]}]},{id:"12000",name:"角色管理",children:[{id:"12100",name:"查看",children:[{id:"12110",name:"角色列表"}]},{id:"12200",name:"编辑",children:[{id:"122100",name:"角色列表"},{id:"12220",name:"新增角色"}]},{id:"12300",name:"操作",children:[{id:"12310",name:"新增"},{id:"12320",name:"删除"},{id:"12330",name:"修改"}]}]}]},{id:"20000",name:"个人中心",children:[{id:"21000",name:"个性化设置",children:[{id:"21100",name:"查看",children:[{id:"21110",name:"信息列表"}]},{id:"21200",name:"操作",children:[{id:"21210",name:"重置信息"}]}]},{id:"22000",name:"账户管理",children:[{id:"22100",name:"查看",children:[{id:"22110",name:"账户余额"},{id:"22120",name:"帐变记录"}]}]}]}],tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="600"\n          :span-method="rowspanMethod"\n          :data="tableData">\n          <vxe-table-column field="name_1" title="功能模块"></vxe-table-column>\n          <vxe-table-column field="name_2" title="详细功能"></vxe-table-column>\n          <vxe-table-column field="name_3" title="权限类型">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check_3" @change="check3ChangeEvent(row)">{{ row.name_3 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name_4" title="权限列表">\n            <template v-slot="{ row }">\n              <vxe-checkbox v-model="row.check_4" @change="check4ChangeEvent(row)">{{ row.name_4 }}</vxe-checkbox>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              treeData: [\n                {\n                  id: '10000',\n                  name: '账号管理',\n                  children: [\n                    {\n                      id: '11000',\n                      name: '用户管理',\n                      children: [\n                        {\n                          id: '11100',\n                          name: '查看',\n                          children: [\n                            {\n                              id: '11110',\n                              name: '用户列表'\n                            }\n                          ]\n                        },\n                        {\n                          id: '11200',\n                          name: '编辑',\n                          children: [\n                            {\n                              id: '11210',\n                              name: '用户列表'\n                            },\n                            {\n                              id: '11220',\n                              name: '新增用户'\n                            }\n                          ]\n                        },\n                        {\n                          id: '11300',\n                          name: '操作',\n                          children: [\n                            {\n                              id: '11310',\n                              name: '新增'\n                            },\n                            {\n                              id: '11320',\n                              name: '删除'\n                            },\n                            {\n                              id: '11330',\n                              name: '修改'\n                            }\n                          ]\n                        }\n                      ]\n                    },\n                    {\n                      id: '12000',\n                      name: '角色管理',\n                      children: [\n                        {\n                          id: '12100',\n                          name: '查看',\n                          children: [\n                            {\n                              id: '12110',\n                              name: '角色列表'\n                            }\n                          ]\n                        },\n                        {\n                          id: '12200',\n                          name: '编辑',\n                          children: [\n                            {\n                              id: '122100',\n                              name: '角色列表'\n                            },\n                            {\n                              id: '12220',\n                              name: '新增角色'\n                            }\n                          ]\n                        },\n                        {\n                          id: '12300',\n                          name: '操作',\n                          children: [\n                            {\n                              id: '12310',\n                              name: '新增'\n                            },\n                            {\n                              id: '12320',\n                              name: '删除'\n                            },\n                            {\n                              id: '12330',\n                              name: '修改'\n                            }\n                          ]\n                        }\n                      ]\n                    }\n                  ]\n                },\n                {\n                  id: '20000',\n                  name: '个人中心',\n                  children: [\n                    {\n                      id: '21000',\n                      name: '个性化设置',\n                      children: [\n                        {\n                          id: '21100',\n                          name: '查看',\n                          children: [\n                            {\n                              id: '21110',\n                              name: '信息列表'\n                            }\n                          ]\n                        },\n                        {\n                          id: '21200',\n                          name: '操作',\n                          children: [\n                            {\n                              id: '21210',\n                              name: '重置信息'\n                            }\n                          ]\n                        }\n                      ]\n                    },\n                    {\n                      id: '22000',\n                      name: '账户管理',\n                      children: [\n                        {\n                          id: '22100',\n                          name: '查看',\n                          children: [\n                            {\n                              id: '22110',\n                              name: '账户余额'\n                            },\n                            {\n                              id: '22120',\n                              name: '帐变记录'\n                            }\n                          ]\n                        }\n                      ]\n                    }\n                  ]\n                }\n              ],\n              tableData: []\n            }\n          },\n          created () {\n            this.toColTreeData()\n          },\n          methods: {\n            check3ChangeEvent (row) {\n            let checked = row.check_3\n            let levelList = this.tableData.filter(item => item.id_3 === row.id_3)\n            levelList.forEach(item => {\n              item.check_4 = checked\n            })\n          },\n          check4ChangeEvent (row) {\n            let levelList = this.tableData.filter(item => item.id_3 === row.id_3)\n            let checked = levelList.every(item => item.check_4)\n            levelList.forEach(item => {\n              item.check_3 = checked\n            })\n          },\n          // 转换横向树结构\n          toColTreeData () {\n            let options = { children: 'children' }\n            let list = []\n            let keyMap = {}\n            this.$utils.eachTree(this.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                let row = { }\n                item.keys.forEach((key, index) => {\n                  let level = index + 1\n                  let 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            let fields = ['name_1', 'name_2', 'name_3']\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        }\n        "]}},created:function(){this.toColTreeData()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{check3ChangeEvent:function(e){var t=e.check_3,n=this.tableData.filter(function(t){return t.id_3===e.id_3});n.forEach(function(e){e.check_4=t})},check4ChangeEvent:function(e){var t=this.tableData.filter(function(t){return t.id_3===e.id_3}),n=t.every(function(e){return e.check_4});t.forEach(function(e){e.check_3=n})},toColTreeData:function(){var e={children:"children"},t=[],n={};this.$utils.eachTree(this.treeData,function(e,a,l,o,i){if(n[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 a=t+1,l=n[e];r["check_".concat(a)]=!1,r["id_".concat(a)]=l.id,r["name_".concat(a)]=l.name}),t.push(r)}},e),this.keyMap=n,this.tableData=t},rowspanMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["name_1","name_2","name_3"],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}}}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},a151:function(e,t,n){"use strict";var a=n("3590"),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    通过 "),n("table-api-link",{attrs:{prop:"customs"}}),e._v(" 来初始化绑定动态列：{field: 字段名, visible: 默认是否显示}"),n("br"),e._v("\n    通过函数式调用 "),n("table-api-link",{attrs:{prop:"showColumn"}}),e._v("、"),n("table-api-link",{attrs:{prop:"hideColumn"}}),e._v(" 操作列的显示/隐藏"),n("br"),e._v("\n    该功能对于列比较多的表格非常有用，可以轻松实现强大的显示/隐藏列的配置功能，实时调用 refreshColumn 刷新列\n  ")],1),n("div",{staticClass:"table-oper"},[n("span",{staticClass:"menu-btn"},[n("i",{staticClass:"icon-menu"}),n("div",{staticClass:"menu-wrapper"},[e._l(e.customColumns1,function(t,a){return[t.property?n("vxe-checkbox",{key:a,staticClass:"checkbox-item",on:{change:function(t){return e.$refs.xTable1.refreshColumn()}},model:{value:t.visible,callback:function(n){e.$set(t,"visible",n)},expression:"column.visible"}},[e._v(e._s(t.title))]):e._e()]})],2)])]),n("vxe-table",{ref:"xTable1",attrs:{border:"",height:"200",data:e.tableData,customs:e.customColumns1},on:{"update:customs":function(t){e.customColumns1=t}}},[n("vxe-table-column",{attrs:{type:"index",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("code",{staticClass:"scss"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("如果是根据服务端数据控制显示/隐藏列，则需要手动调用 "),n("table-api-link",{attrs:{prop:"reloadCustoms"}}),e._v(" 更新即可")],1),n("div",{staticClass:"table-oper"},[n("span",{staticClass:"menu-btn"},[n("i",{staticClass:"icon-menu"}),n("div",{staticClass:"menu-wrapper"},[e._l(e.customColumns2,function(t,a){return[t.property?n("vxe-checkbox",{key:a,staticClass:"checkbox-item",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))]):e._e()]})],2)])]),n("vxe-table",{ref:"xTable2",attrs:{border:"",height:"200",loading:e.loading,data:e.tableData,customs:e.customColumns2},on:{"update:customs":function(t){e.customColumns2=t}}},[n("vxe-table-column",{attrs:{type:"index",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[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  ")]),n("p",{staticClass:"tip"},[e._v("通过属性 "),n("table-api-link",{attrs:{prop:"field"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"visible"}}),e._v(" 设置默认隐藏")],1),e._l(e.customColumns3,function(t,a){return[t.property?n("vxe-checkbox",{key:a,staticClass:"checkbox-item",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-toolbar",{attrs:{data:e.tableData,setting:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable3.refreshColumn()}}},[e._v("刷新")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable3",attrs:{border:"",height:"300",data:e.tableData,customs:e.customColumns3},on:{"update:customs":function(t){e.customColumns3=t}}},[n("vxe-table-column",{attrs:{type:"index",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:{title:"基本信息"}},[n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),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[6]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],2)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{loading:!1,tableData:[],customColumns1:[{field:"age",visible:!1}],customColumns2:[],customColumns3:[{field:"name",visible:!1},{field:"sex",visible:!1}],demoCodes:['\n        <div class="table-oper">\n          <span class="menu-btn">\n            <i class="icon-menu"></i>\n            <div class="menu-wrapper">\n              <template v-for="(column,index) in customColumns">\n                <vxe-checkbox\n                  v-if="column.property"\n                  class="checkbox-item"\n                  v-model="column.visible"\n                  :key="index"\n                  @change="$refs.xTable.refreshColumn()">{{ column.title }}</vxe-checkbox>\n              </template>\n            </div>\n          </span>\n        </div>\n\n        <vxe-table\n          ref="xTable"\n          border\n          height="400"\n          :data="tableData"\n          :customs.sync="customColumns">\n          <vxe-table-column type="index" 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              customColumns: [\n                {\n                  field: 'age',\n                  visible: false\n                }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          }\n        }\n        ","\n        .table-oper {\n          height: 20px;\n          width: 100%;\n        }\n        .menu-btn {\n          position: relative;\n          width: 20px;\n          height: 20px;\n          float: right;\n          &:hover {\n            .menu-wrapper {\n              display: block;\n            }\n          }\n        }\n        .menu-wrapper {\n          display: none;\n          position: absolute;\n          width: 80px;\n          top: 16px;\n          right: 0;\n          z-index: 9;\n          background-color: #fff;\n          font-size: 14px;\n          padding: 4px 10px;\n          user-select: none;\n          border: 1px solid #e8eaec;\n          .checkbox-item {\n            display: block;\n            margin: 4px 0;\n          }\n        }\n        .icon-menu {\n          width: 16px;\n          height: 0px;\n          display: inline-block;\n          margin-bottom: 16px;\n          box-shadow: 0 6px 0 2px #606266, 0 0 0 2px #606266, 0 12px 0 2px #606266;\n        }\n        ",'\n        <div class="table-oper">\n          <span class="menu-btn">\n            <i class="icon-menu"></i>\n            <div class="menu-wrapper">\n              <template v-for="(column,index) in customColumns">\n                <vxe-checkbox\n                  v-if="column.property"\n                  class="checkbox-item"\n                  v-model="column.visible"\n                  :key="index"\n                  @change="$refs.xTable.refreshColumn()">{{ column.title }}</vxe-checkbox>\n              </template>\n            </div>\n          </span>\n        </div>\n\n        <vxe-table\n          ref="xTable"\n          border\n          height="400"\n          :data="tableData"\n          :customs.sync="customColumns">\n          <vxe-table-column type="index" 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              customColumns: []\n            }\n          },\n          created () {\n            this.loading = true\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n            setTimeout(() => {\n              this.loading = false\n              this.$refs.xTable.reloadCustoms([\n                {\n                  field: 'name',\n                  visible: false\n                }\n              ])\n            }, 300)\n          }\n        }\n        ","\n        .table-oper {\n          height: 20px;\n          width: 100%;\n        }\n        .menu-btn {\n          position: relative;\n          width: 20px;\n          height: 20px;\n          float: right;\n          &:hover {\n            .menu-wrapper {\n              display: block;\n            }\n          }\n        }\n        .menu-wrapper {\n          display: none;\n          position: absolute;\n          width: 80px;\n          top: 16px;\n          right: 0;\n          z-index: 9;\n          background-color: #fff;\n          font-size: 14px;\n          padding: 4px 10px;\n          user-select: none;\n          border: 1px solid #e8eaec;\n          .checkbox-item {\n            display: block;\n            margin: 4px 0;\n          }\n        }\n        .icon-menu {\n          width: 16px;\n          height: 0px;\n          display: inline-block;\n          margin-bottom: 16px;\n          box-shadow: 0 6px 0 2px #606266, 0 0 0 2px #606266, 0 12px 0 2px #606266;\n        }\n        ",'\n        <template v-for="(column,index) in customColumns">\n          <vxe-checkbox\n            v-if="column.property"\n            class="checkbox-item"\n            v-model="column.visible"\n            :key="index">{{ column.title }}</vxe-checkbox>\n        </template>\n\n        <vxe-toolbar :data="tableData" setting>\n          <template v-slot:buttons>\n            <vxe-button @click="$refs.xTable.refreshColumn()">刷新</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable"\n          border\n          height="400"\n          :data="tableData"\n          :customs.sync="customColumns">\n          <vxe-table-column type="index" 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 title="基本信息">\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 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              customColumns: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          }\n        }\n        "]}},created:function(){var e=this;this.loading=!0,this.tableData=window.MOCK_DATA_LIST.slice(0,20),setTimeout(function(){e.loading=!1,e.$refs.xTable2&&e.$refs.xTable2.reloadCustoms([{field:"name",visible:!1}])},300)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})}},s=r,c=(n("a151"),n("2877")),d=Object(c["a"])(s,a,l,!1,null,"ae02625c",null);t["default"]=d.exports},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("vxe-table",{attrs:{border:"",height:"500","highlight-hover-row":"","show-overflow":"",resizable:"",data:e.tableData},on:{"header-cell-click":e.headerCellClickEvent,"header-cell-dblclick":e.headerCellDBLClickEvent,"cell-click":e.cellClickEvent,"cell-dblclick":e.cellDBLClickEvent,"cell-mouseenter":e.cellMouseenterEvent,"cell-mouseleave":e.cellMouseleaveEvent,"body-scroll":e.bodyScrollEvent}},[n("vxe-table-column",{attrs:{type:"index",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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          height="500"\n          highlight-hover-row\n          show-overflow\n          resizable\n          :data="tableData"\n          @header-cell-click="headerCellClickEvent"\n          @header-cell-dblclick="headerCellDBLClickEvent"\n          @cell-click="cellClickEvent"\n          @cell-dblclick="cellDBLClickEvent"\n          @cell-mouseenter="cellMouseenterEvent"\n          @cell-mouseleave="cellMouseleaveEvent"\n          @body-scroll="bodyScrollEvent">\n          <vxe-table-column type="index" 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 ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`表头单元格点击${column.title}`)\n            },\n            headerCellDBLClickEvent ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`表头单元格双击${column.title}`)\n            },\n            cellClickEvent ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`单元格点击${column.title}`)\n            },\n            cellDBLClickEvent ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`单元格双击${column.title}`)\n            },\n            cellMouseenterEvent ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`鼠标进入单元格${column.title}`)\n            },\n            cellMouseleaveEvent ({ row, rowIndex, column, columnIndex }, event) {\n              console.log(`鼠标离开单元格${column.title}`)\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},created:function(){var e=window.MOCK_DATA_LIST.slice(0,20);this.tableData=e},methods:{headerCellClickEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("表头单元格点击".concat(n.title))},headerCellDBLClickEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("表头单元格双击".concat(n.title))},cellClickEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("单元格点击".concat(n.title))},cellDBLClickEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("单元格双击".concat(n.title))},cellMouseenterEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("鼠标进入单元格".concat(n.title))},cellMouseleaveEvent:function(e,t){e.row,e.rowIndex;var n=e.column;e.columnIndex;console.log("鼠标离开单元格".concat(n.title))},bodyScrollEvent:function(e,t){var n=e.scrollTop,a=e.scrollLeft;console.log("滚动事件scrollTop=".concat(n," scrollLeft=").concat(a))}}},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:"exportCsv"}}),e._v(" 函数可以直接将表格导出为 .csv 格式的文件")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCsvEvent}},[e._v("默认导出")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable1",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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[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.exportCsvEvent2}},[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:"index",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.exportCsvEvent3}},[e._v("导出指定第10-20行")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable3",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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[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.exportCsvEvent4}},[e._v("完整配置")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable4",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",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[6]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[7]))]),e._v("\n  ")])],1)},l=[],o=(n("6762"),n("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportCsvEvent">默认导出</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable1"\n          highlight-hover-row\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="index" 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            exportCsvEvent () {\n              this.$refs.xTable1.exportCsv()\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportCsvEvent2">导出指定列 [name,sex]</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable2"\n          highlight-hover-row\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="index" 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            exportCsvEvent2 () {\n              this.$refs.xTable2.exportCsv({\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="exportCsvEvent3">导出指定第10-20行</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable3"\n          highlight-hover-row\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="index" 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            exportCsvEvent3 () {\n              this.$refs.xTable3.exportCsv({\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="exportCsvEvent4">完整配置</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable4"\n          highlight-hover-row\n          height="300"\n          :data="tableData">\n          <vxe-table-column type="index" 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            exportCsvEvent4 () {\n              this.$refs.xTable1.exportCsv({\n                filename: '自定义文件名.csv',\n                original: true,\n                isHeader: false,\n                data: this.tableData.map(row => {\n                  row.date = this.$utils.toDateString(row.date, 'yyyy-MM-dd')\n                  return row\n                })\n              })\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:{exportCsvEvent:function(){this.$refs.xTable1.exportCsv()},exportCsvEvent2:function(){this.$refs.xTable2.exportCsv({columnFilterMethod:function(e){return["name","sex"].includes(e.property)}})},exportCsvEvent3:function(){this.$refs.xTable3.exportCsv({dataFilterMethod:function(e,t){return t>=9&&t<20}})},exportCsvEvent4:function(){var e=this;this.$refs.xTable1.exportCsv({filename:"自定义文件名.csv",original:!0,isHeader:!1,data:this.tableData.map(function(t){return t.date=e.$utils.toDateString(t.date,"yyyy-MM-dd"),t})})}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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(" 非常简单就可以实现自定义排序")],1),n("vxe-table",{ref:"xTable",staticClass:"my-sort",attrs:{border:"",resizable:"","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData},on:{"header-cell-click":e.headerCellClickEvent}},[n("vxe-table-column",{attrs:{type:"index",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:"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    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n  ")])],1)},l=[],o=(n("55dd"),n("5df3"),n("1c4c"),n("ac6a"),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          class="my-sort"\n          ref="xTable"\n          height="300"\n          :data="tableData"\n          @header-cell-click="headerCellClickEvent">\n          <vxe-table-column type="index" 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="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, 50)\n          },\n          methods: {\n            headerCellClickEvent ({ column, triggerResizable, triggerSort, triggerFilter }) {\n              // 如果点击了列并且没触发对应的按钮、则手动排序、列宽拖动\n              if (column.sortable && !(triggerResizable || triggerSort || triggerFilter)) {\n                this.$refs.xTable.sort(column.property)\n              }\n            },\n            filterNameMethod ({ value, row, column }) {\n              return row.id >= value\n            }\n          }\n        }\n        ","\n        .my-sort .vxe-sort-wrapper {\n          display: none;\n        }\n        .my-sort .vxe-header--column.is--sortable {\n          cursor: pointer;\n          user-select: none;\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){i.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)&&this.$refs.xTable.sort(t.property)},filterNameMethod:function(e){var t=e.value,n=e.row;e.column;return n.id>=t}}},s=r,c=(n("e1b0"),n("2877")),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）"),n("br"),n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"RendererAPI"}}},[e._v("渲染器")]),e._v("，可以更好的复用）\n  ")],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}])}),n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"100"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.seq;return[n("vxe-button",[e._v("按钮"+e._s(a))])]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name",sortable:""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.rowIndex,l=t.columnIndex;return[n("span",[e._v("rowIndex= "+e._s(a))]),n("span",[e._v("columnIndex= "+e._s(l))])]}}])}),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(t){t.column;return[n("vxe-tooltip",{attrs:{content:"这样玩也行？"},model:{value:e.showSexTip,callback:function(t){e.showSexTip=t},expression:"showSexTip"}},[n("span",{staticStyle:{color:"red"},on:{click:function(t){e.showSexTip=!e.showSexTip}}},[e._v("这样玩也行")])])]}},{key:"filter",fn:function(t){var a=t.column,l=t.context;return[e._l(a.filters,function(t,a){return[n("input",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:a,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,l)}]}})]})]}},{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(e){e.column;return[n("vxe-input",{attrs:{placeholder:"这样也行",size:"mini"}})]}},{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:"img",title:"图片也行",width:"120","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(e){var t=e.row;return[n("img",{staticStyle:{width:"100px"},attrs:{src:t.img}})]}}])})],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("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{showSexTip:!1,tableData:[],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        </vxe-toolbar>\n\n        <vxe-table\n          border\n          :data="tableData">\n          <vxe-table-column type="index" width="100">\n            <template v-slot="{ seq }">\n              <vxe-button>按钮{{ seq }}</vxe-button>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="name" title="app.body.label.name" sortable>\n            <template v-slot="{ rowIndex, columnIndex }">\n              <span>rowIndex= {{ rowIndex }}</span>\n              <span>columnIndex= {{ columnIndex }}</span>\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="{ column }">\n              <vxe-tooltip v-model="showSexTip" content="这样玩也行？">\n                <span style="color: red;" @click="showSexTip = !showSexTip">这样玩也行</span>\n              </vxe-tooltip>\n            </template>\n            <template v-slot:filter="{ column, context }">\n              <template v-for="(option, index) in column.filters">\n                <input type="type" v-model="option.data" :key="index" @input="changeFilterEvent($event, option, context)">\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="{ column }">\n              <vxe-input 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="img" title="图片也行" width="120" show-overflow>\n            <template v-slot="{ row }">\n              <img :src="row.img" style="width: 100px;">\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              showSexTip: false,\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            formatDate (value) {\n              return this.$utils.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, context) {\n              context.changeMultipleOption(evnt, !!option.data, option)\n            }\n          }\n        }\n        "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){i.a.highlightBlock(e)})},methods:{formatDate:function(e){return this.$utils.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.changeMultipleOption(e,!!t.data,t)}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},e1b0:function(e,t,n){"use strict";var a=n("2e28"),l=n.n(a);l.a},ec08: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:"index",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("5df3"),n("1c4c"),n("ac6a"),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="index" 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},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-expand-change":e.toggleExpandChangeEvent}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"60"},scopedSlots:e._u([{key:"default",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:"index",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"60"},scopedSlots:e._u([{key:"default",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(" 参数设置默认展开所有行")],1),n("vxe-table",{attrs:{border:"",data:e.tableData,"expand-config":{expandAll:!0}}},[n("vxe-table-column",{attrs:{type:"index",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"60"},scopedSlots:e._u([{key:"default",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:"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[4]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n  ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),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-expand-change="toggleExpandChangeEvent">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot="{ 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 }) {\n              console.log('行展开、收起事件')\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="index" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot="{ 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=\n          "tableData"\n          :expand-config="{expandAll: true}">\n          <vxe-table-column type="index" width="60"></vxe-table-column>\n          <vxe-table-column type="expand" width="60">\n            <template v-slot="{ 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="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        "]}},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){e.row;console.log("行展开、收起事件")}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},f11d:function(e,t,n){"use strict";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(e){return l.focus(),l.select(),l.setSelectionRange(0,l.value.length),a.execCommand("copy",!!e)}function r(e){var t=!1;try{o(e),t=i(),t||(t=i(1))}catch(n){}return t}r.copy=r,t["a"]=r}}]);