elmentui table template 数据变化没有实时显示
参考博客:https://blog.csdn.net/weixin_43299180/article/details/116235166
样式:
<el-table
:data="list"
ref="prizeTable" :row-class-name="rowClassName">
<el-table-column
prop="orderNo"
label="奖项"
width="80">
</el-table-column>
<el-table-column
prop="prizeBgImg"
label="图片">
<template slot-scope="scope">
<img :src="scope.row.prizeBgImg" min-width="70" height="70"/>
</template>
</el-table-column>
<el-table-column
label="盲盒砸开图片"
width="150"
v-if="this.dataForm.categoryId === 13">
<template slot-scope="scope">
<el-upload
:class="{hide:scope.row.hideUpload,upload_red:true}"
:action="actionUrl"
list-type="picture-card"
:limit="1"
:before-upload="beforeUpload"
:on-success="(res) => handleBoxHitSuccess(res, scope.row)"
:on-exceed="handleExceed"
:on-remove="(file, fileList) => handleBoxHitRemove(file, fileList, scope.$index, scope.row)"
:on-change="(file, fileList) => handleBoxHitChange(file, fileList, scope.$index, scope.row)"
:on-preview="(file) => handleBoxHitPreview(file, scope.$index, scope.row)"
:file-list="scope.row.fileList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="scope.row.dialogVisible" @close='closeBoxDialog(scope.$index, scope.row)'>
<img width="100%" :src="scope.row.dialogImageUrl" alt="">
</el-dialog>
</template>
</el-table-column>
</el-table>
方法
handleBoxHitPreview (file, index, item) {
item.dialogImageUrl = file.url
item.dialogVisible = true
this.$set(this.list, index, item)
},
handleBoxHitSuccess (response, item) {
item.mysteryBoxHitImg = response.original
},
handleBoxHitChange (file, fileList, index, item) {
item.hideUpload = fileList.length >= 1
this.$set(this.list, index, item)
},
$set 可以让动态的给 data 添加响应式的属性,让 editable 变为响应式的,就可以直接触发页面更新。
table获取index:scope.$index
浙公网安备 33010602011771号