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
495e727fba0fff804ea14e51b1ac855da2ede7fe
vxe-table/docs/static/js/excel.8ea0f3fc.js
xuliangzhan 495e727fba 更新文档
2020-01-07 16:17:07 +08:00

1 line
41 KiB
JavaScript
Raw Blame History

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["excel"],{"3eb1":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-grid",{staticClass:"vxe-table-x-renderer",attrs:{border:"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,"edit-config":{trigger:"click",mode:"cell"}}}),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("具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-renderer",target:"_blank"}},[e._v("vxe-table-plugin-renderer")]),e._v(" 插件的 API")])}],o=(n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),r=n.n(o),i={data:function(){return{loading:!1,tableData:[],tableColumn:[{type:"checkbox",width:60},{type:"seq",title:"Number",width:80},{field:"name",title:"Name",editRender:{name:"XTextarea"}},{field:"role",title:"Role",showOverflow:!0,editRender:{name:"XTextarea"}},{field:"nickname",title:"Nickname",editRender:{name:"XInput"}},{field:"sex",title:"Sex",editRender:{name:"XInput",props:{suffixIcon:"vxe-icon--more"}}}],demoCodes:['\n <vxe-grid\n border\n height="460"\n class="vxe-table-x-renderer"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :edit-config="{trigger: \'click\', mode: \'cell\'}"></vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n tableColumn: [\n { type: 'checkbox', width: 60 },\n { type: 'seq', title: 'Number', width: 80 },\n {\n field: 'name',\n title: 'Name',\n editRender: {\n name: 'XTextarea'\n }\n },\n {\n field: 'role',\n title: 'Role',\n showOverflow: true,\n editRender: {\n name: 'XTextarea'\n }\n },\n {\n field: 'nickname',\n title: 'Nickname',\n editRender: {\n name: 'XInput'\n }\n },\n {\n field: 'sex',\n title: 'Sex',\n editRender: {\n name: 'XInput',\n props: {\n suffixIcon: 'vxe-icon--more'\n }\n }\n }\n ]\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n this.loading = false\n }, 500)\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,10),e.loading=!1}),500)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))}},s=i,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"6a90":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-table",{attrs:{border:"",resizable:"",height:"500",data:e.tableData,"mouse-config":{selected:!0,range:!0},"keyboard-config":{isArrow:!0,isDel:!0,isEnter:!0,isTab:!0,isEdit:!0},"context-menu":{body:{options:e.bodyMenus}},"edit-config":{trigger:"dblclick",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"Nickname","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"num",title:"Num","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"num1",title:"Num1","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"num2",title:"Num2","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"num3",title:"Num3","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"num4",title:"Num4","edit-render":{name:"input"}}})],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("具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-charts",target:"_blank"}},[e._v("vxe-table-plugin-charts")]),e._v(" 插件的 API")])}],o=(n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),r=n.n(o),i={data:function(){return{tableData:[],bodyMenus:[[{code:"INSERT_AT_ACTIVED_ROW",name:"插入"},{code:"DELETE_ROW",name:"app.body.label.delete"},{code:"CLEAR_CELL",name:"清除内容"}],[{name:"创建图表",prefixIcon:"fa fa-area-chart",children:[{code:"CHART_BAR_X_AXIS",name:"横向柱状图 - 自由选择",prefixIcon:"fa fa-bar-chart"},{code:"CHART_BAR_X_AXIS",name:"横向柱状图 - 固定类别",prefixIcon:"fa fa-bar-chart",params:{category:"nickname"}},{code:"CHART_BAR_Y_AXIS",name:"纵向柱状图 - 自由选择",prefixIcon:"fa fa-bar-chart"},{code:"CHART_BAR_Y_AXIS",name:"纵向柱状图 - 固定类别",prefixIcon:"fa fa-bar-chart",params:{category:"nickname"}},{code:"CHART_LINE",name:"折线图 - 自由选择",prefixIcon:"fa fa-line-chart"},{code:"CHART_LINE",name:"折线图 - 固定类别",prefixIcon:"fa fa-line-chart",params:{category:"nickname"}},{code:"CHART_PIE",name:"饼图 - 自由选择",prefixIcon:"fa fa-pie-chart"},{code:"CHART_PIE",name:"饼图 - 固定类别",prefixIcon:"fa fa-pie-chart",params:{category:"nickname"}}]}]],demoCodes:['\n <vxe-table\n border\n resizable\n height="500"\n :data="tableData"\n :mouse-config="{ selected: true, checked: true }"\n :keyboard-config="{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true}"\n :context-menu="{body: {options: bodyMenus}}"\n :edit-config="{trigger: \'dblclick\', mode: \'cell\'}">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="nickname" title="Nickname" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="num" title="Num" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="num1" title="Num1" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="num2" title="Num2" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="num3" title="Num3" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="num4" title="Num4" :edit-render="{name: \'input\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n bodyMenus: [\n [\n {\n code: 'INSERT_AT_ACTIVED_ROW',\n name: '插入'\n },\n {\n code: 'DELETE_ROW',\n name: 'app.body.label.delete'\n },\n {\n code: 'CLEAR_CELL',\n name: '清除内容'\n }\n ],\n [\n {\n name: '创建图表',\n prefixIcon: 'fa fa-area-chart',\n children: [\n {\n code: 'CHART_BAR_X_AXIS',\n name: '横向柱状图 - 自由选择',\n prefixIcon: 'fa fa-bar-chart'\n },\n {\n code: 'CHART_BAR_X_AXIS',\n name: '横向柱状图 - 固定类别',\n prefixIcon: 'fa fa-bar-chart',\n params: {\n category: 'nickname'\n }\n },\n {\n code: 'CHART_BAR_Y_AXIS',\n name: '纵向柱状图 - 自由选择',\n prefixIcon: 'fa fa-bar-chart'\n },\n {\n code: 'CHART_BAR_Y_AXIS',\n name: '纵向柱状图 - 固定类别',\n prefixIcon: 'fa fa-bar-chart',\n params: {\n category: 'nickname'\n }\n },\n {\n code: 'CHART_LINE',\n name: '折线图 - 自由选择',\n prefixIcon: 'fa fa-line-chart'\n },\n {\n code: 'CHART_LINE',\n name: '折线图 - 固定类别',\n prefixIcon: 'fa fa-line-chart',\n params: {\n category: 'nickname'\n }\n },\n {\n code: 'CHART_PIE',\n name: '饼图 - 自由选择',\n prefixIcon: 'fa fa-pie-chart'\n },\n {\n code: 'CHART_PIE',\n name: '饼图 - 固定类别',\n prefixIcon: 'fa fa-pie-chart',\n params: {\n category: 'nickname'\n }\n }\n ]\n }\n ]\n ]\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){r.a.highlightBlock(e)}))}},s=i,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},"6c86":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:e.getValidEvent}},[e._v("获取有效数据")]),n("vxe-button",{on:{click:e.getInsertEvent}},[e._v("获取新增")]),n("vxe-button",{on:{click:e.getRemoveEvent}},[e._v("获取删除")]),n("vxe-button",{on:{click:e.getUpdateEvent}},[e._v("获取修改")]),n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("导出.csv")]),n("input",{attrs:{type:"file",accept:".csv,.xls,.xlsx"},on:{change:e.fileChangeEvent}})]},proxy:!0}])}),n("vxe-excel",{ref:"xExcel",attrs:{"max-height":"600",columns:e.columns,data:e.tableData}}),e._m(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(" 具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-excel",target:"_blank"}},[e._v("vxe-table-plugin-excel")]),e._v(" 插件的 API"),n("br"),n("span",{staticClass:"red"},[e._v("（注：重构中）")])])},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 | Tab | 移动到当前选中或活动单元格的右侧单元格，如果到最后一列且存在下一行，则从下一行开始移动 |\n | Tab + Shift | 移动到当前选中或活动单元格的左侧单元格，如果到第一列且存在上一行，则从上一行开始移动 |\n | Enter | 取消编辑并移动到当前活动单元格下面的单元格 |\n | Delete | 清空内容 |\n | Backspace | 清空内容并激活选中单元格为编辑状态 |\n | F2 | 激活单元格编辑 |\n | Esc | 取消单元格编辑 |\n | Ctrl + C | 复制选中的单元格内容 |\n | Ctrl + X | 剪贴选中的单元格内容 |\n | Ctrl + V | 粘贴选中的单元格内容 |\n | Ctrl + A | 选中所有单元格 |\n ")]),e._v("\n ")])}],o=(n("99af"),n("4de4"),n("a630"),n("d81d"),n("3ca3"),n("1276"),n("159b"),n("1487")),r=n.n(o),i=n("1146"),s=n.n(i),c={data:function(){var e=["A","B","C","D","E","F","G","H","I","J","K","L","M","N"];return{columns:[{type:"seq",width:50,align:"center",headerAlign:"center"}].concat(e.map((function(e){return{field:e,title:e,minWidth:76,headerAlign:"center",sortable:!0,editRender:{name:"cell"},filters:[{data:""}],filterRender:{name:"input"}}}))),tableData:Array.from(new Array(20)).map((function(t,n){var a={};return e.forEach((function(e){a[e]=""})),a})),demoCodes:['\n <vxe-button @click="getValidEvent">获取有效数据</vxe-button>\n <vxe-button @click="getInsertEvent">获取新增</vxe-button>\n <vxe-button @click="getRemoveEvent">获取删除</vxe-button>\n <vxe-button @click="getUpdateEvent">获取修改</vxe-button>\n <vxe-button @click="exportDataEvent">导出.csv</vxe-button>\n <input type="file" @change="fileChangeEvent" accept=".csv,.xls,.xlsx">\n\n <vxe-excel\n ref="xExcel"\n max-height="600"\n :columns="columns"\n :data="tableData">\n </vxe-excel>\n ',"\n export default {\n data () {\n let columns = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']\n return {\n columns: [\n {\n type: 'seq',\n width: 50,\n align: 'center',\n headerAlign: 'center'\n }\n ].concat(columns.map(name => {\n return {\n field: name,\n title: name,\n minWidth: 76,\n headerAlign: 'center',\n sortable: true,\n editRender: {\n name: 'cell'\n },\n filters: [{ data: '' }],\n filterRender: {\n name: 'input'\n }\n }\n })),\n tableData: Array.from(new Array(20)).map((num, index) => {\n let item = {}\n columns.forEach(name => {\n item[name] = ''\n })\n return item\n })\n }\n },\n methods: {\n getValidEvent () {\n let fields = this.$refs.xExcel.getColumns().map(item => item.property).filter(key => key)\n let validRecords = this.tableData.filter(item => fields.some(key => item[key]))\n this.$XModal.alert(validRecords.length)\n },\n getInsertEvent () {\n let insertRecords = this.$refs.xExcel.getInsertRecords()\n this.$XModal.alert(insertRecords.length)\n },\n getRemoveEvent () {\n let removeRecords = this.$refs.xExcel.getRemoveRecords()\n this.$XModal.alert(removeRecords.length)\n },\n getUpdateEvent () {\n let updateRecords = this.$refs.xExcel.getUpdateRecords()\n this.$XModal.alert(updateRecords.length)\n },\n exportDataEvent () {\n this.$refs.xExcel.exportData({ isHeader: false })\n },\n fileChangeEvent (evnt) {\n let files = evnt.target.files\n let fileReader = new FileReader()\n fileReader.onload = (ev) => {\n let data = ev.target.result\n let workbook = XLSX.read(data, { type: 'binary' })\n let keys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']\n let csvData = XLSX.utils.sheet_to_csv(workbook.Sheets.Sheet1)\n let tableData = csvData.split('\n').map((vRow, rIndex) => {\n let vCols = vRow.split(',')\n let item = {}\n vCols.forEach((val, cIndex) => {\n let kIndex = Math.floor(cIndex / 26)\n let lIndex = cIndex % 26\n let key\n if (kIndex) {\n key = `${keys[kIndex]}${keys[lIndex]}`\n } else {\n key = keys[lIndex]\n }\n item[key] = val\n })\n return item\n })\n this.tableData = tableData\n }\n fileReader.readAsBinaryString(files[0])\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{getValidEvent:function(){var e=this.$refs.xExcel.getColumns().map((function(e){return e.property})).filter((function(e){return e})),t=this.tableData.filter((function(t){return e.some((function(e){return t[e]}))}));this.$XModal.alert(t.length)},getInsertEvent:function(){var e=this.$refs.xExcel.getInsertRecords();this.$XModal.alert(e.length)},getRemoveEvent:function(){var e=this.$refs.xExcel.getRemoveRecords();this.$XModal.alert(e.length)},getUpdateEvent:function(){var e=this.$refs.xExcel.getUpdateRecords();this.$XModal.alert(e.length)},exportDataEvent:function(){this.$refs.xExcel.exportData({isHeader:!1})},fileChangeEvent:function(e){var t=this,n=e.target.files,a=new FileReader;a.onload=function(e){var n=e.target.result,a=s.a.read(n,{type:"binary"}),l=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],o=s.a.utils.sheet_to_csv(a.Sheets.Sheet1),r=o.split("\n").map((function(e,t){var n=e.split(","),a={};return n.forEach((function(e,t){var n,o=Math.floor(t/26),r=t%26;n=o?"".concat(l[o]).concat(l[r]):l[r],a[n]=e})),a}));t.tableData=r},a.readAsBinaryString(n[0])}}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},b712: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-grid",{attrs:{border:"",resizable:"",height:"530",loading:e.loading,"pager-config":e.tablePage,columns:e.tableColumn,data:e.tableData},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("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-shortcut-key",target:"_blank"}},[e._v("vxe-table-plugin-shortcut-key")]),e._v(" 插件的 API")])}],o=(n("99af"),n("a630"),n("3ca3"),n("159b"),n("628a")),r=n.n(o),i=n("1487"),s=n.n(i),c={data:function(){return{loading:!1,tablePage:{total:0,currentPage:1,pageSize:10,pageSizes:[10,20,50,100,200,500]},tableColumn:[{type:"seq",width:60},{type:"checkbox",width:50},{field:"name",title:"Name"},{field:"nickname",title:"Nickname"},{field:"role",title:"Role"},{field:"describe",title:"Describe",showOverflow:!0}],tableData:[],demoCodes:['\n <vxe-grid\n border\n resizable\n height="530"\n :loading="loading"\n :pager-config="tablePage"\n :columns="tableColumn"\n :data="tableData"\n @page-change="handlePageChange"></vxe-grid>\n ',"\n import VXETable from 'vxe-table'\n import VXETablePluginShortcutKey from 'vxe-table-plugin-shortcut-key'\n\n VXETable.use(VXETablePluginShortcutKey, {\n custom: {\n 'pager.prevPage': 'ArrowLeft',\n 'pager.nextPage': 'ArrowRight'\n }\n })\n ","\n export default {\n data () {\n return {\n loading: false,\n tablePage: {\n total: 0,\n currentPage: 1,\n pageSize: 10\n },\n tableColumn: [\n { type: 'seq', width: 60 },\n { type: 'checkbox', width: 50 },\n { field: 'name', title: 'Name' },\n { field: 'nickname', title: 'Nickname' },\n { field: 'role', title: 'Role' },\n { field: 'describe', title: 'Describe', showOverflow: true }\n ],\n tableData: []\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n // 模拟后台接口\n this.loading = true\n XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`).then(({ page, result }) => {\n this.tableData = result\n this.tablePage.total = page.total\n this.loading = false\n }).catch(e => {\n this.loading = false\n })\n },\n searchEvent () {\n this.tablePage.currentPage = 1\n this.findList()\n },\n handlePageChange ({ currentPage, pageSize }) {\n this.tablePage.currentPage = currentPage\n this.tablePage.pageSize = pageSize\n this.findList()\n }\n }\n }\n "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,r.a.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage)).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.total=n.total,e.loading=!1})).catch((function(t){e.loading=!1}))},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handlePageChange:function(e){var t=e.currentPage,n=e.pageSize;this.tablePage.currentPage=t,this.tablePage.pageSize=n,this.findList()}}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},e0ba: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",{attrs:{custom:"",export:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("导出数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",height:"400",loading:e.loading,"export-config":e.tableExport,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"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=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-export-xlsx",target:"_blank"}},[e._v("vxe-table-plugin-export-xlsx")]),e._v(" 插件的 API")])}],o=(n("a630"),n("3ca3"),n("159b"),n("1487")),r=n.n(o),i={data:function(){return{loading:!1,tableData:[],tableExport:{type:"xlsx",types:["xlsx","csv","html","xml","txt"]},demoCodes:['\n <vxe-toolbar custom :export="tableExport">\n <template v-slot:buttons>\n <vxe-button @click="exportDataEvent">导出数据</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n ref="xTable"\n height="400"\n :loading="loading"\n :export-config="tableExport"\n :data="tableData">\n <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="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 tableExport: {\n // 默认选中类型\n type: 'xlsx',\n // 自定义类型\n types: ['xlsx', 'csv', 'html', 'xml', 'txt']\n }\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n this.loading = true\n setTimeout(() => {\n this.tableData = [\n { name: 'name1', role: 'role1', sex: '0', age: 22, rate: 5 },\n { name: 'name2', role: 'role2', sex: '1', age: 32, rate: 1 },\n { name: 'name3', role: 'role3', sex: '1', age: 26, rate: 1 },\n { name: 'name4', role: 'role4', sex: '0', age: 28, rate: 4 },\n { name: 'name5', role: 'role5', sex: '1', age: 24, rate: 3 },\n { name: 'name6', role: 'role6', sex: '1', age: 19, rate: 3 },\n { name: 'name7', role: 'role7', sex: '1', age: 18, rate: 3 },\n { name: 'name8', role: 'role8', sex: '2', age: 29, rate: 3 },\n { name: 'name9', role: 'role9', sex: '1', age: 21, rate: 3 }\n ]\n this.loading = false\n }, 100)\n },\n exportDataEvent () {\n this.$refs.xTable.exportData({\n filename: '导出',\n sheetName: 'Sheet1',\n type: 'xlsx'\n })\n }\n }\n }\n "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=[{name:"name1",role:"role1",sex:"0",age:22,rate:5},{name:"name2",role:"role2",sex:"1",age:32,rate:1},{name:"name3",role:"role3",sex:"1",age:26,rate:1},{name:"name4",role:"role4",sex:"0",age:28,rate:4},{name:"name5",role:"role5",sex:"1",age:24,rate:3},{name:"name6",role:"role6",sex:"1",age:19,rate:3},{name:"name7",role:"role7",sex:"1",age:18,rate:3},{name:"name8",role:"role8",sex:"2",age:29,rate:3},{name:"name9",role:"role9",sex:"1",age:21,rate:3}],e.loading=!1}),100)},exportDataEvent:function(){this.$refs.xTable.exportData({filename:"导出",sheetName:"Sheet1",type:"xlsx"})}}},s=i,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports},ebfe: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-table",{attrs:{border:"",resizable:"","highlight-hover-row":"","show-footer":"","footer-method":e.footerMethod,data:e.tableData,"context-menu":{header:{options:e.headerMenus},body:{options:e.bodyMenus},footer:{options:e.footerMenus}},"mouse-config":{selected:!0},"keyboard-config":{isArrow:!0,isDel:!0,isEnter:!0,isTab:!0,isEdit:!0},"edit-config":{trigger:"dblclick",mode:"cell"}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name",sortable:"","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex","edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age",sortable:"",filters:[{data:[]}],"filter-render":{name:"input"},"edit-render":{name:"input"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",sortable:""}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-menus",target:"_blank"}},[e._v("vxe-table-plugin-menus")]),e._v(" 插件的 API")])}],o=(n("a630"),n("caad"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("c695")),r=n.n(o),i=n("1487"),s=n.n(i),c={data:function(){return{tableData:[],headerMenus:[[{code:"HIDDEN_COLUMN",name:"隐藏"},{code:"RESET_COLUMN",name:"取消隐藏"},{code:"RESET_ALL",name:"重置个性化数据",prefixIcon:"fa fa-undo"}],[{code:"PRINT_ALL",name:"打印",prefixIcon:"fa fa-print"},{code:"EXPORT_ALL",name:"导出.html",prefixIcon:"fa fa-download",params:{type:"html"}}]],bodyMenus:[[{code:"INSERT_AT_ACTIVED_ROW",name:"插入"},{code:"DELETE_ROW",name:"app.body.label.delete"},{code:"CLEAR_CELL",name:"清除内容"}],[{name:"app.body.label.filter",prefixIcon:"fa fa-filter",children:[{code:"CLEAR_FILTER",name:"清除筛选"},{code:"CLEAR_ALL_FILTER",name:"重置所有筛选"},{code:"FILTER_CELL",name:"按所选单元格的值筛选"}]},{name:"app.body.label.sort",children:[{code:"SORT_ASC",name:"升序",prefixIcon:"fa fa-sort-alpha-desc"},{code:"SORT_DESC",name:"倒序",prefixIcon:"fa fa-sort-alpha-desc"},{code:"CLEAR_SORT",name:"清除排序"}]}],[{code:"PRINT_ALL",name:"打印",prefixIcon:"fa fa-print"},{code:"EXPORT_ALL",name:"导出.csv",prefixIcon:"fa fa-download",params:{type:"csv"}}]],footerMenus:[[{code:"EXPORT_ALL",name:"导出.xml",prefixIcon:"fa fa-download",params:{type:"xml"}},{code:"PRINT_ALL",name:"打印",prefixIcon:"fa fa-print"}]],demoCodes:['\n <vxe-table\n border\n resizable\n highlight-hover-row\n show-footer\n :footer-method="footerMethod"\n :data="tableData"\n :context-menu="{header: {options: headerMenus}, body: {options: bodyMenus}, footer: {options: footerMenus}}"\n :mouse-config="{selected: true}"\n :keyboard-config="{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true}"\n :edit-config="{trigger: \'dblclick\', mode: \'cell\'}">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" sortable :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="sex" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" sortable :filters="[{ data: [] }]" :filter-render="{name: \'input\'}" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" sortable></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n headerMenus: [\n [\n { code: 'HIDDEN_COLUMN', name: '隐藏' },\n { code: 'RESET_COLUMN', name: '取消隐藏' },\n { code: 'RESET_ALL', name: '重置个性化数据', prefixIcon: 'fa fa-undo' }\n ],\n [\n { code: 'PRINT_ALL', name: '打印', prefixIcon: 'fa fa-print' },\n { code: 'EXPORT_ALL', name: '导出.html', prefixIcon: 'fa fa-download', params: { type: 'html' } }\n ]\n ],\n bodyMenus: [\n [\n { code: 'INSERT_AT_ACTIVED_ROW', name: '插入' },\n { code: 'DELETE_ROW', name: 'app.body.label.delete' },\n { code: 'CLEAR_CELL', name: '清除内容' }\n ],\n [\n {\n name: 'app.body.label.filter',\n prefixIcon: 'fa fa-filter',\n children: [\n { code: 'CLEAR_FILTER', name: '清除筛选' },\n { code: 'CLEAR_ALL_FILTER', name: '重置所有筛选' },\n { code: 'FILTER_CELL', name: '按所选单元格的值筛选' }\n ]\n },\n {\n name: 'app.body.label.sort',\n children: [\n { code: 'SORT_ASC', name: '升序', prefixIcon: 'fa fa-sort-alpha-desc' },\n { code: 'SORT_DESC', name: '倒序', prefixIcon: 'fa fa-sort-alpha-desc' },\n { code: 'CLEAR_SORT', name: '清除排序' }\n ]\n }\n ],\n [\n { code: 'PRINT_ALL', name: '打印', prefixIcon: 'fa fa-print' },\n { code: 'EXPORT_ALL', name: '导出.csv', prefixIcon: 'fa fa-download', params: { type: 'csv' } }\n ]\n ],\n footerMenus: [\n [\n { code: 'EXPORT_ALL', name: '导出.xml', prefixIcon: 'fa fa-download', params: { type: 'xml' } },\n { code: 'PRINT_ALL', name: '打印', prefixIcon: 'fa fa-print' }\n ]\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 5)\n },\n methods: {\n footerMethod ({ columns, data }) {\n return [\n columns.map((column, columnIndex) => {\n if (columnIndex === 0) {\n return '和值'\n }\n if (['age', 'rate'].includes(column.property)) {\n return XEUtils.sum(data, column.property)\n }\n return null\n })\n ]\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,5)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{footerMethod:function(e){var t=e.columns,n=e.data;return[t.map((function(e,t){return 0===t?"和值":["age","rate"].includes(e.property)?r.a.sum(n,e.property):null}))]}}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},f0d1: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",{attrs:{custom:"",export:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("vxe-button",{on:{click:e.exportDataEvent}},[e._v("导出数据")])]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",height:"400",loading:e.loading,"export-config":e.tableExport,data:e.tableData}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60"}}),n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"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=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v(" 具体兼容请查看 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-export-pdf",target:"_blank"}},[e._v("vxe-table-plugin-export-pdf")]),e._v(" 插件的 API"),n("br"),n("span",{staticClass:"red"},[e._v("（注：默认是不支持中文字体的，会显示成乱码，可自行引入字体库解决）")])])}],o=(n("a630"),n("3ca3"),n("159b"),n("1487")),r=n.n(o),i={data:function(){return{loading:!1,tableData:[],tableExport:{type:"pdf",types:["pdf","csv","html","xml","txt"]},demoCodes:['\n <vxe-toolbar custom :export="tableExport">\n <template v-slot:buttons>\n <vxe-button @click="exportDataEvent">导出数据</vxe-button>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n ref="xTable"\n height="400"\n :loading="loading"\n :export-config="tableExport"\n :data="tableData">\n <vxe-table-column type="checkbox" width="60"></vxe-table-column>\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="role" title="Role"></vxe-table-column>\n <vxe-table-column field="sex" title="Sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n tableExport: {\n // 默认选中类型\n type: 'pdf',\n // 自定义类型\n types: ['pdf', 'csv', 'html', 'xml', 'txt']\n }\n }\n },\n created () {\n this.findList()\n },\n methods: {\n findList () {\n this.loading = true\n setTimeout(() => {\n this.tableData = [\n { name: 'name1', role: 'role1', sex: '0', age: 22, rate: 5 },\n { name: 'name2', role: 'role2', sex: '1', age: 32, rate: 1 },\n { name: 'name3', role: 'role3', sex: '1', age: 26, rate: 1 },\n { name: 'name4', role: 'role4', sex: '0', age: 28, rate: 4 },\n { name: 'name5', role: 'role5', sex: '1', age: 24, rate: 3 }\n ]\n this.loading = false\n }, 100)\n },\n exportDataEvent () {\n this.$refs.xTable.exportData({\n filename: '导出',\n type: 'pdf'\n })\n }\n }\n }\n "]}},created:function(){this.findList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){r.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=[{name:"name1",role:"role1",sex:"0",age:22,rate:5},{name:"name2",role:"role2",sex:"1",age:32,rate:1},{name:"name3",role:"role3",sex:"1",age:26,rate:1},{name:"name4",role:"role4",sex:"0",age:28,rate:4},{name:"name5",role:"role5",sex:"1",age:24,rate:3},{name:"name6",role:"role6",sex:"1",age:19,rate:3},{name:"name7",role:"role7",sex:"1",age:18,rate:3},{name:"name8",role:"role8",sex:"2",age:29,rate:3},{name:"name9",role:"role9",sex:"1",age:21,rate:3}],e.loading=!1}),100)},exportDataEvent:function(){this.$refs.xTable.exportData({filename:"导出",type:"pdf"})}}},s=i,c=n("2877"),d=Object(c["a"])(s,a,l,!1,null,null,null);t["default"]=d.exports}}]);
Reference in New Issue View Git Blame Copy Permalink