vue实现网格弹窗（每个网格都是一个下拉）
在操作中点击图像标记，触发点击事件
html
<el-table-column align="center" label="操作" width="260">
<el-button
v-if="hasPerm('goods-menu')"
slot="reference"
size="mini"
type="primary"
@click="handleShowLabel(scope.row)"
>图像标记</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="imgLabelVisible" top="3vh" width="90vw" title="选择饮料">
<div class="dialog-content">
<div class="left-pane">
<img :src="currentImgUrl" style="width:400px;margin:auto" alt="左侧图片" />
</div>
<div class="right-pane">
<el-table :data="gridData" style="width: 100%" border >
<el-table-column prop="row" label="行号/列号" width = 60px>
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="col" label="1">
<template slot-scope="scope">
<el-select v-model="scope.row.row1.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="col" label="2">
<template slot-scope="scope">
<el-select v-model="scope.row.row2.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="col" label="3">
<template slot-scope="scope">
<el-select v-model="scope.row.row3.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column><el-table-column prop="col" label="4">
<template slot-scope="scope">
<el-select v-model="scope.row.row4.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column><el-table-column prop="col" label="5">
<template slot-scope="scope">
<el-select v-model="scope.row.row5.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column><el-table-column prop="col" label="6">
<template slot-scope="scope">
<el-select v-model="scope.row.row6.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column><el-table-column prop="col" label="7">
<template slot-scope="scope">
<el-select v-model="scope.row.row7.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column><el-table-column prop="col" label="8">
<template slot-scope="scope">
<el-select v-model="scope.row.row8.goodsId" filterable clearable @change="selectChange" placeholder="请选择饮料">
<el-option v-for="drink in drinkOptions"
:key="drink.value"
:label="drink.label"
:value="drink.value"></el-option>
</el-select>
</template>
</el-table-column>
<!-- <el-table-column label="饮料选择">-->
<!-- <template slot-scope="scope">-->
<!-- <el-select v-model="scope.row.selectedDrink" placeholder="请选择饮料">-->
<!-- <el-option v-for="drink in drinkOptions"-->
<!-- :key="drink.value"-->
<!-- :label="drink.label"-->
<!-- :value="drink.value"></el-option>-->
<!-- </el-select>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="imgLabelVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSelection">确 定</el-button>
</span>
</el-dialog>
export default {
data() {
return {
gridData: [{
row1:{
row:1,
col:1,
goodsId:null,
},
row2:{
row:1,
col:2,
goodsId:null,
},
row3:{
row:1,
col:3,
goodsId:null,
},
row4:{
row:1,
col:4,
goodsId:null,
},
row5:{
row:1,
col:5,
goodsId:null,
},
row6:{
row:1,
col:6,
goodsId:null,
},
row7:{
row:1,
col:7,
goodsId:null,
},
row8:{
row:1,
col:8,
goodsId:null,
},
},{
row1:{
row:2,
col:1,
goodsId:null,
},
row2:{
row:2,
col:2,
goodsId:null,
},
row3:{
row:2,
col:3,
goodsId:null,
},
row4:{
row:2,
col:4,
goodsId:null,
},
row5:{
row:2,
col:5,
goodsId:null,
},
row6:{
row:2,
col:6,
goodsId:null,
},
row7:{
row:2,
col:7,
goodsId:null,
},
row8:{
row:2,
col:8,
goodsId:null,
},
},{
row1:{
row:3,
col:1,
goodsId:null,
},
row2:{
row:3,
col:2,
goodsId:null,
},
row3:{
row:3,
col:3,
goodsId:null,
},
row4:{
row:3,
col:4,
goodsId:null,
},
row5:{
row:3,
col:5,
goodsId:null,
},
row6:{
row:3,
col:6,
goodsId:null,
},
row7:{
row:3,
col:7,
goodsId:null,
},
row8:{
row:3,
col:8,
goodsId:null,
},
},{
row1:{
row:4,
col:1,
goodsId:null,
},
row2:{
row:4,
col:2,
goodsId:null,
},
row3:{
row:4,
col:3,
goodsId:null,
},
row4:{
row:4,
col:4,
goodsId:null,
},
row5:{
row:4,
col:5,
goodsId:null,
},
row6:{
row:4,
col:6,
goodsId:null,
},
row7:{
row:4,
col:7,
goodsId:null,
},
row8:{
row:4,
col:8,
goodsId:null,
},
},{
row1:{
row:5,
col:1,
goodsId:null,
},
row2:{
row:5,
col:2,
goodsId:null,
},
row3:{
row:5,
col:3,
goodsId:null,
},
row4:{
row:5,
col:4,
goodsId:null,
},
row5:{
row:5,
col:5,
goodsId:null,
},
row6:{
row:5,
col:6,
goodsId:null,
},
row7:{
row:5,
col:7,
goodsId:null,
},
row8:{
row:5,
col:8,
goodsId:null,
},
},{
row1:{
row:6,
col:1,
goodsId:null,
},
row2:{
row:6,
col:2,
goodsId:null,
},
row3:{
row:6,
col:3,
goodsId:null,
},
row4:{
row:6,
col:4,
goodsId:null,
},
row5:{
row:6,
col:5,
goodsId:null,
},
row6:{
row:6,
col:6,
goodsId:null,
},
row7:{
row:6,
col:7,
goodsId:null,
},
row8:{
row:6,
col:8,
goodsId:null,
},
}
],
}
}
}
methods: {
handleShowLabel(row) {
this.imgLabelVisible = true;
this.currentImgId = row.imageRecordId
this.currentImgUrl = row.imageUrl;
// TODO 改成根据后台数据回填
for(var i =0; i < this.gridData.length; i++){
this.gridData[i].row1.goodsId = null;
this.gridData[i].row2.goodsId = null
this.gridData[i].row3.goodsId = null
this.gridData[i].row4.goodsId = null
this.gridData[i].row5.goodsId = null
this.gridData[i].row6.goodsId = null
this.gridData[i].row7.goodsId = null
this.gridData[i].row8.goodsId = null
}
},
saveSelection() {
// Handle saving the user's selections
const cabinetGoodsList = []
console.log('User selections:', this.gridData);
for (let i = 0; i < this.gridData.length; i++) {
for (let j = 1; j <= 8; j++) {
const g = this.gridData[i][`row${j}`]
cabinetGoodsList.push({levelNo:g.row, channelNo:g.col,goodsId:g.goodsId})
// console.log(this.gridData[i][`row${j}`].goodsId)
}
}
this.goodsData.imageRecordId = this.currentImgId;
this.goodsData.cabinetGoodsList = cabinetGoodsList;
this.cabinetGoods(this.goodsData);
console.log(this.goodsData)
},
cabinetGoods(goodsData) {
saveCabinetGoodsAPI(goodsData).then(res => {
this.$notify({
message: "操作成功",
type: "success",
duration: 2000,
offset: 80,
});
this.imgVisible = false
})
},
}请求后台
export function saveCabinetGoodsAPI(data) {
return fetch({
url: /api/cjd/manual_data/cabinet_goods,
method: 'post',
data
});
}