lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
ccd98f02e55340bbc8b078a35c7dad26bee3b8bd
vxe-table/docs/static/js/table.3e7bfe42.js
xuliangzhan bb5d124f0d update
2019-07-05 18:26:26 +08:00

1 line
84 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["table"],{"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",[e._v("设置 "),n("table-api-link",{attrs:{prop:"show-footer"}}),e._v(" show-footer 和 "),n("table-api-link",{attrs:{prop:"footer-method"}}),e._v(" 自定义表尾合计")],1),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","highlight-hover-row":"","show-footer":"",height:"400","footer-method":e.footerMethod,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[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",[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},on:{"update:data":function(t){e.tableData=t}}},[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",[e._v("还可以固定列")]),n("vxe-table",{staticClass:"mytable-footer",attrs:{border:"","show-footer":"",height:"400","show-overflow":"tooltip","footer-method":e.footerMethod,"footer-cell-class-name":e.footerCellClassName,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[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")),r=n.n(o),s=n("c695"),i=n.n(s),c={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.sync="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 XEUtils.mean(data, column.property)\n }\n return '-'\n }),\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '和值'\n }\n if (['age', 'rate'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return '-'\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.sync="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 XEUtils.mean(data, column.property)\n }\n return '-'\n }),\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '和值'\n }\n if (['age', 'rate'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return '-'\n })\n ]\n }\n }\n }\n ",'\n <vxe-table\n class="mytable-footer"\n border\n show-footer\n height="400"\n show-overflow="tooltip"\n :footer-method="footerMethod"\n :footer-cell-class-name="footerCellClassName"\n :data.sync="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 return [\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '平均'\n }\n if (['age', 'rate'].includes(column.property)) {\n return XEUtils.mean(data, column.property)\n }\n return '-'\n }),\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '和值'\n }\n if (['age', 'rate'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return '-'\n })\n ]\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){r.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=e.columns,n=e.data;return[t.map(function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?i.a.mean(n,e.property):"-"}),t.map(function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?i.a.sum(n,e.property):"-"})]}}},d=c,u=(n("6c0e"),n("2877")),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.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",[e._v("使用自带的分页 "),n("pager-api-link",{attrs:{name:"vxe-pager"}})],1),n("p",[e._v("如果要支持动态序号，可以通过 "),n("table-api-link",{attrs:{prop:"start-index"}}),e._v(" 属性设置起始值")],1),n("p",[e._v("如果要支持保留选中状态，可以通过设置 "),n("table-api-link",{attrs:{prop:"select-config"}}),e._v(" 的 "),n("table-api-link",{attrs:{prop:"reserve"}}),e._v(" 属性")],1),n("p",{staticClass:"red"},[e._v("设置 reserve 需要指定 "),n("table-api-link",{attrs:{prop:"row-key"}}),e._v(" 或者 ( "),n("table-api-link",{attrs:{prop:"select-config"}}),e._v("、"),n("table-api-link",{attrs:{prop:"tree-config"}}),e._v("、"),n("table-api-link",{attrs:{prop:"expand-config"}}),e._v("、"),n("table-api-link",{attrs:{prop:"edit-config"}}),e._v(" ) 中的 key 任意配置一个即可")],1),n("vxe-table",{ref:"xTable",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,"start-index":(e.tablePage.currentPage-1)*e.tablePage.pageSize,"select-config":{key:"id",reserve:!0},data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60"}}),n("vxe-table-column",{attrs:{type:"index",title:"序号",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""}}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate"}})],1),n("vxe-pager",{attrs:{loading:e.loading,"current-page":e.tablePage.currentPage,"page-size":e.tablePage.pageSize,total:e.tablePage.totalResult,layouts:["PrevPage","JumpNumber","NextPage","FullJump","Sizes","Total"]},on:{"page-change":e.handlePageChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(o),s=n("1487"),i=n.n(s),c={data:function(){return{loading:!1,tableData:[],tablePage:{currentPage:1,pageSize:10,totalResult:0},demoCodes:['\n <vxe-table\n border\n show-overflow\n ref="xTable"\n height="460"\n :loading="loading"\n :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"\n :select-config="{key: \'id\', reserve: true}"\n :data.sync="tableData">\n <vxe-table-column type="selection" width="60"></vxe-table-column>\n <vxe-table-column type="index" title="序号" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n </vxe-table>\n\n <vxe-pager\n :loading="loading"\n :current-page="tablePage.currentPage"\n :page-size="tablePage.pageSize"\n :total="tablePage.totalResult"\n :layouts="[\'PrevPage\', \'JumpNumber\', \'NextPage\', \'FullJump\', \'Sizes\', \'Total\']"\n @page-change="handlePageChange">\n </vxe-pager>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n tablePage: {\n currentPage: 1,\n pageSize: 10,\n totalResult: 0\n }\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n this.loading = true\n XEAjax.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,r.a.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()}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.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",[e._v("右键快捷菜单，支持表头菜单、内容菜单、表尾菜单")]),n("p",[e._v("配置项 "),n("table-api-link",{attrs:{prop:"context-menu"}}),e._v("={header,body,footer}")],1),n("vxe-table",{attrs:{border:"","show-footer":"","highlight-hover-row":"","footer-method":e.footerMethod,data:e.tableData,"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},footer:{options:e.footerMenus}}},on:{"update:data":function(t){e.tableData=t},"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 Down → | 打开右侧的二级菜单 |\n | Enter | 选中当前菜单选项 |\n | Spacebar | 选中当前菜单选项 |\n ")]),e._v("\n ")])}],o=(n("6762"),n("2fdb"),n("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(o),s=n("c695"),i=n.n(s),c={data:function(){return{tableData:[],headerMenus:[[{code:"exportAll",name:"导出所有.csv"}]],bodyMenus:[[{code:"copy",name:"复制"},{code:"paste",name:"粘贴"}],[{code:"remove",name:"删除"},{code:"filter",name:"筛选",children:[{code:"clearFilter",name:"清除筛选"},{code:"filterSelect",name:"按所选单元格的值筛选"}]},{code:"sort",name:"排序",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-hover-row\n :footer-method="footerMethod"\n :data.sync="tableData"\n :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}}"\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: '复制'\n },\n {\n code: 'paste',\n name: '粘贴'\n }\n ],\n [\n {\n code: 'remove',\n name: '删除'\n },\n {\n code: 'filter',\n name: '筛选',\n children: [\n {\n code: 'clearFilter',\n name: '清除筛选'\n },\n {\n code: 'filterSelect',\n name: '按所选单元格的值筛选'\n }\n ]\n },\n {\n code: 'sort',\n name: '排序',\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 contextMenuClickEvent ({ menu }) {\n this.$XMsg.alert(menu.name)\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 XEUtils.mean(data, column.property)\n }\n return '-'\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){r.a.highlightBlock(e)})},methods:{contextMenuClickEvent:function(e){var t=e.menu;this.$XMsg.alert(t.name)},footerMethod:function(e){var t=e.columns,n=e.data;return[t.map(function(e,t){return 0===t?"平均":["age","rate"].includes(e.property)?i.a.mean(n,e.property):"-"})]}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"2e79":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[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",[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":{key:"id",children:"children",expandAll:!!e.filterName2}},on:{"update:data":function(t){e.list2=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"120",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")),r=n.n(o),s=n("c695"),i=n.n(s),c={data:function(){return{filterName1:"",tableData1:[],filterName2:"",tableData2:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-input v-model="filterName" type="search" placeholder="试试全表搜索"></vxe-input>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n height="300"\n :data="list">\n <vxe-table-column type="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 = XEUtils.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 => XEUtils.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] = XEUtils.toString(item[key]).replace(filterRE, match => `<span class=\"keyword-lighten\">${match}</span>`)\n })\n return item\n })\n }\n return this.tableData\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n }\n }\n ","\n .keyword-lighten {\n color: #000;\n background-color: #FFFF00;\n }\n ",'\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-input v-model="filterName2" type="search" placeholder="试试全表搜索"></vxe-input>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n :data.sync="list"\n :tree-config="{key: \'id\', children: \'children\', expandAll: !!filterName2}">\n <vxe-table-column type="index" width="120" 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 = XEUtils.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 = XEUtils.searchTree(this.tableData, item => searchProps.some(key => XEUtils.toString(item[key]).toLowerCase().indexOf(filterName) > -1), options)\n XEUtils.eachTree(rest, item => {\n searchProps.forEach(key => {\n item[key] = XEUtils.toString(item[key]).replace(filterRE, match => `<span class=\"keyword-lighten\">${match}</span>`)\n })\n }, options)\n 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=i.a.toString(this.filterName1).trim().toLowerCase();if(e){var t=new RegExp(e,"gi"),n=["name","role","age","address"],a=this.tableData1.filter(function(t){return n.some(function(n){return i.a.toString(t[n]).toLowerCase().indexOf(e)>-1})});return a.map(function(e){var a=Object.assign({},e);return n.forEach(function(e){a[e]=i.a.toString(a[e]).replace(t,function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")})}),a})}return this.tableData1},list2:function(){var e=i.a.toString(this.filterName2).trim().toLowerCase();if(e){var t=new RegExp(e,"gi"),n={children:"children"},a=["name","size","type","date"],l=i.a.searchTree(this.tableData2,function(t){return a.some(function(n){return i.a.toString(t[n]).toLowerCase().indexOf(e)>-1})},n);return i.a.eachTree(l,function(e){a.forEach(function(n){e[n]=i.a.toString(e[n]).replace(t,function(e){return'<span class="keyword-lighten">'.concat(e,"</span>")})})},n),l}return this.tableData2}},created:function(){this.tableData1=window.MOCK_DATA_LIST.slice(0,50),this.tableData2=window.MOCK_TREE_DATA_LIST.slice(0)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"4ce5":function(e,t,n){},"551f":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("合并列，通过参数 "),n("table-api-link",{attrs:{prop:"span-method"}})],1),n("p",[e._v("使用 $rowIndex 获取渲染中的行索引，rowIndex 指向真实数据的行索引，可以根据不同场景使用")]),n("vxe-table",{attrs:{border:"","show-overflow":"","max-height":"400","span-method":e.colspanMethod,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[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",[e._v("合并行")]),n("vxe-table",{ref:"xTable",attrs:{border:"","max-height":"400","span-method":e.rowspanMethod,data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[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:"Content"}}),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("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(o),s={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n max-height="400"\n :span-method="colspanMethod"\n :data.sync="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 ref="xTable"\n border\n max-height="400"\n :span-method="rowspanMethod"\n :data.sync="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="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 rowspanMethod ({ row, $rowIndex, column, data }) {\n let prevRow = data[$rowIndex - 1]\n let nextRow = data[$rowIndex + 1]\n if (column.property === 'key') {\n if (prevRow && prevRow.key === row.key) {\n return {\n rowspan: 0,\n colspan: 0\n }\n }\n if (nextRow && nextRow.key === row.key) {\n return {\n rowspan: 2,\n 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){r.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=l[n-1],r=l[n+1];if("key"===a.property){if(o&&o.key===t.key)return{rowspan:0,colspan:0};if(r&&r.key===t.key)return{rowspan:2,colspan:1}}}}},i=s,c=n("2877"),d=Object(c["a"])(i,a,l,!1,null,null,null);t["default"]=d.exports},"5a32":function(e,t,n){},"6c0e":function(e,t,n){"use strict";var a=n("5a32"),l=n.n(a);l.a},7819:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("使用自带的工具栏 "),n("toolbar-api-link",{attrs:{name:"vxe-toolbar"}}),e._v("，配合模板可以非常简单的实现强大的功能")],1),n("p",[e._v("组成一套完整的表格，工具栏和表格必须是上下相邻关系，不允许更换位置（如果是复杂的布局不建议使用工具栏，自行写模板即可）")]),n("vxe-toolbar",{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},on:{"update:data":function(t){e.tableData=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"}}),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")),r=n.n(o),s={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\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.sync="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(){this.tableData=window.MOCK_DATA_LIST.slice(0,20)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})}},i=s,c=n("2877"),d=Object(c["a"])(i,a,l,!1,null,null,null);t["default"]=d.exports},8153:function(e,t,n){"use strict";var a=n("4ce5"),l=n.n(a);l.a},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",[e._v("显示/隐藏列功能，通过设置 "),n("toolbar-api-link",{attrs:{prop:"id"}}),e._v(" 和 "),n("toolbar-api-link",{attrs:{prop:"setting"}}),e._v("={storage: true} 参数开启将列个性化 localStorage 保存功能")],1),n("p",[e._v("也可以通过配合 "),n("table-api-link",{attrs:{prop:"reloadCustoms"}}),e._v(" 函数实现服务端保存")],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},on:{"update:data":function(t){e.tableData=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 ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(o),s={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.sync="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){r.a.highlightBlock(e)})}},i=s,c=n("2877"),d=Object(c["a"])(i,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",[e._v("通过 "),n("table-api-link",{attrs:{prop:"customs"}}),e._v(" 来初始化绑定动态列，prop:属性,visible:默认是否显示；可使用的属性 {property(只读),label(只读),visible（读写）}")],1),n("p",[e._v("该功能对于列比较多的表格非常有用，可以轻松实现强大的显示/隐藏列的配置功能，实时调用 refreshColumn 刷新列")]),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:data":function(t){e.tableData=t},"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",[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:data":function(t){e.tableData=t},"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",[e._v("通过点击后才调用 "),n("table-api-link",{attrs:{prop:"refreshColumn"}}),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:data":function(t){e.tableData=t},"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")),r=n.n(o),s={data:function(){return{loading:!1,tableData:[],customColumns1:[{field:"age",visible:!1}],customColumns2:[],customColumns3:[],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.sync="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.sync="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.sync="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){r.a.highlightBlock(e)})}},i=s,c=(n("8153"),n("2877")),d=Object(c["a"])(i,a,l,!1,null,"7f9856de",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",[e._v("事件绑定")]),n("vxe-table",{attrs:{border:"",height:"500","highlight-hover-row":"","show-overflow":"",resizable:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t},"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")),r=n.n(o),s={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n height="500"\n highlight-hover-row\n show-overflow\n resizable\n :data.sync="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){r.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))}}},i=s,c=n("2877"),d=Object(c["a"])(i,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",[e._v("通过调用 "),n("table-api-link",{attrs:{prop:"exportCsv"}}),e._v(" 函数可以直接将表格导出为 .csv 格式的文件；")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCsvEvent}},[e._v("默认导出")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable1",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=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:"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",[e._v("配置 "),n("table-api-link",{attrs:{prop:"columnFilterMethod"}}),e._v(" 参数过滤指定列")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCsvEvent2}},[e._v("导出指定列 [name,sex]")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable2",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=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:"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",[e._v("配置 "),n("table-api-link",{attrs:{prop:"dataFilterMethod"}}),e._v(" 参数过滤指定行")],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCsvEvent3}},[e._v("导出指定第10-20行")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable3",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=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:"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",[e._v("不导出表头，指定文件名，导出源数据,格式化数据")]),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportCsvEvent4}},[e._v("完整配置")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable4",attrs:{"highlight-hover-row":"",height:"300",data:e.tableData},on:{"update:data":function(t){e.tableData=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:"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")),r=n.n(o),s=n("c695"),i=n.n(s),c={data:function(){return{tableData:[],demoCodes:['\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="exportCsvEvent">默认导出</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable1"\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\n exportCsvEvent () {\n this.$refs.xTable1.exportCsv()\n }\n }\n }\n ",'\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="exportCsvEvent2">导出指定列 [name,sex]</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable2"\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\n exportCsvEvent2 () {\n this.$refs.xTable2.exportCsv({\n columnFilterMethod: column => ['name', 'sex'].includes(column.property)\n })\n }\n }\n }\n ",'\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="exportCsvEvent3">导出指定第10-20行</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable3"\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\n exportCsvEvent3 () {\n this.$refs.xTable3.exportCsv({\n dataFilterMethod: (row, rowIndex) => rowIndex >= 9 && rowIndex < 20\n })\n }\n }\n }\n ",'\n <vxe-toolbar>\n <template v-slot:buttons>\n <vxe-button @click="exportCsvEvent4">完整配置</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n ref="xTable4"\n highlight-hover-row\n height="300"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable></vxe-table-column>\n <vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\n exportCsvEvent4 () {\n this.$refs.xTable1.exportCsv({\n filename: '自定义文件名.csv',\n original: true,\n isHeader: false,\n data: this.tableData.map(row => {\n row.date = XEUtils.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){r.a.highlightBlock(e)})},methods:{exportCsvEvent:function(){this.$refs.xTable1.exportCsv()},exportCsvEvent2:function(){this.$refs.xTable2.exportCsv({columnFilterMethod:function(e){return["name","sex"].includes(e.property)}})},exportCsvEvent3:function(){this.$refs.xTable3.exportCsv({dataFilterMethod:function(e,t){return t>=9&&t<20}})},exportCsvEvent4:function(){this.$refs.xTable1.exportCsv({filename:"自定义文件名.csv",original:!0,isHeader:!1,data:this.tableData.map(function(e){return e.date=i.a.toDateString(e.date,"yyyy-MM-dd"),e})})}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},da5b:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("使用 "),n("table-column-api-link",{attrs:{prop:"slot"}}),e._v(" 自定义模板；可以实现自定义任意内容及 html 元素")],1),n("p",[e._v("相关参数说明 {seq: 序号, $rowIndex: 获取渲染中的行索引, rowIndex: 获取真实的行索引, row: 获取行数据, column: 获取列配置, columnIndex: 获取真实列索引，$columnIndex:获取渲染中的列索引}")]),n("p",[n("table-column-api-link",{attrs:{prop:"default"}}),e._v("：自定义内容模板（提前格式化好数据 > "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" > "),n("table-column-api-link",{attrs:{prop:"slots"}})],1),n("p",[n("table-column-api-link",{attrs:{prop:"header"}}),e._v("：自定义表头模板")],1),n("p",[n("table-column-api-link",{attrs:{prop:"filter"}}),e._v("：自定义筛选模板（建议使用"),n("router-link",{attrs:{to:{name:"Advanced"}}},[e._v("渲染器")]),e._v("，可以更好的复用）")],1),n("p",[n("table-column-api-link",{attrs:{prop:"edit"}}),e._v("：自定义可编辑模板（建议使用"),n("router-link",{attrs:{to:{name:"Advanced"}}},[e._v("渲染器")]),e._v("，可以更好的复用）")],1),n("vxe-table",{attrs:{border:"",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",width:"80"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.seq;return[n("span",[e._v("seq= "+e._s(a))])]}}])}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:""},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.rowIndex,l=t.columnIndex;return[n("span",[e._v("rowIndex= "+e._s(a))]),n("span",[e._v("columnIndex= "+e._s(l))])]}}])}),n("vxe-table-column",{attrs:{field:"sex",title:"Sex",filters:[{data:""}],"filter-method":e.filterSexMethod},scopedSlots:e._u([{key:"header",fn:function(t){t.column;return[n("span",{staticStyle:{color:"red"}},[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))])]}}])})],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")),r=n.n(o),s=n("c695"),i=n.n(s),c={data:function(){return{tableData:[],demoCodes:['\n <vxe-table\n border\n :data.sync="tableData">\n <vxe-table-column type="index" width="80">\n <template v-slot="{ seq }">\n <span>seq= {{ seq }}</span>\n </template>\n </vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable>\n <template v-slot="{ rowIndex, columnIndex }">\n <span>rowIndex= {{ rowIndex }}</span>\n <span>columnIndex= {{ columnIndex }}</span>\n </template>\n </vxe-table-column>\n <vxe-table-column field="sex" title="Sex" :filters="[{data: \'\'}]" :filter-method="filterSexMethod">\n <template v-slot:header="{ column }">\n <span style="color: red;">这样玩也行</span>\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>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n },\n methods: {\n formatDate (value) {\n return XEUtils.toDateString(value, 'yyyy-MM-dd HH:mm:ss.S')\n },\n filterSexMethod ({ option, row }) {\n return row.sex === option.data\n },\n changeFilterEvent (evnt, option, context) {\n context.changeMultipleOption(evnt, !!option.data, option)\n }\n }\n }\n "]}},created:function(){var e=window.MOCK_DATA_LIST.slice(0,6);this.tableData=e},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})},methods:{formatDate:function(e){return i.a.toDateString(e,"yyyy-MM-dd HH:mm:ss.S")},filterSexMethod:function(e){var t=e.option,n=e.row;return n.sex===t.data},changeFilterEvent:function(e,t,n){n.changeMultipleOption(e,!!t.data,t)}}},d=c,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},ee3d:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",[e._v("通过设置 "),n("table-api-link",{attrs:{prop:"expand-config"}}),e._v(' 属性和 type="'),n("table-api-link",{attrs:{prop:"expand"}}),e._v('" 与 slot 可以开启展开行功能')],1),n("vxe-toolbar",{scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:function(t){return e.$refs.xTable.toggleRowExpansion(e.tableData[1])}}},[e._v("切换第二行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setRowExpansion([e.tableData[2],e.tableData[3]],!0)}}},[e._v("设置第三、四行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.setAllRowExpansion(!0)}}},[e._v("设置所有行展开")]),n("vxe-button",{on:{click:function(t){return e.$refs.xTable.clearRowExpand()}}},[e._v("关闭所有行展开")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",data:e.tableData,"expand-config":{key:"id"}},on:{"update:data":function(t){e.tableData=t},"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,"expand-config":{key:"id"}},on:{"update:data":function(t){e.tableData=t}}},[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",[e._v("默认展开所有行，通过 "),n("table-api-link",{attrs:{prop:"expandAll"}}),e._v(" 参数设置默认展开行")],1),n("vxe-table",{attrs:{border:"",data:e.tableData,"expand-config":{key:"id",expandAll:!0}},on:{"update:data":function(t){e.tableData=t},"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;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[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],o=(n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(o),s={data:function(){return{tableData:[],tableData2:[],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.sync="tableData"\n :expand-config="{key: \'id\'}"\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.sync="tableData"\n :expand-config="{key: \'id\'}">\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, 6)\n },\n methods: {\n toggleExpandChangeEvent ({ row }) {\n this.$XMsg.alert('行展开、收起事件')\n }\n }\n }\n ",'\n <vxe-table\n border\n :data.sync="tableData2"\n :expand-config="{key: \'id\', expandAll: true}"\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 }">\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 tableData2: []\n }\n },\n created () {\n this.tableData2 = window.MOCK_DATA_LIST.slice(0, 3)\n },\n methods: {\n toggleExpandChangeEvent ({ row }) {\n this.$XMsg.alert('行展开、收起事件')\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6),this.tableData=window.MOCK_DATA_LIST.slice(0,3)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){r.a.highlightBlock(e)})},methods:{toggleExpandChangeEvent:function(e){e.row;this.$XMsg.alert("行展开、收起事件")}}},i=s,c=n("2877"),d=Object(c["a"])(i,a,l,!1,null,null,null);t["default"]=d.exports}}]);
Reference in New Issue View Git Blame Copy Permalink