vue中循环表格数据出现数据联动现象(示例代码)

更新时间：2024年11月08日 14:23:18 作者：jieyucx

在Vue中循环生成表格数据时,可能会遇到数据联动的现象,即修改一个表格中的数据后,其他表格的数据也会跟着变化,这种现象通常是因为所有表格的数据引用了同一个对象或数组导致的,本文介绍vue中循环表格数据出现数据联动现象,感兴趣的朋友一起看看吧

vue中循环表格数据，出现数据联动现象。

问题描述：如图

我输入期数为4，会循环出来4个表格，其中名额分配一栏人数是可以编辑的，但是当我修改第一个表格的数据之后，后面的表格数据也跟着修改了。

源码如下

<template>
  <div class="content">
    <div style="margin: 20px;">
      <span>期数：</span>
      <el-input-number v-model="periods" :min="0" size="small" :precision="0" :controls="false" @change="handleChange"/>
    </div>
    <div v-for="(tableData, index) in listDatas" :key="index" style="margin-top: 20px;">
      <div style="width: 100%; text-align: right; margin-bottom: 5px;">
        <el-button type="primary" size="small" plain @click="rowDel(index)">删除</el-button>
      </div>
      <vxe-table
        :data="tableData"
        border
        stripe
        size="mini"
      >
        <vxe-column align="center" field="sectionDeptName" title="站段" min-width="180"></vxe-column>
        <vxe-column align="center" field="userNumber" title="分配名额" min-width="180">
          <template #default="{ row }">
            <el-input-number v-model="row.userNumber" :min="0" size="small" :precision="0" :controls="false"/>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 期数
const periods = ref(0);
// 表格数据列表
const listDatas = ref([]);
// 初始表格数据
const initialData = [
  { sectionDeptName: '初中', userNumber: 100 },
  { sectionDeptName: '高中', userNumber: 50 },
  { sectionDeptName: '小学', userNumber: 60 },
  { sectionDeptName: '大学', userNumber: 30 }
];
// 期数变化处理
const handleChange = (e) => {
  if (listDatas.value.length === 0) {
    for (let i = 0; i < e; i++) {
      listDatas.value.push(initialData);
    }
  } else {
    let i = listDatas.value.length;
    for (i; i < e; i++) {
      listDatas.value.push(initialData);
    }
  }
};
// 行删除事件
const rowDel = (index) => {
  ElMessageBox.confirm('确定将选择数据删除?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    listDatas.value.splice(index, 1);
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '操作成功!'
    });
  });
};
</script>
<style scoped>
.content {
  padding: 20px;
}
</style>

问题原因

你遇到的问题是因为在生成多个表格时，所有表格的数据都引用了同一个对象或数组，导致数据联动现象。要解决这个问题，你需要确保每个表格的数据是独立的副本，而不是引用同一个对象或数组。

解决方案

在生成表格数据时，使用深拷贝来确保每个表格的数据是独立的副本。

代码如下

<template>
  <div class="content">
    <div style="margin: 20px;">
      <span>期数：</span>
      <el-input-number v-model="periods" :min="0" size="small" :precision="0" :controls="false" @change="handleChange"/>
    </div>
    <div v-for="(tableData, index) in listDatas" :key="index" style="margin-top: 20px;">
      <div style="width: 100%; text-align: right; margin-bottom: 5px;">
        <el-button type="primary" size="small" plain @click="rowDel(index)">删除</el-button>
      </div>
      <vxe-table
        :data="tableData"
        border
        stripe
        size="mini"
      >
        <vxe-column align="center" field="sectionDeptName" title="站段" min-width="180"></vxe-column>
        <vxe-column align="center" field="userNumber" title="分配名额" min-width="180">
          <template #default="{ row }">
            <el-input-number v-model="row.userNumber" :min="0" size="small" :precision="0" :controls="false"/>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 期数
const periods = ref(0);
// 表格数据列表
const listDatas = ref([]);
// 初始表格数据
const initialData = [
  { sectionDeptName: '初中', userNumber: 100 },
  { sectionDeptName: '高中', userNumber: 50 },
  { sectionDeptName: '小学', userNumber: 60 },
  { sectionDeptName: '大学', userNumber: 30 }
];
// 期数变化处理
const handleChange = (e) => {
  if (listDatas.value.length === 0) {
    for (let i = 0; i < e; i++) {
      let tableData = initialData.map(item => ({ ...item})); // 使用深拷贝
      listDatas.value.push(tableData);
    }
  } else {
    let i = listDatas.value.length;
    for (i; i < e; i++) {
      let tableData = initialData.map(item => ({ ...item})); // 使用深拷贝
      listDatas.value.push(tableData);
    }
  }
};
// 行删除事件
const rowDel = (index) => {
  ElMessageBox.confirm('确定将选择数据删除?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    listDatas.value.splice(index, 1);
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '操作成功!'
    });
  });
};
</script>
<style scoped>
.content {
  padding: 20px;
}
</style>

到此这篇关于vue中循环表格数据，出现数据联动现象。的文章就介绍到这了,更多相关vue表格数据联动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中的v-if基本使用(最新推荐)
v-if根据表达式的真假，切换元素的显示和隐藏操作DOM元素，这篇文章主要介绍了vue中的v-if基本使用,需要的朋友可以参考下
2022-12-12
vue3如何在setup中获取DOM元素
这篇文章主要介绍了vue3如何在setup中获取DOM元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue如何通过ref调用router-view子组件的方法
这篇文章主要介绍了vue 通过ref调用router-view子组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
在vue3.0中如何配置代理
这篇文章主要介绍了在vue3.0中如何配置代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue使用$emit传递参数方式
这篇文章主要介绍了vue使用$emit传递参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue-router 4使用实例详解
虽然 vue-router 4 大多数 API 保持不变，但是在 vue3 中以插件形式存在，所以在使用时有一定的变化。接下来就学习学习它是如何使用的
2021-11-11
VUE + UEditor 单图片跨域上传功能的实现方法
这篇文章主要介绍了VUE + UEditor 单图片跨域上传功能的实现方法，需要的朋友参考下
2018-02-02
vue长按事件touch示例详解
这篇文章主要介绍了vue长按事件touch,文末给大家补充介绍了Vue长按触摸事件的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
Vue报错:TypeError:Cannot create property '
这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
关于Element上传组件beforeUpload上传前限制失效问题
这篇文章主要介绍了Element上传组件beforeUpload上传前限制失效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03