iview表格(1级对应多级)

版权声明：未经本人同意不得转载 一切法律责任 后果自负 https://blog.csdn.net/xy19950125/article/details/83418796

<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>管理首页&nbsp;>&nbsp;报表&nbsp;>&nbsp;代超产品</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>