iview表格(1級對應多級)
阿新 • • 發佈:2018-11-22
<Table class="tabgrouping" border highlight-row :columns="columnList" :data="reportList"> </Table> export default(){ data(){ return{ columnList:[], reportList:[] } }, methods:{ getColumnList() { let columnList = [ this.getColumnItem("日期", "dateTime", 150), this.getColumnItem("產品名稱", "productName", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.productName; } ); }), this.getColumnItem( "詳情頁檢視人數", "pageViewpvcount", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.pageViewpvcount; } ); } ), this.getColumnItem( "立即申請點選人數", "submitPvcount", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.submitPvcount; } ); } ), this.getColumnItem("點選轉化率", "conversionRate", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.conversionRate; } ); }) ]; return columnList; }, //呼叫 getColumnItem(title, key, width, render) { return { title: title, key: key, minWidth: width, align: "center", render: render }; }, //遍歷 reportColumns2Render(h, params, showTextCallback) { let list = []; for (let i = 0; i < params.length; i++) { let text = showTextCallback ? showTextCallback(params[i]) : params[i]; list.push( h( "span", { style: { display: "block", width: "100%", align: "center", lineHeight: "40px", borderBottom: i < params.length - 1 || i < params[i].length - 1 ? "1px solid #e9eaec" : "" } }, text ) ); } return h("div", list); } }, mounted(){ this.columnList = this.getColumnList(); } }
下面這個是完整的後臺案列
<template> <div> <div class="navigation"> <p> <span>管理首頁 > 報表 > 代超產品</span> </p> </div> <div class="clearfix contentcss"> <span class="ml20">時間:</span> <DatePicker type="date" :options="options3" :value="beginTime" @on-change="beginTimeChange" placeholder="開始時間" style="width: 150px"></DatePicker> <span> - </span> <DatePicker type="date" :options="options3" :value="endTime" @on-change="endTimeChange" placeholder="結束時間" style="width: 150px"></DatePicker> <Select v-model="AllproductsCode" placeholder="所有產品" style="width:150px" @on-change="AllproductsChange" class="mr20 ml50"> <Option v-for="item in AllproductsList" :value="item.productCode" :key="item.productCode"> {{ item.productName }} </Option> </Select> <Select v-model="InquiredetailCode" placeholder="查詢明細" style="width:150px;" @on-change="InquiredetailChange"> <Option v-for="item in InquiredetaiList" :value="item.flag" :key="item.flag"> {{ item.redetaiName }} </Option> </Select> <Button type="info" class=" ml20 w100" :loading="loading3" @click="queryReportList"> <span v-if="!loading3">查詢</span> <span v-else>查詢</span> </Button> <Button type="primary" class="w100 " :loading="loading2" @click="exports"> <span v-if="!loading2">匯出</span> <span v-else>請稍等...</span> </Button> </div> <div id="application_table " class="contentcss mt10"> <Table class="tabgrouping" border highlight-row :columns="columnList" :data="reportList" v-if='currentStatus == 0'></Table> </div> </div> </template> <script> import utils from "../../utils/utils"; export default { data() { return { currentStatus: 0, loading3: false, loading2: false, beginTime: "", endTime: "", AllproductsCode: "code", //所有產品 AllproductsList: [], InquiredetailCode: "0", //查詢明細 InquiredetaiList: [ { flag: "0", redetaiName: "查詢明細" }, { flag: "1", redetaiName: "查詢彙總" } ], options3: { disabledDate(date) { return date && date.valueOf() > Date.now(); } }, columnList: [], reportList: [] }; }, methods: { // 時間選擇 beginTimeChange(value, data) { this.beginTime = value; }, endTimeChange(value, data) { this.endTime = value; }, AllproductsChange(productsCode) { this.AllproductsCode = productsCode; }, InquiredetailChange(redetaiCode) { this.InquiredetailCode = redetaiCode; }, timeFormat(date, num) { let y = date.getFullYear(); //年 let m = date.getMonth() + 1; //月 let d = date.getDate(); //日 if (num == 1) { d = date.getDate(); } m = m < 10 ? "0" + m : m; d = d < 10 ? "0" + d : d; return y + "-" + m + "-" + d; }, // 查詢 queryReportList() { let date1 = Date.parse(new Date(this.beginTime)) / 1000; let date2 = Date.parse(new Date(this.endTime)) / 1000; if (date1 > date2) { this.$Modal.warning({ title: "提示", content: "<p>開始時間不得大於結束時間</p>" }); return false; } this.loading3 = true; this.columnList = this.getColumnList(); let params = { beginDate: this.beginTime, endDate: this.endTime, AllproductsCode: this.AllproductsCode == "code" ? "" : this.AllproductsCode, flag: this.InquiredetailCode }; this.http .post(BASE_URL + "/superProduct/loanSuperProduct/selectList", params) .then(data => { this.reportList = data.data; this.loading3 = false; }); }, // 匯出 exports() { this.loading2 = true; let httpUrl = BASE_URL + "/superProduct/loanSuperProduct/exportProductList"; let formData = new FormData(); formData.append("beginDate", this.beginTime); formData.append("endDate", this.endDate); formData.append("AllproductsCode", this.AllproductsCode); formData.append("flag", this.InquiredetailCode); utils.exporttable(httpUrl, utils.getlocal("token"), formData, e => { this.loading2 = false; }); }, getColumnList() { let columnList = [ this.getColumnItem("日期", "dateTime", 150), this.getColumnItem("產品名稱", "productName", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.productName; } ); }), this.getColumnItem( "詳情頁檢視人數", "pageViewpvcount", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.pageViewpvcount; } ); } ), this.getColumnItem( "立即申請點選人數", "submitPvcount", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.submitPvcount; } ); } ), this.getColumnItem("點選轉化率", "conversionRate", 150, (h, params) => { return this.reportColumns2Render( h, params.row.loanProductList, details => { return details.conversionRate; } ); }) ]; return columnList; }, getColumnItem(title, key, width, render) { return { title: title, key: key, minWidth: width, align: "center", render: render }; }, reportColumns2Render(h, params, showTextCallback) { let list = []; for (let i = 0; i < params.length; i++) { let text = showTextCallback ? showTextCallback(params[i]) : params[i]; list.push( h( "span", { style: { display: "block", width: "100%", align: "center", lineHeight: "40px", borderBottom: i < params.length - 1 || i < params[i].length - 1 ? "1px solid #e9eaec" : "" } }, text ) ); } return h("div", list); } }, created() { // 所有產品 this.http .post(BASE_URL + "/superProduct/loanSuperProduct/productList", {}) .then(data => { if (data.code == "success") { this.AllproductsList = data.data; this.AllproductsList.splice(0,0,{ productCode: "code", productName: "所有產品" }) } }) .catch(err => { console.log(err); }); }, mounted() { var date = new Date(); this.endTime = this.timeFormat(date, 1); date.setDate(1); this.beginTime = this.timeFormat(date, 0); this.queryReportList(); } }; </script> <style lang="less" scoped> </style>