advanced.c4d718b5.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("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 合计的逻辑都是自行实现的，该示例仅供参考）")],1)],1),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","highlight-hover-row":"","show-footer":"",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},"0d13":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("keep-alive 切换，v-show 可以使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 自动监听响应式宽，也可以手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算宽度")],1),n("p",[n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable1"}}},[e._v("表格1")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable2"}}},[e._v("表格2")]),n("router-link",{staticClass:"link",attrs:{to:{name:"TableKeepAliveTable3"}}},[e._v("表格3")])],1),n("keep-alive",[n("router-view")],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n  ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{demoCodes:['\n        <p>\n          <router-link class="link" :to="{name: \'TableKeepAliveTable1\'}">表格1</router-link>\n          <router-link class="link" :to="{name: \'TableKeepAliveTable2\'}">表格2</router-link>\n          <router-link class="link" :to="{name: \'TableKeepAliveTable3\'}">表格3</router-link>\n        </p>\n\n        <keep-alive>\n          <router-view></router-view>\n        </keep-alive>\n        ']}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"0efe":function(e,t,n){"use strict";var a=n("5413"),l=n.n(a);l.a},"1e0d":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("多页签切换，v-show 可以使用 "),n("table-api-link",{attrs:{prop:"auto-resize"}}),e._v(" 或者 "),n("table-api-link",{attrs:{prop:"sync-resize"}}),e._v(" 自动监听响应式宽，也可以手动调用 "),n("table-api-link",{attrs:{prop:"recalculate"}}),e._v(" 重新计算宽度")],1),n("p",[n("vxe-radio",{attrs:{name:"xtabs",label:"tab1"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签1")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab2"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签2")]),n("vxe-radio",{attrs:{name:"xtabs",label:"tab3"},model:{value:e.selectTab,callback:function(t){e.selectTab=t},expression:"selectTab"}},[e._v("页签3")])],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab1"===e.selectTab,expression:"selectTab === 'tab1'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":"tab1"===e.selectTab,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:"address",title:"Address","show-overflow":""}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab2"===e.selectTab,expression:"selectTab === 'tab2'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":"tab2"===e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1),n("div",{directives:[{name:"show",rawName:"v-show",value:"tab3"===e.selectTab,expression:"selectTab === 'tab3'"}]},[n("vxe-table",{attrs:{border:"","sync-resize":"tab3"===e.selectTab,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])])},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{selectTab:"tab1",tableData:[],demoCodes:['\n        <p>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab1">页签1</vxe-radio>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab2">页签2</vxe-radio>\n          <vxe-radio v-model="selectTab" name="xtabs" label="tab3">页签3</vxe-radio>\n        </p>\n\n        <div v-show="selectTab === \'tab1\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab === \'tab1\'"\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="address" title="Address" show-overflow></vxe-table-column>\n          </vxe-table>\n        </div>\n\n        <div v-show="selectTab === \'tab2\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab === \'tab2\'"\n            :data="tableData">\n            <vxe-table-column type="radio" width="60"></vxe-table-column>\n            <vxe-table-column field="role" title="Rolw"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column field="num" title="Num"></vxe-table-column>\n            <vxe-table-column field="date12" title="Date"></vxe-table-column>\n          </vxe-table>\n        </div>\n\n        <div v-show="selectTab === \'tab3\'">\n          <vxe-table\n            border\n            :sync-resize="selectTab === \'tab3\'"\n            :data="tableData">\n            <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n            <vxe-table-column field="nickname" title="nickname"></vxe-table-column>\n            <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n            <vxe-table-column field="age" title="Age"></vxe-table-column>\n            <vxe-table-column field="date12" title="Date"></vxe-table-column>\n            <vxe-table-column field="region" title="Region"></vxe-table-column>\n            <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n          </vxe-table>\n        </div>\n        ',"\n        export default {\n          data () {\n            return {\n              selectTab: 'tab1',\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"21f3":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n    使用自带的分页 "),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:"checkbox-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性"),n("br"),e._v("\n    启用 reserve 功能需要有 row-id 唯一主键\n  ")],1),n("p",{staticClass:"tip"},[e._v("设置分页 border 样式")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"200","row-id":"id",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",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:{border:"",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  ")]),n("p",{staticClass:"tip"},[e._v("设置分页 background 样式")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"200","row-id":"id",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",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:{background:"",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[2]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("设置分页 perfect 样式")]),n("vxe-table",{attrs:{border:"","show-overflow":"",height:"200","row-id":"id",loading:e.loading,"start-index":(e.tablePage.currentPage-1)*e.tablePage.pageSize,"checkbox-config":{reserve:!0},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",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:{perfect:"",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[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{loading:!1,tableData:[],tablePage:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n        <vxe-table\n          border\n          show-overflow\n          height="200"\n          row-id="id"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="checkbox" 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          border\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        ",'\n        <vxe-table\n          border\n          show-overflow\n          height="200"\n          row-id="id"\n          :loading="loading"\n          :data="tableData">\n          <vxe-table-column type="checkbox" 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          background\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        ",'\n        <vxe-table\n          border\n          show-overflow\n          height="200"\n          row-id="id"\n          :loading="loading"\n          :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"\n          :checkbox-config="{reserve: true}"\n          :data="tableData">\n          <vxe-table-column type="checkbox" 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          perfect\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},"25ad":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("子路由 2")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"radio",width:"60"}}),n("vxe-table-column",{attrs:{field:"role",title:"Rolw"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"num",title:"Num"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}})],1)],1)},l=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,30),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"269e":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("右键快捷菜单，支持表头菜单、内容菜单、表尾菜单，配置项 "),n("table-api-link",{attrs:{prop:"context-menu"}}),e._v("={header,body,footer}")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-footer":"","highlight-current-row":"","highlight-current-column":"","footer-method":e.footerMethod,data:e.tableData,"context-menu":{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},"2b5c":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("子路由 1")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"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:"address",title:"Address","show-overflow":""}})],1)],1)},l=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,15),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"2b6d":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.addColumn()}}},[e._v("最后增加一列")]),n("vxe-button",{on:{click:function(t){return e.removeColumn()}}},[e._v("删除最后一列")]),n("vxe-button",{on:{click:function(t){return e.updateFilter(4)}}},[e._v("修改第五列筛选条件")]),n("vxe-button",{on:{click:function(t){return e.toggleFixedColumn(0,"left")}}},[e._v("切换第一列固定")]),n("vxe-button",{on:{click:function(t){return e.toggleFixedColumn(1,"left")}}},[e._v("切换第二列固定")]),n("vxe-button",{on:{click:function(t){return e.updateWidthColumn(2,500)}}},[e._v("修改第三列宽度")]),n("vxe-button",{on:{click:function(t){return e.updateWidthColumn(3,500)}}},[e._v("修改第四列宽度")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"","highlight-hover-row":"","highlight-current-row":"",height:"300",data:e.tableData}},e._l(e.tableColumn,(function(t,a){return n("vxe-table-column",e._b({key:a},"vxe-table-column",t,!1))})),1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("配合 v-for 动态生成，动态改变宽度、固定列..等"),n("br"),n("span",{staticClass:"red"},[e._v("（注：动态更新属性必须要先定义，否则无法监听到属性变化）")])])}],o=(n("d263"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],tableColumn:[{type:"index",width:60,fixed:null},{type:"checkbox",width:50,fixed:null},{field:"name",title:"Name",width:200},{field:"nickname",title:"Nickname",width:300},{field:"sex",title:"Sex",width:200,filters:[{value:"1",label:"男"}]},{field:"role",title:"Role",width:200},{field:"address",title:"Address",width:300,showOverflow:!0}],demoCodes:['\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="addColumn()">最后增加一列</vxe-button>\n            <vxe-button @click="removeColumn()">删除最后一列</vxe-button>\n            <vxe-button @click="toggleFixedColumn(0, \'left\')">切换第一列固定</vxe-button>\n            <vxe-button @click="toggleFixedColumn(1, \'left\')">切换第二列固定</vxe-button>\n            <vxe-button @click="updateWidthColumn(2, 500)">修改第三列宽度</vxe-button>\n            <vxe-button @click="updateWidthColumn(3, 500)">修改第四列宽度</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          border\n          highlight-hover-row\n          highlight-current-row\n          ref="xTable"\n          height="300"\n          :data="tableData">\n          <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: [],\n              tableColumn: [\n                { type: 'index', width: 60, fixed: null },\n                { type: 'checkbox', width: 50, fixed: null },\n                { field: 'name', title: 'Name', width: 200 },\n                { field: 'nickname', title: 'Nickname', width: 300 },\n                { field: 'sex', title: 'Sex', width: 200 },\n                { field: 'role', title: 'Role', width: 200 },\n                { field: 'address', title: 'Address', width: 300, showOverflow: true }\n              ]\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n          },\n          methods: {\n            addColumn () {\n              const uniqueId = this.$utils.uniqueId()\n              this.tableColumn.push({\n                field: `new_${uniqueId}`,\n                title: `新列_${uniqueId}`,\n                minWidth: 100\n              })\n            },\n            removeColumn () {\n              this.tableColumn.pop()\n            },\n            updateFilter (index) {\n              let xTable = this.$refs.xTable\n              xTable.filter(this.tableColumn[index].field, options => {\n                // 修改筛选列表，可以通过 checked 属性设置默认勾选\n                return [\n                  { value: '1', label: '男' },\n                  { value: '0', label: '女', checked: true }\n                ]\n              }).then(() => {\n                // 修改条件之后，需要手动调用 updateData 处理表格数据\n                xTable.updateData()\n              })\n            },\n            toggleFixedColumn (index, value) {\n              const xTable = this.$refs.xTable\n              this.tableColumn[index].fixed = this.tableColumn[index].fixed ? null : value\n              // 更改了列属性，需要手动刷新列\n              this.$nextTick(() => {\n                xTable.refreshColumn()\n                  // 由于固定列的动态切换是无状态的，所以需要手动刷新滚动位置\n                  .then(() => xTable.refreshScroll())\n              })\n            },\n            updateWidthColumn (index, value) {\n              this.tableColumn[index].width = value\n              // 更改了列属性，需要手动刷新列\n              this.$nextTick(() => {\n                this.$refs.xTable.refreshColumn()\n              })\n            }\n          }\n        }\n        "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},methods:{addColumn:function(){var e=this.$utils.uniqueId();this.tableColumn.push({field:"new_".concat(e),title:"新列_".concat(e),minWidth:100})},removeColumn:function(){this.tableColumn.pop()},updateFilter:function(e){var t=this.$refs.xTable;t.filter(this.tableColumn[e].field,(function(e){return[{value:"1",label:"男"},{value:"0",label:"女",checked:!0}]})).then((function(){t.updateData()}))},toggleFixedColumn:function(e,t){var n=this.$refs.xTable;this.tableColumn[e].fixed=this.tableColumn[e].fixed?null:t,this.$nextTick((function(){n.refreshColumn().then((function(){return n.refreshScroll()}))}))},updateWidthColumn:function(e,t){var n=this;this.tableColumn[e].width=t,this.$nextTick((function(){n.$refs.xTable.refreshColumn()}))}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.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},"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("toolbar-api-link",{attrs:{prop:"checkMethod"}}),e._v(" 设置个性化列禁止勾选"),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,checkMethod:e.checkColumnMethod}},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, checkMethod: checkColumnMethod}">\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          methods: {\n            checkColumnMethod ({ column }) {\n              if (column.property === 'role') {\n                return false\n              }\n              return true\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:{checkColumnMethod:function(e){var t=e.column;return"role"!==t.property}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"3e18":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("键盘移动高亮行，设置 "),n("table-api-link",{attrs:{prop:"keyboard-config"}}),e._v("={isArrow: true} 启用方向键功能")],1),n("vxe-table",{attrs:{border:"",resizable:"","highlight-current-row":"",height:"500",data:e.tableData,"keyboard-config":{isArrow:!0}}},[n("vxe-table-column",{attrs:{type:"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},5164:function(e,t,n){"use strict";var a=n("5a90"),l=n.n(a);l.a},5413:function(e,t,n){},"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    合并列，通过 "),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 方法，使用 $rowIndex 获取渲染中的行索引，rowIndex 指向真实数据的行索引，可以根据不同场景使用"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 合并的逻辑都是自行实现的，该示例仅供参考）")],1)],1),n("vxe-table",{attrs:{border:"",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){},"5a90":function(e,t,n){},"662d":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("子路由 3")]),n("vxe-table",{attrs:{border:"",height:"400",loading:e.loading,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"nickname"}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"date12",title:"Date"}}),n("vxe-table-column",{attrs:{field:"region",title:"Region"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1)],1)},l=[],o={data:function(){return{loading:!1,tableData:[]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,50),e.loading=!1}),300)}},i=o,r=n("2877"),s=Object(r["a"])(i,a,l,!1,null,null,null);t["default"]=s.exports},"6c0e":function(e,t,n){"use strict";var a=n("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"),n("span",{staticClass:"red"},[e._v("注：组成一套完整的表格，工具栏和表格必须是上下相邻关系，渲染时会自动进行上下关联，不允许更换位置（如果是复杂的布局不建议使用工具栏，自行写模板即可）")])],1),n("vxe-toolbar",{attrs:{setting:"",export:"",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          export\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    筛选高级用法、动态更改筛选条件、自定义更加复杂的模板事件，通过调用 "),n("table-api-link",{attrs:{prop:"filter"}}),e._v(" 和 "),n("table-api-link",{attrs:{prop:"updateData"}}),e._v(" 方法来处理复杂场景的筛选逻辑"),n("br"),e._v("\n    context 对象:"),n("br"),e._v("\n      "),n("span",{staticClass:"orange"},[e._v("changeOption(event, checked, option) 更新选项的状态")]),n("br"),e._v("\n      "),n("span",{staticClass:"orange"},[e._v("confirmFilter() 确认筛选")]),n("br"),e._v("\n      "),n("span",{staticClass:"orange"},[e._v("resetFilter() 清除筛选条件")])],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:e.nameFilterList,"filter-method":e.filterNameMethod}}),n("vxe-table-column",{attrs:{field:"role",title:"Role",sortable:"",filters:[{data:""}],"filter-method":e.filterRoleMethod},scopedSlots:e._u([{key:"filter",fn:function(t){var a=t.column,l=t.context;return e._l(a.filters,(function(t,a){return n("select",{directives:[{name:"model",rawName:"v-model",value:t.data,expression:"option.data"}],key:a,staticClass:"my-select",on:{change:[function(n){var a=Array.prototype.filter.call(n.target.options,(function(e){return e.selected})).map((function(e){var t="_value"in e?e._value:e.value;return t}));e.$set(t,"data",n.target.multiple?a:a[0])},function(e){return l.changeOption(e,!!t.data,t)}]}},e._l(e.roleList,(function(t,a){return n("option",{key:a,domProps:{value:t}},[e._v(e._s(t))])})),0)}))}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",sortable:"","filter-multiple":!1,filters:[{label:"Man",value:"1"},{label:"Woman",value:"0"}]}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",filters:[{data:""}],"filter-method":e.filterAgeMethod},scopedSlots:e._u([{key:"filter",fn:function(t){var a=t.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,staticClass:"my-input",attrs:{type:"type",placeholder:"按回车确认筛选"},domProps:{value:t.data},on:{input:[function(n){n.target.composing||e.$set(t,"data",n.target.value)},function(e){return l.changeOption(e,!!t.data,t)}],keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:l.confirmFilter()}}})]}))]}}])}),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    "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),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:[],roleList:["","前端","后端","设计师"],nameFilterList:[{label:"id大于10",value:10},{label:"id大于40",value:40}],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="nameFilterList" :filter-method="filterNameMethod"></vxe-table-column>\n          <vxe-table-column field="role" title="Role" sortable :filters="[{ data: \'\' }]" :filter-method="filterRoleMethod">\n            <template v-slot:filter="{ column, context }">\n              <select class="my-select" v-model="option.data" v-for="(option, index) in column.filters" :key="index" @change="context.changeOption($event, !!option.data, option)">\n                <option v-for="(label, cIndex) in roleList" :key="cIndex" :value="label">{{ label }}</option>\n              </select>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="Sex" sortable :filter-multiple="false" :filters="[{label: \'Man\', value: \'1\'}, {label: \'Woman\', value: \'0\'}]"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" :filters="[{ data: \'\' }]" :filter-method="filterAgeMethod">\n            <template v-slot:filter="{ column, context }">\n              <template v-for="(option, index) in column.filters">\n                <input class="my-input" type="type" :key="index" v-model="option.data" @input="context.changeOption($event, !!option.data, option)" @keyup.enter="context.confirmFilter()" placeholder="按回车确认筛选">\n              </template>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="time" title="Time" sortable></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              roleList: ['', '前端', '后端', '设计师'],\n              nameFilterList: [\n                { label: 'id大于10', value: 10 },\n                { label: 'id大于40', value: 40 }\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, 50)\n                  this.loading = false\n                  resolve()\n                }, 300)\n              })\n            },\n            filterNameMethod ({ value, row, column }) {\n              return row.id >= value\n            },\n            filterRoleMethod ({ option, row }) {\n              return row.role === option.data\n            },\n            filterAgeMethod ({ option, row }) {\n              return row.age === Number(option.data)\n            },\n            updateNameFilterEvent () {\n              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        ","\n        .my-select {\n          width: 100px;\n          height: 32px;\n        }\n        .my-input {\n          width: 140px;\n          height: 32px;\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},filterRoleMethod:function(e){var t=e.option,n=e.row;return n.role===t.data},filterAgeMethod:function(e){var t=e.option,n=e.row;return n.age===Number(t.data)},updateNameFilterEvent:function(){var e=this.$refs.xTable;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("0efe"),n("2877")),d=Object(c["a"])(s,a,l,!1,null,"2ba5b5e8",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},"8e5c":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n    导入数据：通过 "),n("table-api-link",{attrs:{prop:"importData"}}),e._v(" 函数可以直接将数据导入表格中"),n("br"),n("span",{staticClass:"red"},[e._v("注：附件中的字段名必须和表格一致，数据格式不正确将无法导入")])],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.clearDataEvent}},[e._v("清空数据")]),n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("导出数据")]),n("vxe-button",{on:{click:e.importDataEvent}},[e._v("导入数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{"highlight-hover-row":"",height:"400",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  ")])],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="clearDataEvent">清空数据</vxe-button>\n            <vxe-button @click="exportDataEvent">导出数据</vxe-button>\n            <vxe-button @click="importDataEvent">导入数据</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          ref="xTable"\n          highlight-hover-row\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="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, 10)\n          },\n          methods: {\n            clearDataEvent () {\n              this.tableData = []\n            },\n            exportDataEvent () {\n              this.$refs.xTable.openExport()\n            },\n            importDataEvent () {\n              this.$refs.xTable.importData()\n            }\n          }\n        }\n        "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){i.a.highlightBlock(e)}))},methods:{clearDataEvent:function(){this.tableData=[]},exportDataEvent:function(){this.$refs.xTable.openExport()},importDataEvent:function(){this.$refs.xTable.importData()}}},s=r,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},9976:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("更加复杂的合并行，实现横向树结构"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"span-method"}}),e._v(" 合并的逻辑都是自行实现的，该示例仅供参考）")],1)]),n("vxe-table",{attrs:{border:"",height:"600","span-method":e.rowspanMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{field:"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},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    还可以通过修改列的 visible 属性，可以轻松实现强大的显示/隐藏列的配置功能，最后调用 "),n("table-api-link",{attrs:{prop:"refreshColumn"}}),e._v(" 刷新列\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("5164"),n("2877")),d=Object(c["a"])(s,a,l,!1,null,"6b77aa90",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    通过调用 "),n("table-api-link",{attrs:{prop:"exportData"}}),e._v(" 函数指定 type='csv' 可以直接将表格导出为 CSV/HTML/XML/TXT 格式的文件"),n("br"),n("span",{staticClass:"red"},[e._v("注：默认会排除 field 为空和 type 相关的功能列；如果需要导出索引，请通过 "),n("table-api-link",{attrs:{prop:"columnFilterMethod"}}),e._v(" 自定义筛选条件")],1)],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("默认导出")]),n("vxe-button",{on:{click:e.exportSelectEvent}},[e._v("导出选中")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable1",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),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.exportDataEvent2}},[e._v("导出指定列 [name,sex]")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable2",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"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.exportDataEvent3}},[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.exportDataEvent4}},[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="exportDataEvent">默认导出</vxe-button>\n            <vxe-button @click="exportSelectEvent">导出选中</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            exportDataEvent () {\n              this.$refs.xTable1.exportData({ type: 'csv' })\n            },\n            exportSelectEvent () {\n              this.$refs.xTable1.exportData({\n                data: this.$refs.xTable1.getSelectRecords()\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent2">导出指定列 [name,sex]</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          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            exportDataEvent2 () {\n              this.$refs.xTable2.exportData({\n                type: 'csv',\n                columnFilterMethod: column => ['name', 'sex'].includes(column.property)\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent3">导出指定第10-20行</vxe-button>\n          </template>\n        </vxe-toolbar>\n\n        <vxe-table\n          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            exportDataEvent3 () {\n              this.$refs.xTable3.exportData({\n                type: 'csv',\n                dataFilterMethod: (row, rowIndex) => rowIndex >= 9 && rowIndex < 20\n              })\n            }\n          }\n        }\n        ",'\n        <vxe-toolbar>\n          <template v-slot:buttons>\n            <vxe-button @click="exportDataEvent4">完整配置</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            exportDataEvent4 () {\n              this.$refs.xTable1.exportData({\n                filename: '自定义文件名',\n                type: '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:{exportDataEvent:function(){this.$refs.xTable1.exportData({type:"csv"})},exportSelectEvent:function(){this.$refs.xTable1.exportData({data:this.$refs.xTable1.getSelectRecords()})},exportDataEvent2:function(){this.$refs.xTable2.exportData({type:"csv",columnFilterMethod:function(e){return["name","sex"].includes(e.property)}})},exportDataEvent3:function(){this.$refs.xTable3.exportData({type:"csv",dataFilterMethod:function(e,t){return t>=9&&t<20}})},exportDataEvent4:function(){var e=this;this.$refs.xTable1.exportData({filename:"自定义文件名",type:"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},d223:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v("\n    表尾合并列，通过 "),n("table-api-link",{attrs:{prop:"footer-span-method"}}),e._v(" 方法"),n("br"),n("span",{staticClass:"red"},[e._v("（注："),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 合计的逻辑都是自行实现的，该示例仅供参考）")],1)],1),n("vxe-table",{attrs:{border:"","show-footer":"",height:"400","span-method":e.colspanMethod,"footer-span-method":e.footerColspanMethod,"footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"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:"rate",title:"Rate","footer-align":"center"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","footer-align":"center"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")]),n("p",{staticClass:"tip"},[e._v("合并行")]),n("vxe-table",{attrs:{border:"","show-footer":"",height:"400","span-method":e.rowspanMethod,"footer-span-method":e.footerRowspanMethod,"footer-method":e.footerMethod,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"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("2fdb"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{tableData:[],demoCodes:['\n        <vxe-table\n          border\n          show-footer\n          height="400"\n          :span-method="colspanMethod"\n          :footer-span-method="footerColspanMethod"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="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="rate" title="Rate" footer-align="center"></vxe-table-column>\n          <vxe-table-column field="age" title="Age" footer-align="center"></vxe-table-column>\n        </vxe-table>\n        ',"\n        export default {\n          data () {\n            return {\n              tableData: []\n            }\n          },\n          created () {\n            this.tableData = window.MOCK_DATA_LIST.slice(0, 20)\n          },\n          methods: {\n            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  // 合并为一列显示\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.mean(data, 'age')\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  // 合并为一列显示\n                  if (['age', 'rate'].includes(column.property)) {\n                    return this.$utils.sum(data, 'age')\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\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            footerColspanMethod ({ column, columnIndex, data }) {\n              if (columnIndex === 3) {\n                return {\n                  rowspan: 1,\n                  colspan: 2\n                }\n              } else if (columnIndex === 4) {\n                return {\n                  rowspan: 0,\n                  colspan: 0\n                }\n              }\n            }\n          }\n        }\n        ",'\n        <vxe-table\n          border\n          show-footer\n          height="400"\n          :span-method="rowspanMethod"\n          :footer-span-method="footerRowspanMethod"\n          :footer-method="footerMethod"\n          :data="tableData">\n          <vxe-table-column type="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            footerMethod ({ columns, data }) {\n              const footerData = [\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '平均'\n                  }\n                  if (['content'].includes(column.property)) {\n                    return '合并为一行显示'\n                  }\n                  return null\n                }),\n                columns.map((column, columnIndex) => {\n                  if (columnIndex === 0) {\n                    return '和值'\n                  }\n                  if (['content'].includes(column.property)) {\n                    return '合并为一行显示'\n                  }\n                  return null\n                })\n              ]\n              return footerData\n            },\n            // 通用行合并函数（将相同多列数据合并为一行）\n            rowspanMethod ({ row, $rowIndex, column, data }) {\n              let fields = ['key']\n              let cellValue = row[column.property]\n              if (cellValue && fields.includes(column.property)) {\n                let prevRow = data[$rowIndex - 1]\n                let nextRow = data[$rowIndex + 1]\n                if (prevRow && prevRow[column.property] === cellValue) {\n                  return { rowspan: 0, colspan: 0 }\n                } else {\n                  let countRowspan = 1\n                  while (nextRow && nextRow[column.property] === cellValue) {\n                    nextRow = data[++countRowspan + $rowIndex]\n                  }\n                  if (countRowspan > 1) {\n                    return { rowspan: countRowspan, colspan: 1 }\n                  }\n                }\n              }\n            },\n            footerRowspanMethod ({ $rowIndex, column, columnIndex, data }) {\n              if ($rowIndex === 0) {\n                if (columnIndex === 2) {\n                  return { rowspan: 2, colspan: 1 }\n                }\n              } else if ($rowIndex === 1) {\n                if (columnIndex === 2) {\n                  return { rowspan: 0, colspan: 0 }\n                }\n              }\n            }\n          }\n        }\n        "]}},created:function(){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:{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,"age"):["content"].includes(e.property)?"合并为一行显示":null})),n.map((function(e,n){return 0===n?"和值":["age","rate"].includes(e.property)?t.$utils.sum(a,"age"):["content"].includes(e.property)?"合并为一行显示":null}))];return l},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}}},footerColspanMethod:function(e){e.column;var t=e.columnIndex;e.data;return 3===t?{rowspan:1,colspan:2}:4===t?{rowspan:0,colspan:0}:void 0},rowspanMethod:function(e){var t=e.row,n=e.$rowIndex,a=e.column,l=e.data,o=["key"],i=t[a.property];if(i&&o.includes(a.property)){var r=l[n-1],s=l[n+1];if(r&&r[a.property]===i)return{rowspan:0,colspan:0};var c=1;while(s&&s[a.property]===i)s=l[++c+n];if(c>1)return{rowspan:c,colspan:1}}},footerRowspanMethod:function(e){var t=e.$rowIndex,n=(e.column,e.columnIndex);e.data;if(0===t){if(2===n)return{rowspan:2,colspan:1}}else if(1===t&&2===n)return{rowspan:0,colspan:0}}}},s=r,c=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:"",resizable:"",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"index",width:"100","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row,l=t.seq;return[n("vxe-button",{on:{click:function(t){return e.showDetailEvent(a)}}},[e._v("弹框"+e._s(l))])]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"app.body.label.name",sortable:""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("a",{attrs:{href:"https://github.com/xuliangzhan/vxe-table",target:"_black"}},[e._v("我是超链接："+e._s(a.name))])]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"app.body.label.sex",filters:[{data:""}],"filter-method":e.filterSexMethod},scopedSlots:e._u([{key:"header",fn:function(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:"html1",title:"Html片段",width:"160","show-overflow":""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{domProps:{innerHTML:e._s(a.html1)}})]}}])}),n("vxe-table-column",{attrs:{field:"img1",title:"图片路径",width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;t.rowIndex;return[a.img1?n("img",{staticStyle:{width:"100px"},attrs:{src:a.img1}}):n("span",[e._v("无")])]}}])})],1),n("vxe-modal",{attrs:{title:"查看详情",width:"800",height:"400",resize:""},model:{value:e.showDetails,callback:function(t){e.showDetails=t},expression:"showDetails"}},[[e._v(e._s(e.selectRow?e.selectRow.text:""))]],2),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v("    "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n    "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n  ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),i=n.n(o),r={data:function(){return{showSexTip:!1,showDetails:!1,selectRow:null,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          resizable\n          :data="tableData">\n          <vxe-table-column type="index" width="100" show-overflow>\n            <template v-slot="{ row, seq }">\n              <vxe-button @click="showDetailEvent(row)">弹框{{ 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="{ row }">\n              <a href="https://github.com/xuliangzhan/vxe-table" target="_black">我是超链接：{{ row.name }}</a>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="sex" title="app.body.label.sex" :filters="[{data: \'\'}]" :filter-method="filterSexMethod">\n            <template v-slot:header="{ 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="html1" title="Html片段" width="160" show-overflow>\n            <template v-slot="{ row }">\n              <span v-html="row.html1"></span>\n            </template>\n          </vxe-table-column>\n          <vxe-table-column field="img1" title="图片路径" width="120">\n            <template v-slot="{ row, rowIndex }">\n              <img v-if="row.img1" :src="row.img1" style="width: 100px;">\n              <span v-else>无</span>\n            </template>\n          </vxe-table-column>\n        </vxe-table>\n\n        <vxe-modal v-model="showDetails" title="查看详情" width="800" height="400" resize>\n          <template>{{ selectRow ? selectRow.text : \'\' }}</template>\n        </vxe-modal>\n        ',"\n        export default {\n          data () {\n            return {\n              showSexTip: false,\n              showDetails: false,\n              selectRow: null,\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            showDetailEvent (row) {\n              this.selectRow = row\n              this.showDetails = true\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)},showDetailEvent:function(e){this.selectRow=e,this.showDetails=!0}}},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},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}}]);