快捷導(dǎo)航

vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象(示例代碼)

更新時(shí)間：2024年11月08日 14:23:18 作者：jieyucx

在Vue中循環(huán)生成表格數(shù)據(jù)時(shí),可能會遇到數(shù)據(jù)聯(lián)動的現(xiàn)象,即修改一個(gè)表格中的數(shù)據(jù)后,其他表格的數(shù)據(jù)也會跟著變化,這種現(xiàn)象通常是因?yàn)樗斜砀竦臄?shù)據(jù)引用了同一個(gè)對象或數(shù)組導(dǎo)致的,本文介紹vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象,感興趣的朋友一起看看吧

vue中循環(huán)表格數(shù)據(jù)，出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象。

問題描述：如圖

我輸入期數(shù)為4，會循環(huán)出來4個(gè)表格，其中名額分配一欄人數(shù)是可以編輯的，但是當(dāng)我修改第一個(gè)表格的數(shù)據(jù)之后，后面的表格數(shù)據(jù)也跟著修改了。

源碼如下

<template>
  <div class="content">
    <div style="margin: 20px;">
      <span>期數(shù)：</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';
// 期數(shù)
const periods = ref(0);
// 表格數(shù)據(jù)列表
const listDatas = ref([]);
// 初始表格數(shù)據(jù)
const initialData = [
  { sectionDeptName: '初中', userNumber: 100 },
  { sectionDeptName: '高中', userNumber: 50 },
  { sectionDeptName: '小學(xué)', userNumber: 60 },
  { sectionDeptName: '大學(xué)', userNumber: 30 }
];
// 期數(shù)變化處理
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('確定將選擇數(shù)據(jù)刪除?', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    listDatas.value.splice(index, 1);
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '操作成功!'
    });
  });
};
</script>
<style scoped>
.content {
  padding: 20px;
}
</style>

問題原因

你遇到的問題是因?yàn)樵谏啥鄠€(gè)表格時(shí)，所有表格的數(shù)據(jù)都引用了同一個(gè)對象或數(shù)組，導(dǎo)致數(shù)據(jù)聯(lián)動現(xiàn)象。要解決這個(gè)問題，你需要確保每個(gè)表格的數(shù)據(jù)是獨(dú)立的副本，而不是引用同一個(gè)對象或數(shù)組。

解決方案

在生成表格數(shù)據(jù)時(shí)，使用深拷貝來確保每個(gè)表格的數(shù)據(jù)是獨(dú)立的副本。

代碼如下

<template>
  <div class="content">
    <div style="margin: 20px;">
      <span>期數(shù)：</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';
// 期數(shù)
const periods = ref(0);
// 表格數(shù)據(jù)列表
const listDatas = ref([]);
// 初始表格數(shù)據(jù)
const initialData = [
  { sectionDeptName: '初中', userNumber: 100 },
  { sectionDeptName: '高中', userNumber: 50 },
  { sectionDeptName: '小學(xué)', userNumber: 60 },
  { sectionDeptName: '大學(xué)', userNumber: 30 }
];
// 期數(shù)變化處理
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('確定將選擇數(shù)據(jù)刪除?', {
    confirmButtonText: '確定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    listDatas.value.splice(index, 1);
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '操作成功!'
    });
  });
};
</script>
<style scoped>
.content {
  padding: 20px;
}
</style>

到此這篇關(guān)于vue中循環(huán)表格數(shù)據(jù)，出現(xiàn)數(shù)據(jù)聯(lián)動現(xiàn)象。的文章就介紹到這了,更多相關(guān)vue表格數(shù)據(jù)聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: