因为 element ui中上传的样式不符合需求，自己写了一个列表，但是怎么把自己写的列表里面的数据和组件连接到一起呢？

Question

element 中

需求

因为 element ui中上传的样式不符合需求，于是自己写了一个列表，但是现在不知道怎么把两个数据关联到一起，element ui 上传的删除什么都没有写就直接删除了

我是在选择文件的时候把文件的名字push到一个新的数组里面

    <el-upload
                      class="upload-demo"
                      ref="upload" 
                      drag
                     :on-success="handleAvatarSuccess"
                     :auto-upload="false"
                     :on-change="handleChange"
                     :before-remove="beforeRemove"
                       :on-remove="handleRemove"
                      action="/api/dailyInfo/createDailyInfo"
                      multiple
                      >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
                
         handleChange(res, file){ //未上传，但是选择了文件触发
                  let status=null;
                 status=this.wenjian(res.name);
                this.FileList.push({
                    name:res.name.substring(0, res.name.lastIndexOf(".")),
                    status:status,
                })
                     console.log(this.FileList);
          },
                

选择了文件把文件名字和状态push到了FileList这个新数组里面

        <nav> 
            <ul class="ul_two">
                <li v-for="(item,key) in FileList">
                    <img :src="Image(item)" alt="" />
                    <span>{{item.name}}</span>
                    <i class="el-icon-circle-close-outline" @click="del(item,key)"></i>
                </li>
            </ul>
        </nav>

我怎么把这两个删除关联到一起呢？
因为用户看到的是

但是点击上传的时候，给后台传递的是

所以这两个的删除需要关联在一起，用户看到的删除了，那下面的也要删除了

Answer 1

element里面是有个filelist数组的，里面是包含你上传的文件列表，你想要删除同步，只需要在你自己push的数组里删除之后，将filelist数组里面的对应数据删除就ok