elementui<el-tabs>多个el-tab-pane无法正确获取动态数据
问题遇到的现象和发生背景
我的想法：在新增数据的时候，使用者可以勾选选项，“客户信息”，“产品信息”，“供应商信息”的数据均来自于我创建的数据库，
即：我想动态获取数据。
遇到的现象和发生背景，请写出第一个错误信息
问题：理论上来说，这三个的数据显示应该是不同的，但我的实际体验是：在调试时，“客户信息”，“产品信息”，“供应商信息”，这三个我只留任意一个，显示都没问题，但当显示多个时，内容就会出现像上图一样的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);
}
});
},
问题已解决。
- 这篇文章：解决 elementui@2.13.0 > el-tab-pane 导致浏览器卡死的问题。 也许有你想要的答案，你可以看看