elementui中upload无法删除问题

<el-upload action="#" list-type="picture-card" :auto-upload="false" ref="upload">

      <i slot="default" class="el-icon-plus"></i>

           <div slot="file" slot-scope="{file}">

               <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" >

                    <span class="el-upload-list__item-actions">

                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >

                           <i class="el-icon-zoom-in"></i>

                      </span>

                     <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)" >

                        <i class="el-icon-download"></i>

                    </span>

                   <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" >

                       <i class="el-icon-delete"></i>

                  </span>

              </span>

          </div>

               </el-upload>

                      <el-dialog :visible.sync="dialogVisible">

                                <img width="100%" :src="dialogImageUrl" alt="">

                    </el-dialog>

<script>

     export default {

             data() {

                return {

                   dialogImageUrl: '', dialogVisible: false, disabled: false }; },

                   methods: { handleRemove(file) { console.log(file); },

                   handlePictureCardPreview(file) {

                        this.dialogImageUrl = file.url; this.dialogVisible = true;

                   },

                  handleDownload(file) { console.log(file); } } }

</script>

 

这是2.11.0版本中给出的代码，为什么要把预览下载删除的dom给抽出来呢？原因是当时源码封装的时候只有预览和删除功能，如果要添加下载功能，就只能写dom了。问题就来了，加上之后不支持删除功能了。。。那么就用获取原生dom的方法写呗。。

给upload加一个ref="upload"

const parent = (this.$refs['upload'] as any).$children[0].$el;

parent.removeChildren(parent.childNodes[index]);