- 方法1
给Table一个实时更新的key:这样操作之后,会认为不是同一张表格,会重新渲染一遍。
this.renderTable = new Date().valueOf()
this.skus[index].disabled = false
<el-table :data="skus" max-height="1000" v-show="!showSku" :key="renderTable">
<el-table-column
v-for="(attr,index) in form.h2ProductSkuAttributeList"
:key="attr.name"
align="center"
width="100"
:label="attr.name"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<span>{{optionMap[(scope.row.skuAttribute[attr.id])]}}</span>
</template>
</el-table-column>
<el-table-column label="商品名称" align="center" prop="name" width="160">
<template slot-scope="scope">
<el-input
placeholder="商品名称"
:disabled="scope.row.disabled"
v-model="scope.row.name"
></el-input>
</template>
</el-table-column>
<el-table-column label="图片" align="center" prop="image" width="150">
<div class="sku-attr" slot-scope="scope">
<oss-image-preview
v-if="disabled"
:src="scope.row.image"
:width="80"
:height="80"
/>
<image-upload
v-else
:is-show-tip="false"
:limit="1"
:disabled="scope.row.disabled"
v-model="scope.row.image"
:model="$yun.FileEnum.PRODUCT_GOODS_IMG"
/>
<el-button
type="text"
v-if="!scope.row.disabled"
@click="uploadImage(scope.row)"
>上传图片</el-button>
</div>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="160"
>
<template slot-scope="scope">
<el-button
type="text"
v-if="scope.row.disabled"
@click="updateDisable(scope.$index)"
>修改</el-button>
<el-button
type="text"
@click="updataSkuCurrent(scope.row,scope.$index)"
v-else
>确定</el-button>
</template>
</el-table-column>
</el-table>
- 方法二
使用 this.$set(this.data,index,row),比较消耗性能
this.$set(this.skus[index], 'disabled', false)