el-table表头根据响应数据排列

已于 2025-06-06 16:05:06 修改
阅读量412 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： elementui vue.js javascript
于 2024-10-14 21:53:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lianghuaxiang/article/details/142929859

水一篇文章

今天写了什么

用文心一言写了数据结构转换，想想后面还用得到，记录一下。

接口响应数据：

{
    "categorySaleStatisticsTend": [
        {
            "dataDateUnit": "2024-09-15",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-16",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-17",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-18",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-19",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-20",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-21",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-22",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-23",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-24",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-25",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-26",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-27",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-28",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-29",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-09-30",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-01",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-02",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-03",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-04",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-05",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-06",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-07",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-08",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-09",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-10",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-11",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-12",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-13",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        },
        {
            "dataDateUnit": "2024-10-14",
            "keywordProperty": {
                "上衣": 0,
                "下装": 0,
                "配件": 0,
                "汇总": 0,
                "文胸": 0
            }
        }
    ],
    "categorySaleTendData": [
        {
            "dataDateUnit": "上衣",
            "keywordProperty": {
                "2024-09-20": 0,
                "2024-09-21": 0,
                "2024-09-22": 0,
                "2024-09-27": 0,
                "2024-09-28": 0,
                "2024-09-29": 0,
                "2024-09-23": 0,
                "2024-09-24": 0,
                "2024-09-25": 0,
                "2024-09-26": 0,
                "2024-10-09": 0,
                "2024-10-07": 0,
                "2024-10-08": 0,
                "2024-10-05": 0,
                "2024-10-06": 0,
                "2024-10-03": 0,
                "2024-10-04": 0,
                "2024-10-01": 0,
                "2024-10-02": 0,
                "2024-09-30": 0,
                "2024-09-16": 0,
                "2024-09-17": 0,
                "2024-09-18": 0,
                "2024-09-19": 0,
                "2024-09-15": 0,
                "2024-10-14": 0,
                "2024-10-12": 0,
                "2024-10-13": 0,
                "2024-10-10": 0,
                "2024-10-11": 0
            }
        },
        {
            "dataDateUnit": "下装",
            "keywordProperty": {
                "2024-09-20": 0,
                "2024-09-21": 0,
                "2024-09-22": 0,
                "2024-09-27": 0,
                "2024-09-28": 0,
                "2024-09-29": 0,
                "2024-09-23": 0,
                "2024-09-24": 0,
                "2024-09-25": 0,
                "2024-09-26": 0,
                "2024-10-09": 0,
                "2024-10-07": 0,
                "2024-10-08": 0,
                "2024-10-05": 0,
                "2024-10-06": 0,
                "2024-10-03": 0,
                "2024-10-04": 0,
                "2024-10-01": 0,
                "2024-10-02": 0,
                "2024-09-30": 0,
                "2024-09-16": 0,
                "2024-09-17": 0,
                "2024-09-18": 0,
                "2024-09-19": 0,
                "2024-09-15": 0,
                "2024-10-14": 0,
                "2024-10-12": 0,
                "2024-10-13": 0,
                "2024-10-10": 0,
                "2024-10-11": 0
            }
        },
        {
            "dataDateUnit": "配件",
            "keywordProperty": {
                "2024-09-20": 0,
                "2024-09-21": 0,
                "2024-09-22": 0,
                "2024-09-27": 0,
                "2024-09-28": 0,
                "2024-09-29": 0,
                "2024-09-23": 0,
                "2024-09-24": 0,
                "2024-09-25": 0,
                "2024-09-26": 0,
                "2024-10-09": 0,
                "2024-10-07": 0,
                "2024-10-08": 0,
                "2024-10-05": 0,
                "2024-10-06": 0,
                "2024-10-03": 0,
                "2024-10-04": 0,
                "2024-10-01": 0,
                "2024-10-02": 0,
                "2024-09-30": 0,
                "2024-09-16": 0,
                "2024-09-17": 0,
                "2024-09-18": 0,
                "2024-09-19": 0,
                "2024-09-15": 0,
                "2024-10-14": 0,
                "2024-10-12": 0,
                "2024-10-13": 0,
                "2024-10-10": 0,
                "2024-10-11": 0
            }
        },
        {
            "dataDateUnit": "汇总",
            "keywordProperty": {
                "2024-09-20": 0,
                "2024-09-21": 0,
                "2024-09-22": 0,
                "2024-09-27": 0,
                "2024-09-28": 0,
                "2024-09-29": 0,
                "2024-09-23": 0,
                "2024-09-24": 0,
                "2024-09-25": 0,
                "2024-09-26": 0,
                "2024-10-09": 0,
                "2024-10-07": 0,
                "2024-10-08": 0,
                "2024-10-05": 0,
                "2024-10-06": 0,
                "2024-10-03": 0,
                "2024-10-04": 0,
                "2024-10-01": 0,
                "2024-10-02": 0,
                "2024-09-30": 0,
                "2024-09-16": 0,
                "2024-09-17": 0,
                "2024-09-18": 0,
                "2024-09-19": 0,
                "2024-09-15": 0,
                "2024-10-14": 0,
                "2024-10-12": 0,
                "2024-10-13": 0,
                "2024-10-10": 0,
                "2024-10-11": 0
            }
        },
        {
            "dataDateUnit": "文胸",
            "keywordProperty": {
                "2024-09-20": 0,
                "2024-09-21": 0,
                "2024-09-22": 0,
                "2024-09-27": 0,
                "2024-09-28": 0,
                "2024-09-29": 0,
                "2024-09-23": 0,
                "2024-09-24": 0,
                "2024-09-25": 0,
                "2024-09-26": 0,
                "2024-10-09": 0,
                "2024-10-07": 0,
                "2024-10-08": 0,
                "2024-10-05": 0,
                "2024-10-06": 0,
                "2024-10-03": 0,
                "2024-10-04": 0,
                "2024-10-01": 0,
                "2024-10-02": 0,
                "2024-09-30": 0,
                "2024-09-16": 0,
                "2024-09-17": 0,
                "2024-09-18": 0,
                "2024-09-19": 0,
                "2024-09-15": 0,
                "2024-10-14": 0,
                "2024-10-12": 0,
                "2024-10-13": 0,
                "2024-10-10": 0,
                "2024-10-11": 0
            }
        }
    ]
}

Vue页面

<template>
  <div>
    <el-card>
      <div slot="header">
        品类销售趋势
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade + " " }}年度完成率</span
                    > -->
      </div>
      <!-- <LineChart /> -->
      <div
        style="margin-left: 2px; margin-right: 2px; height: 410px"
        ref="salesQuantity"
      ></div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="dataDateUnit" label="类别" width="100">
        </el-table-column>
        <el-table-column
          v-for="(month, index) in months"
          :key="index"
          :prop="'salesData.' + index"
          :label="month"
          width="120"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <div slot="header">
        同期品类销售额对比分析
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade + " " }}年度完成率</span
                    > -->
      </div>
      <barLine :echartDataSku="barLineChart" />
      <el-table :data="barLineData" style="width: 100%">
        <el-table-column
          prop="category1"
          label="类别"
          width="100"
        ></el-table-column>
        <el-table-column prop="salesAmount" label="销售额" width="100">
        </el-table-column>
        <el-table-column
          prop="yoySalesAmount"
          label="上一年销售额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="salesAmountYoy"
          label="同比"
          width="100"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  selectCategorySaleTend,
  selectCategorySaleYoy,
} from "@/api/productStructure/BiCategoryBasicsDwd";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";

export default {
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    barLine,
    LineChart,
  },
  data() {
    return {
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份
      //对比
      barLineChart: {},
      barLineData: [],
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.getselectCategorySaleTend("salesQuantity");
        this.getselectCategorySaleYoy();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getselectCategorySaleYoy() {
      selectCategorySaleYoy(this.query).then((response) => {
        this.barLineData = response;
        this.barLineChart = {
          columns: ["品类", "销售额", "上一年销售额", , "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.category1,
            销售额: item.salesAmount,
            上一年销售额: item.yoySalesAmount,
            同比: item.salesAmountYoy ? item.salesAmountYoy : 0,
          });
        });
      });
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "8%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const E = echarts.init(this.$refs[property]);

        E.setOption(option);
      });
    },
  },
};
</script>

重点代码：


<el-table :data="tableData" style="width: 100%">
        <el-table-column prop="dataDateUnit" label="类别" width="110">
        </el-table-column>
        <el-table-column
          v-for="(month, index) in months"
          :key="index"
          :prop="'salesData.' + index"
          :label="month"
          width="120"
        >
        </el-table-column>
      </el-table>


//methods
selectCategoryVisitorTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });

        // 转换数据格式
        response.categorySaleTendData.forEach((item) => {
          const row = { dataDateUnit: item.dataDateUnit, salesData: [] };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0); // 使用逻辑或操作符确保没有数据的月份显示为0
          });
          this.tableData.push(row);
        });
【技术难题】el-table的全局数据排序实现示例，不受分页影响，以及异步请求带来的页面渲染问题
qq_39666711的博客
06-24 898
摘要 该代码实现了一个商品列表的全局排序功能。前端使用Vue.js框架，通过Element UI的表格组件展示商品数据，当用户点击表头排序时触发sortChange方法。该方法发送排序请求到后端，并根据返回结果更新表格数据。后端采用Java Spring Boot框架，接收排序参数后使用自定义比较器CustomComparator对商品列表进行升序或降序排列，最后返回排序后的结果。整个流程包含前端交互、API请求、后端排序处理和数据更新等环节，实现了完整的排序功能。
element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值
qq_46617584的博客
10-24 1万+
element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name="row" cell-class-name="column" :row-style="setRowStyle" :cell-style="setColumnStyle" :h
element table表格，动态生成表头，基于可拖拽组件，拖动排序
m0_58393198的博客
11-04 1850
element table表格，动态生成表头，基于可拖拽组件，拖动排序
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序
RenGJ010617的博客
04-08 9752
写这篇博客的原因是前段时间做了一个数据列可变的表格，同时需要实现在网页中更新了数据列之后，能够对表格进行排序的需求。 博客主要内容： el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序
Vue+Element-UI Table表头排序
Riqk_Qin的专栏
04-04 2287
Vue代码 <el-table v-loading="loading" :data="standardList" @sort-change='sortChange'> <el-table-column label="序号" prop="id" width="80" sortable='custom'/> </el-table> 在<el-table @sort-change=‘sortChange’> 需要加上@sort-change=‘s
vue2实现el-table表头之间的拖拽
04-02
好的，我现在需要在Vue2中实现Element UI表格（el-table）的表头拖拽功能。用户提供的参考中有提到自定义样式和二次封装组件，这可能对实现拖拽有帮助。首先，我得了解el-table的结构和表头的渲染方式。 表头拖拽...
vue移动端el-table的表头部分无法拖动
01-01
### 解决 Vue 移动端 el-table 表头无法拖动的问题 对于 `el-table` 组件，在移动端遇到表头无法拖动的情况，通常是因为默认情况下该组件并未针对移动设备优化触摸事件处理逻辑。为了使表头能够在移动设备上正常...
el-table 设定了固定高度但是数据少的时候下边有空白
最新发布
07-18
但是，如果我们需要固定表头（即当数据多时表头固定，表格体滚动），那么就需要给el-table设置height属性或者max-height属性。在这种情况下，当数据少时，表格高度会小于设置的高度，从而出现空白。 为了解决这个...
el-table 源码分析
03-14
`el-table` 是 Element UI 中用于展示数据的表格组件，其主要功能包括但不限于渲染表格、支持多级表头、自定义列模板以及分页等功能。其实现依赖 Vue.js 的响应式机制和 DOM 渲染能力。 #### 2. **实现原理剖析** ...
关于el-table使用、layout简单布局和el-upload拖拽样式修改
qq_54381639的博客
07-29 3674
最近做的vue+elementUI的前端项目开发，分享下遇到了一些关于饿了么组件样式调整的问题以及最终解决方式，希望能帮得到正在眉头紧蹙的你
el-table 列的动态显示与隐藏
热门推荐
一起加油吧~
12-23 1万+
当我们在对表格数据查看的时候，可能某些列的数据是当前想要重点关注的，而某些列并不需要展示出来，我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
el-table根据条件显示列
程序媛的博客
03-09 2227
根据不同的条件，需要对表格的列，做判断显示隐藏。但是会出现表格列顺序渲染错乱的问题。于是做出此经验总结。
vue项目之el-table点击表头，进行排序
yan263364的博客
10-11 6369
一、效果 二、vue 三、JS settingClass 渲染表头： renderHeader 排序功能： handleCommand 四、less 只把 排序 的样式贴出来，其他根据项目不同，自己设置样式。 ...
el-table表头列 可拖拽排序
weixin_45890414的博客
02-03 1805
<div @mouseleave="moveTableOutside"> <el-table class="drag_table" :data="tableData" border stripe :cell-class-name="cellClassName" :header-cell-class-name="headerCellClassName" style="w
Element技能点--el-table 列排序自动变化问题
程序员大阳
12-24 6677
现象 使用了el-table组件后，想根据不同的条件显示不同的列，例如： <template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column v-if="type==1" prop="date" label="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值