绊夏微凉

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

posted on 2021-07-20 17:09  绊夏微凉  阅读(233)  评论(0)    收藏  举报