问题遇到的现象和发生背景
我的想法：在新增数据的时候，使用者可以勾选选项，“客户信息”，“产品信息”，“供应商信息”的数据均来自于我创建的数据库，
即：我想动态获取数据。
遇到的现象和发生背景，请写出第一个错误信息
问题：理论上来说，这三个的数据显示应该是不同的，但我的实际体验是：在调试时，“客户信息”，“产品信息”，“供应商信息”，这三个我只留任意一个，显示都没问题，但当显示多个时，内容就会出现像上图一样的bug，看起来像是内容串了。
用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%
这个是负责“显示”的html代码
<div class="add-form">
<el-dialog title="新增检查组" :visible.sync="dialogFormVisible">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" type="card" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="选择">
<el-input v-model="formData.sex"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="助记码">
<el-input v-model="formData.helpCode"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="客户信息" type="card" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>客户名称</th>
<th>联系电话</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="ct in tableData">
<td>
<input :id="ct.id" v-model="customerNames" type="checkbox" :value="ct.id">
</td>
<td><label :for="ct.id">{{ct.name}}</label></td>
<td><label :for="ct.id">{{ct.telenum}}</label></td>
<td><label :for="ct.id">{{ct.address}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
<el-tab-pane label="产品信息" type="card" name="third">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>产品编码</th>
<th>产品名称</th>
<th>产品规格</th>
<th>单位</th>
<th>产品描述</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr v-for="pt in tableData">
<td>
<input :id="pt.id" v-model="productNames" type="checkbox" :value="pt.id">
</td>
<td><label :for="pt.id">{{pt.code}}</label></td>
<td><label :for="pt.id">{{pt.name}}</label></td>
<td><label :for="pt.id">{{pt.specifications}}</label></td>
<td><label :for="pt.id">{{pt.unit}}</label></td>
<td><label :for="pt.id">{{pt.description}}</label></td>
<td><label :for="pt.id">{{pt.num}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
<el-tab-pane label="供应商信息" type="card" name="fourth">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>供应商名称</th>
<th>联系电话</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="st in tableData">
<td>
<input :id="st.id" v-model="supplierNames" type="checkbox" :value="st.id">
</td>
<td><label :for="st.id">{{st.name}}</label></td>
<td><label :for="st.id">{{st.telenum}}</label></td>
<td><label :for="st.id">{{st.address}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
对应的ajax请求，我的想法是，一次点击触发多次请求
// 弹出添加窗口
handleCreate() {
this.resetForm();
this.dialogFormVisible = true;
//发送ajax请求，查询所有的检查项信息，转为json，赋值给tableData
this.activeName = 'first';//默认选中first对应的tab
this.customerNames = [];//重置复选框
this.productNames = [];//重置复选框
this.supplierNames = [];//重置复选框
axios.get("/customers/findAll.do").then((res) => {
if (res.data.flag) {
//查询检查项数据成功
this.tableData = res.data.data;
} else {
//查询检查项数据失败
this.$message.error(res.data.message);
}
});
axios.get("/products/findAll.do").then((res) => {
if (res.data.flag) {
//查询检查项数据成功
this.tableData = res.data.data;
} else {
//查询检查项数据失败
this.$message.error(res.data.message);
}
});
axios.get("/suppliers/findAll.do").then((res) => {
if (res.data.flag) {
//查询检查项数据成功
this.tableData = res.data.data;
} else {
//查询检查项数据失败
this.$message.error(res.data.message);
}
});
},
