解决添加多个类别后点击单元格，表格出现偏移问题

src/views/recipe/index.vue

@@ -36,7 +36,8 @@
               </el-option>
             </el-select>
             <el-button v-if="query.wId" @click="addSelectClass" type="primary" size="mini" >添加食谱类别</el-button>
-          <div v-for="item in allClass" style="width: 100%; margin-top: 20px;">
+            <div v-if="allClass.length">
+              <div v-for="item in allClass" style="width: 100%; margin-top: 20px;" :key="item.id">
                 <h4 style="line-height: 50px;">{{ item.tName }}</h4>
                 <el-table
                   @cell-click="onClickCell"
@@ -87,6 +88,8 @@
                   </el-table-column>
                 </el-table>
               </div>
+            </div>
+
 
 
         </el-card>
@@ -311,7 +314,6 @@ export default {
         }
         this.defaultTable.push(obj)
       }
-      this.tableData = this.defaultTable
   },
   watch: {
     'query.wId'(newVal, oldVal) {
@@ -492,7 +494,8 @@ export default {
       console.log(this.form)
       let obj = {
         tName: this.form.tName,
-        wId: this.query.wId
+        wId: this.query.wId,
+        contents: JSON.stringify(this.defaultTable)
       }
       postMeal(obj).then(res =>{
         this.isRecipeModel = false
@@ -522,6 +525,7 @@ export default {
     // 班级列表
     recipeList(){
       getRecipe(this.query.wId).then(res =>{
+        this.allClass = []
         this.allClass = res.data.map( item =>{
           if(item.contents){
             let arr = JSON.parse(item.contents)