vue+elementUI竖向表格

最新推荐文章于 2024-08-23 17:08:04 发布

原创最新推荐文章于 2024-08-23 17:08:04 发布 · 910 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

文章介绍了如何在Vue项目中使用ElementUI构建一个具有动态列宽的竖向表格，展示了如何处理后端返回的数据并将其展示在表格中。

vue+elementUI竖向表格

<template>
  <div class="content">
    <el-table
      v-if="true"
      ref="tableList"
      :data="rawData"
      width="98%"
      border
      size="mini"
    >
      <template v-for="(col) in months">
        <el-table-column
          :key="col.key"
          align="center"
          style="background:#909399"
          header-align="center"
          :prop="col.key"
          :label="col.label"
          :width="col.width"
          min-width="80px"
        />
      </template>
    </el-table>
  </div>

</template>
<script>
import { returnRateReportList } from '@/api/customerReturnRate/customerReturnRate'
export default {
  data() {
    return {
      maxHeight: 0,
      search: {
        queryMethod: 0,
        startYearMonth: '2020-01-01',
        endYearMonth: '2020-12-30'
      },
      month: [],
      page: {
        page: 1,
        limit: 100,
        total: 0
      },
      months: [
        { key: 'item', label: '月别', width: '240px' },
        { key: 'one', label: '2023-01', width: '120px' },
        { key: 'two', label: '2023-01', width: '120px' },
        { key: 'three', label: '2023-01', width: '120px' },
        { key: 'four', label: '2023-01', width: '120px' },
        { key: 'five', label: '2023-01', width: '120px' },
        { key: 'six', label: '2023-01', width: '120px' },
        { key: 'seven', label: '2023-01', width: '120px' },
        { key: 'eight', label: '2023-01', width: '120px' },
        { key: 'nine', label: '2023-01', width: '120px' },
         { key: 'ten', label: '2023-01', width: '120px' },
        { key: 'eleven', label: '2023-01', width: '120px' },
        { key: 'twelve', label: '2023-01', width: '120px' }
      ],
      rawData: []
    }
  },
  mounted() {
  },
  created() {
    this.tableList()
  },
  methods: {
    tableList() {
      const searchPage = {
        page: this.page.page,
        limit: this.page.limit
      }
      returnRateReportList(searchPage, this.search).then(res => {
        if (res.msgCode === '000000') {
          var arr = [{}, {}, {}, {}, {}]
          // 转化后端返回数据格式
          const head = ['客户退货总数', '出货总数(计入内部转卖)', '内部转卖出货总数', '客户退货率DPPM（计入内部转卖）', '客户退货率DPPM（不计内部转卖）']
          this.months.forEach(function(item, index) {
            item.label = index === 0 ? '月别' : res.data[index - 1]?.month
            arr[0][item.key] = index === 0 ? head[0] : res.data[index - 1]?.returnTotalCount
            arr[1][item.key] = index === 0 ? head[1] : res.data[index - 1]?.shipToQty
            arr[2][item.key] = index === 0 ? head[2] : res.data[index - 1]?.innerShipToQty
            arr[3][item.key] = index === 0 ? head[3] : res.data[index - 1]?.innerSaleRate
            arr[4][item.key] = index === 0 ? head[4] : res.data[index - 1]?.outterSaleRate
          })
        }
        this.rawData = arr
      })
    }
   }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 20px 20px 5px 20px;
}
</style>