极客观点
项目管理
HarmonyOS
活卡进度了 问题1：table 里面循环的input 绑定了v-module 以后不能及时的进行双向绑定，但是最后在点击的时候，能够看到最后的数据是绑定进去的。
问题2 。 通过element ui 上传控件，upSuccess方法在上传成功后，改变了数据中pic相应的位置，为什么没有及时的在tabel 中显示出来? 有偿的！！！！！
<template>
<div class="commAddWarp">
<div class="commHeader">
<p class="title">
商品添加
</p>
<p class="crumbs">
<a>基础信息</a>>><a>商品参数</a>>><a class="color00b0ec">商品规格</a>>><a>商品详情</a>
</p>
<p class="weightTitle">商品规格</p>
</div>
<div class="addMain">
<div class="commSection">
<div class="guigeCheckBox">
<el-checkbox-group v-model="weight">
<span class="title">重量</span>
<el-checkbox label="10kg"></el-checkbox>
<el-checkbox label="20kg"></el-checkbox>
<el-checkbox label="30kg"></el-checkbox>
<el-checkbox label="50kg"></el-checkbox>
</el-checkbox-group>
</div>
<div class="guigeCheckBox">
<el-checkbox-group v-model="packaging">
<span class="title">包装</span>
<el-checkbox label="实惠盒"></el-checkbox>
<el-checkbox label="礼盒装"></el-checkbox>
<el-checkbox label="高档包装"></el-checkbox>
</el-checkbox-group>
</div>
<div class="guigeCheckBox">
<el-checkbox-group v-model="color">
<span class="title">颜色</span>
<el-checkbox label="红色"></el-checkbox>
<el-checkbox label="白色"></el-checkbox>
<el-checkbox label="蓝色"></el-checkbox>
<el-checkbox label="绿色"></el-checkbox>
</el-checkbox-group>
</div>
<p style="font-size: 15px;margin: 20px 0;">
价格与库存配置</p>
<el-table :data="tableData1" border
style="width: 100%" class="el-table">
<el-table-column width='150' label="重量">
<template scope="scope">
{{scope.row.weight}}
</template>
</el-table-column>
<el-table-column label="包装"
v-if="packaging.length>0">
<template scope="scope">
<div class="content-rowspan">
<div
v-for="(list,index) in scope.row.packaging">
{{list}}
</div>
</div>
</template>
</el-table-column>
<el-table-column label="颜色" v-if="color.length>0">
<template scope="scope">
<div class="content-rowspan">
<div
v-for="(list,index) in scope.row.color"
style="border:1px solid #dfe6ec;border-bottom:0;width: 100%;text-align: center;margin-bottom: 20px">
<p v-for="(item,index) in list"
style="border-bottom: 1px solid #dfe6ec">
{{item}}
</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="价格">
<template scope="scope">
<div class="content-rowspan">
<div
v-for="(sList,sIndex) in scope.row.price"
style="padding: 15px;">
<div v-for="(item,index) in sList"
style="margin-bottom: 5px">
<!--<input type="text" >-->
<el-input v-model="sList[index]"
placeholder="请输入库存"
style="height: 28px"></el-input>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="库存">
<template scope="scope">
<div class="content-rowspan">
<div
v-for="(sList,sIndex) in scope.row.inventory"
style="padding: 15px;">
<div v-for="(item,index) in sList"
style="margin-bottom: 5px">
<el-input v-model="sList[index]"
placeholder="请输入库存"></el-input>
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column width='200' label="操作">
<template scope="scope">
<div v-for="(sList,sIndex) in scope.row.pic" style="padding: 15px">
<div v-for="(item,index) in sList" style="margin-bottom: 5px">
<el-upload
class="upload-demo"
action="http://gonghaoht1.sinmore.vip/api/ossStoreImg"
name="pic"
:data="{model:1}"
:show-file-list="false"
:on-success="upSuccess"
>
<img v-if="sList[index]" :src="sList[index]" class="avatar">
<el-button
@click.native.prevent="upload(sIndex,index,scope)" type="primary"
>上传<i class="el-icon-upload el-icon--right"></i></el-button>
</el-upload>
<!--<span v-model="">{{]}}</span>-->
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="btnWarp">
<a class="blackBtn">上一步</a>
<a class="blackBtn" @click="lookkk">下一步</a>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default{
name: 'commSpecification',
data() {
return {
weight: [],
packaging: [],
color: [],
arrs: [],
price: [],
inventory: [],
pic: [],
nowList :{
}
}
},
computed: {
tableData1(){
let tabArrs = [];
let _this = this;
for (let i = 0; i < this.weight.length; i++) {
let obj = new Object;
obj.weight = this.weight[i];
obj.packaging = [];
obj.color = [];
obj.price = [];
obj.inventory = [];
obj.pic = [];
for (let w = 0; w < this.packaging.length; w++) {
obj.packaging.push(this.packaging[w]);
let colors = [];
let price = [];
let inventory = [];
let pic = [];
for (let q = 0; q < this.color.length; q++) {
colors.push(this.color[q]);
price.push(' ');
inventory.push(' ');
pic.push(' ');
}
obj.color.push(colors);
obj.price.push(price);
obj.inventory.push(inventory);
obj.pic.push(pic)
}
_this.price = obj.price;
_this.inventory = obj.inventory;
_this.pic = obj.pic;
tabArrs.push(obj)
}
return tabArrs;
}
},
methods: {
upload: function (ee,qqq,kkk) {
this.nowList.indeex = ee;
this.nowList.sindeex = qqq;
this.nowList.scope = kkk;
console.log(this.nowList)
},
upSuccess(re){
this.tableData1[this.nowList.scope.$index].pic[this.nowList.indeex][this.nowList.sindeex] = re.data.url;
},
lookkk(){
console.log(this.tableData1)
}
}
}
</script>
<style>
@import "../../../../static/css/commdetail/commAdd/commAdd.css";
</style>
