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

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

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

1. <template>
2.   <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
4.   <el-dialog
5.     title="表格展示"
6.     v-model="dialogVisible"
7.     width="80%"
8.     :before-close="handleClose"
9.   >
10.     <!-- 第一个表格 -->
11.     <el-table
12.       :data="firstTableData"
13.       border
14.       style="width: 100%; margin-bottom: 20px"
15.     >
16.       <el-table-column prop="date" label="日期" width="180"></el-table-column>
17.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
18.       <el-table-column prop="address" label="地址"></el-table-column>
19.     </el-table>
21.     <!-- 第二个表格 -->
22.     <el-table
23.       :data="secondTableData"
24.       border
25.       style="width: 100%"
26.     >
27.       <el-table-column prop="date" label="日期" width="180"></el-table-column>
28.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
29.       <el-table-column prop="address" label="地址"></el-table-column>
30.     </el-table>
32.     <template #footer>
33.       <span class="dialog-footer">
34.         <el-button @click="dialogVisible = false">取消</el-button>
35.         <el-button type="primary" @click="dialogVisible = false">确定</el-button>
36.       </span>
37.     </template>
38.   </el-dialog>
39. </template>
41. <script>
42. export default {
43.   data() {
44.     return {
45.       dialogVisible: false,
46.       tableData: [
47.         {
48.           date: '2024-01-01',
49.           name: '张三',
50.           address: '上海市浦东新区',
51.         },
52.         {
53.           date: '2024-01-02',
54.           name: '李四',
55.           address: '北京市海淀区',
56.         },
57.         {
58.           date: '2024-01-03',
59.           name: '王五',
60.           address: '广州市天河区',
61.         },
62.         {
63.           date: '2024-01-04',
64.           name: '赵六',
65.           address: '深圳市南山区',
66.         },
67.       ],
68.     };
69.   },
70.   computed: {
71.     // 计算第一个表格的数据（前半部分）
72.     firstTableData() {
73.       return this.tableData.slice(0, this.tableData.length / 2);
74.     },
75.     // 计算第二个表格的数据（后半部分）
76.     secondTableData() {
77.       return this.tableData.slice(this.tableData.length / 2);
78.     },
79.   },
80.   methods: {
81.     handleClose(done) {
82.       this.$confirm('确认关闭？')
83.         .then(() => {
84.           done();
85.         })
86.         .catch(() => {});
87.     },
88.   },
89. };
90. </script>

复制代码

代码剖析

• 数据切分：
  
  
  
  • 使用 computed 属性 firstTableData 和 secondTableData 来分别盘算两个表格的数据。
    
  • firstTableData：通过 slice(0, this.tableData.length / 2) 获取数组的前半部门。
    
  • secondTableData：通过 slice(this.tableData.length / 2) 获取数组的后半部门。
    
  
  
• 表格绑定：
  
  
  
  • 第一个表格绑定到 firstTableData。
    
  • 第二个表格绑定到 secondTableData。
    
  
  
• 弹窗控制：
  
  
  
  • 使用 el-dialog 控制弹窗的显示与隐藏。
    
  • 在弹窗底部添加操作按钮，控制弹窗的关闭。
    
  
  

扩展功能

• 动态分组： 如果需要根据某些条件动态分组数据，可以在 computed 属性中添加逻辑。比方，根据 name 或 date 将数据分组。
  
• 筛选功能： 可以在弹窗中添加筛选功能，答应用户选择展示哪些数据。
  
• 分页功能： 如果数据量较大，可以在每个表格下方添加 el-pagination 组件来实现分页功能。
  

通过上述实现，你可以在一个弹窗中展示同一个数组的不同部门，满意不同的展示需求。
二、序号一连起来

1. <template>
2.   <el-button type="primary" @click="dialogVisible = true">打开弹窗</el-button>
4.   <el-dialog
5.     title="表格展示"
6.     v-model="dialogVisible"
7.     width="80%"
8.     :before-close="handleClose"
9.   >
10.     <!-- 第一个表格 -->
11.     <el-table
12.       :data="firstTableData"
13.       border
14.       style="width: 100%; margin-bottom: 20px"
15.     >
16.       <el-table-column
17.         prop="index"
18.         label="序号"
19.         width="60"
20.       ></el-table-column>
21.       <el-table-column prop="date" label="日期" width="180"></el-table-column>
22.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
23.       <el-table-column prop="address" label="地址"></el-table-column>
24.     </el-table>
26.     <!-- 第二个表格 -->
27.     <el-table
28.       :data="secondTableData"
29.       border
30.       style="width: 100%"
31.     >
32.       <el-table-column
33.         prop="index"
34.         label="序号"
35.         width="60"
36.       ></el-table-column>
37.       <el-table-column prop="date" label="日期" width="180"></el-table-column>
38.       <el-table-column prop="name" label="姓名" width="180"></el-table-column>
39.       <el-table-column prop="address" label="地址"></el-table-column>
40.     </el-table>
42.     <template #footer>
43.       <span class="dialog-footer">
44.         <el-button @click="dialogVisible = false">取消</el-button>
45.         <el-button type="primary" @click="dialogVisible = false">确定</el-button>
46.       </span>
47.     </template>
48.   </el-dialog>
49. </template>
51. <script>
52. export default {
53.   data() {
54.     return {
55.       dialogVisible: false,
56.       tableData: [
57.         { date: '2024-01-01', name: '张三', address: '上海市浦东新区' },
58.         { date: '2024-01-02', name: '李四', address: '北京市海淀区' },
59.         { date: '2024-01-03', name: '王五', address: '广州市天河区' },
60.         { date: '2024-01-04', name: '赵六', address: '深圳市南山区' },
61.         { date: '2024-01-05', name: '孙七', address: '杭州市西湖区' },
62.         { date: '2024-01-06', name: '周八', address: '成都市武侯区' },
63.       ],
64.     };
65.   },
66.   computed: {
67.     firstTableData() {
68.       return this.tableData.slice(0, this.tableData.length / 2).map((item, index) => ({
69.         ...item,
70.         index: index + 1, // 添加序号
71.       }));
72.     },
73.     secondTableData() {
74.       return this.tableData.slice(this.tableData.length / 2).map((item, index) => ({
75.         ...item,
76.         index: index + 1 + this.tableData.length / 2, // 添加序号
77.       }));
78.     },
79.   },
80.   methods: {
81.     handleClose(done) {
82.       this.$confirm('确认关闭？')
83.         .then(() => {
84.           done();
85.         })
86.         .catch(() => {});
87.     },
88.   },
89. };
90. </script>

复制代码

代码剖析

• 盘算序号：
  
  
  
  • 在 computed 属性中，我们分别处置惩罚 firstTableData 和 secondTableData。
    
  • 使用 map 方法为每个表格的数据添加一个 index 属性。
    
  • 第一个表格的序号从 1 开始。
    
  • 第二个表格的序号从第一个表格的末了一个序号加 1 开始。
    
  
  
• 表格列绑定：
  
  
  
  • 使用 prop="index" 绑定序号列，确保序号在表格中正确显示。
    
  
  

测试结果

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

• 第一个表格：
  
  
  
  • 序号：1, 2, 3
    
  
  
• 第二个表格：
  
  
  
  • 序号：4, 5, 6
    
  
  

三、 将会遇到题目

当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。
同时，如果背景数据返回单数时，序号会出现1.5、2.5、3.5这样的。
四、解决

1、分析

当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。
缘故原由是slice切割的时间，如果数据为单数，比如1条数据，左边表格：

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

复制代码

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

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

复制代码

slice(0.5)就是取后面的数据，就是取包罗0.5位置在内的以后面的数据。
所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。
2、比方

1. const arr = [1, 2, 3, 4, 5]
3. console.log(arr.slice(2, 4))    // [3, 4]
5. 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 序号这里也要向上取整

原本一连序号实现方式：

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

复制代码

因为现在切割时向上取整，序号位置也要.
3.3 最终逻辑：

1. computed: {
2.     firstTableData() {
3.       return this.tableData.slice(0, Math.ceil(this.tableData.length / 2)).map((item, index) => ({
4.         ...item,
5.         index: index + 1, // 添加序号
6.       }));
7.     },
8.     secondTableData() {
9.       return this.tableData.slice(Math.ceil(this.tableData.length / 2)).map((item, index) => ({
10.         ...item,
11.         index: index + 1 + Math.ceil(this.tableData.length / 2), // 添加序号
12.       }));
13.     },
14.   },

复制代码

4、拓展

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。