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

This commit is contained in:
xiayuping666
2024-02-05 10:26:32 +08:00
parent 4fb4a10815
commit 59374abd86
+57 -53
View File
@@ -36,57 +36,60 @@
</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;">
<h4 style="line-height: 50px;">{{ item.tName }}</h4>
<el-table
@cell-click="onClickCell"
:data="item.tableData"
:row-style="{ height: '50px' }"
:key="item.id"
border
>
<el-table-column label="周次">
<template slot-scope="scope">
{{ weekEnum[scope.row.name ]}}
</template>
</el-table-column>
<el-table-column
prop="brekker"
label="早餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekker" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="brekkerDessert"
label="早点">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekkerDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunch"
label="午餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunch" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunchDessert"
label="午点">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunchDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="supper"
label="晚餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.supper" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
</el-table>
</div>
<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"
:data="item.tableData"
:row-style="{ height: '50px' }"
:key="item.id"
border
>
<el-table-column label="周次">
<template slot-scope="scope">
{{ weekEnum[scope.row.name ]}}
</template>
</el-table-column>
<el-table-column
prop="brekker"
label="早餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekker" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="brekkerDessert"
label="早点">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekkerDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunch"
label="午餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunch" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunchDessert"
label="午点">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunchDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="supper"
label="晚餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.supper" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</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)