element 复杂表格，表格合并

充满元气的前端工程师

已于 2023-05-22 20:56:38 修改

阅读量157

点赞数

文章标签： javascript java 开发语言

于 2023-05-18 22:20:19 首次发布

本文链接：https://blog.csdn.net/huqiang1995/article/details/130756511

版权

该段代码展示了如何在Vue.js应用中使用el-table组件来渲染表格数据，其中包含一个固定列（类别）和多个动态生成的日期列，显示的是不同日期的‘转模次数’。数据结构以键值对形式存储，日期作为键，转模次数作为值。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-table :data="dataArray" border>
      <!-- 列定义 -->
      <el-table-column prop="类别" label="类别"></el-table-column>
      <el-table-column v-for="key in dateKeys" :key="key" :prop="key" :label="key"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataArray: [
        {
          "类别": "转模次数",
          "2023-04-19": "0",
          "2023-04-20": "0",
          "2023-04-21": "0",
          "2023-04-25": "0",
          "2023-04-26": "0",
          "2023-04-27": "0",
          "2023-05-06": "0",
          "2023-05-10": "0",
          "2023-05-11": "0"
        }
      ]
    };
  },
  computed: {
    dateKeys() {
	  if (this.tableCommonInfo?.dataArray?.[0]) {
	    return Object.keys(this.tableCommonInfo.dataArray[0]).filter(
	      (key) => key !== '类别'
	    );
	  }
	  return [];
	}
  }
};
</script>