当前位置： 首页 > article >正文

vue3表格数据分2个表格序号连续展示

article 2025/1/26 15:32:55

一、el-table表格在弹窗里面分两个表格展示。

假设我们有一个数组 tableData，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。

<template>
  <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>

  <el-dialog
    title="表格展示"
    v-model="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <!-- 第一个表格 -->
    <el-table
      :data="firstTableData"
      border
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <!-- 第二个表格 -->
    <el-table
      :data="secondTableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: '2024-01-01',
          name: '张三',
          address: '上海市浦东新区',
        },
        {
          date: '2024-01-02',
          name: '李四',
          address: '北京市海淀区',
        },
        {
          date: '2024-01-03',
          name: '王五',
          address: '广州市天河区',
        },
        {
          date: '2024-01-04',
          name: '赵六',
          address: '深圳市南山区',
        },
      ],
    };
  },
  computed: {
    // 计算第一个表格的数据（前半部分）
    firstTableData() {
      return this.tableData.slice(0, this.tableData.length / 2);
    },
    // 计算第二个表格的数据（后半部分）
    secondTableData() {
      return this.tableData.slice(this.tableData.length / 2);
    },
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

代码解析

  1. 数据切分：

    • 使用 computed 属性 firstTableData 和 secondTableData 来分别计算两个表格的数据。

    • firstTableData：通过 slice(0, this.tableData.length / 2) 获取数组的前半部分。

    • secondTableData：通过 slice(this.tableData.length / 2) 获取数组的后半部分。

  2. 表格绑定：

    • 第一个表格绑定到 firstTableData。

    • 第二个表格绑定到 secondTableData。

  3. 弹窗控制：

    • 使用 el-dialog 控制弹窗的显示与隐藏。

    • 在弹窗底部添加操作按钮，控制弹窗的关闭。

扩展功能

  • 动态分组： 如果需要根据某些条件动态分组数据，可以在 computed 属性中添加逻辑。例如，根据 name 或 date 将数据分组。

  • 筛选功能： 可以在弹窗中添加筛选功能，允许用户选择展示哪些数据。

  • 分页功能： 如果数据量较大，可以在每个表格下方添加 el-pagination 组件来实现分页功能。

通过上述实现，你可以在一个弹窗中展示同一个数组的不同部分，满足不同的展示需求。

二、序号连续起来

<template>
  <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>

  <el-dialog
    title="表格展示"
    v-model="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <!-- 第一个表格 -->
    <el-table
      :data="firstTableData"
      border
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="60"
      ></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <!-- 第二个表格 -->
    <el-table
      :data="secondTableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="60"
      ></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        { date: '2024-01-01', name: '张三', address: '上海市浦东新区' },
        { date: '2024-01-02', name: '李四', address: '北京市海淀区' },
        { date: '2024-01-03', name: '王五', address: '广州市天河区' },
        { date: '2024-01-04', name: '赵六', address: '深圳市南山区' },
        { date: '2024-01-05', name: '孙七', address: '杭州市西湖区' },
        { date: '2024-01-06', name: '周八', address: '成都市武侯区' },
      ],
    };
  },
  computed: {
    firstTableData() {
      return this.tableData.slice(0, this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1, // 添加序号
      }));
    },
    secondTableData() {
      return this.tableData.slice(this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1 + this.tableData.length / 2, // 添加序号
      }));
    },
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>

代码解析

  1. 计算序号：

    • 在 computed 属性中，我们分别处理 firstTableData 和 secondTableData。

    • 使用 map 方法为每个表格的数据添加一个 index 属性。

    • 第一个表格的序号从 1 开始。

    • 第二个表格的序号从第一个表格的最后一个序号加 1 开始。

  2. 表格列绑定：

    • 使用 prop="index" 绑定序号列，确保序号在表格中正确显示。

测试结果

假设 tableData 包含 6 条数据，第一个表格显示前 3 条，第二个表格显示后 3 条。序号将如下显示：

  • 第一个表格：

    • 序号：1, 2, 3

  • 第二个表格：

    • 序号：4, 5, 6

三、 将会遇到问题

当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。

同时，如果后台数据返回单数时，序号会出现1.5、2.5、3.5这样的。

四、解决

1、分析

当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。

原因是slice切割的时候，如果数据为单数，比如1条数据，左边表格：

this.tableData.slice(0, this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1, // 添加序号
      }));

slice(0, 0.5)就没切到数据，因为slice第二个参数取开区间，拿不到右边那个数的位置。然后右边表格：

this.tableData.slice(this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1 + this.tableData.length / 2, // 添加序号
      }));

slice(0.5)就是取后面的数据，就是取包括0.5位置在内的往后面的数据。

所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。

2、例如

const arr = [1, 2, 3, 4, 5]

console.log(arr.slice(2, 4))    // [3, 4]

console.log(arr.slice(1))    // [2, 3, 4, 5]

3、解决一条数据数据跑到右边表格问题

3.1 切割时数据向上取整

 切割之后应该向上取整。比如，如果一条数据，左边表格：

this.tableData.slice(0, Math.ceil(this.tableData.length / 2))，也就是slice(0, 1)，也就是切割到唯一一条数据。

右边表格：

this.tableData.slice(Math.ceil(this.tableData.length / 2))，slice(1)，无数据。

这样就能解决只有一条数据时，会跑到右边表格的问题。

3.2 序号这里也要向上取整

原本连续序号实现方式：

computed: {
    firstTableData() {
      return this.tableData.slice(0, this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1, // 添加序号
      }));
    },
    secondTableData() {
      return this.tableData.slice(this.tableData.length / 2).map((item, index) => ({
        ...item,
        index: index + 1 + this.tableData.length / 2, // 添加序号
      }));
    },
  },

因为现在切割时向上取整，序号位置也要.

3.3 最终逻辑：
computed: {
    firstTableData() {
      return this.tableData.slice(0, Math.ceil(this.tableData.length / 2)).map((item, index) => ({
        ...item,
        index: index + 1, // 添加序号
      }));
    },
    secondTableData() {
      return this.tableData.slice(Math.ceil(this.tableData.length / 2)).map((item, index) => ({
        ...item,
        index: index + 1 + Math.ceil(this.tableData.length / 2), // 添加序号
      }));
    },
  },

4、拓展

如果想通过向下取整的方式实现，会发现有问题，大家有兴趣可以试试。

以上就是实现vue3表格数据分2个表格且序号连续展示的全过程以及解决相关问题。


http://www.kler.cn/a/517524.html

相关文章：

  • 7-Zip Mark-of-the-Web绕过漏洞复现(CVE-2025-0411)
  • RabbitMQ 多种安装模式
  • 哈希表示例
  • Poetry shell --＞ poetry-plugin-shell
  • 程朱理学基本知识
  • H3C-无线WLAN配置案例(二层隧道转发)
  • 基于亿坊PHP框架构建物联网解决方案的优势分析！
  • 【QT】- QThread类介绍和线程的创建
  • 「 机器人 」扑翼飞行器的数据驱动建模核心方法
  • Django基础之ORM
  • arm-linux平台、rk3288 SDL移植
  • （算法竞赛）使用广度优先搜索（BFS）解决迷宫最短路径问题
  • 14.杂谈：领域知识库与知识图谱：概念、关系与重要性
  • 虚拟头节点和双指针解决链表问题（合并，与分解操作，力扣题目为例）
  • 微信小程序date picker的一些说明
  • C++实现设计模式---职责链模式 (Chain of Responsibility)
  • Python结构
  • CMake函数参数
  • 前端【8】HTML+CSS+javascript实战项目----实现一个简单的待办事项列表 (To-Do List)
  • MUSE: PARALLEL MULTI-SCALE ATTENTION FOR SEQUENCE TO SEQUENCE LEARNING 笔记
  • Go语言中变量在栈和堆上分配情况分析
  • 论文：深度可分离神经网络存内计算处理芯片
  • [MySQL]数据库表内容的增删查改操作大全
  • Word 中实现方框内点击自动打 √ ☑
  • -bash: ./uninstall.command: /bin/sh^M: 坏的解释器: 没有那个文件或目录
  • Kotlin泛型学习篇