el-tabs嵌套el-upload使用

需求：1 .第一个标签展示固定字样，且不能删除，最少上传三张图片。

           2. 其余标签双击可编辑字样，10字以内，可删除，均可上传图片。

           3. +号按钮可点击添加标签，标签数量控制在10个以内。

          4. 当标签下无内容，上传时该标签自动删除。

效果展示：

 

      <el-form-item label-width="185px" label="店铺展示:"  prop="shopImgList"  style="margin-left: 20px;margin-top: 30px;">
        <div style="display: flex">
        <el-tabs
          v-model="name"
          type="card"
          @tab-remove="removeTab"
          :before-leave="beforeLeave"
          style="width: 95%;"
          @keydown.native.capture.stop.self>
          <el-tab-pane
              :label="item.name"
              v-for="(item,index) in ruleForm.shopImgList" :key="index"
              :name="item.seq.toString()"
              :closable="index!=0 && formStatus!=''"
            >
              <template slot="label">
              <span
                @dblclick="tabsContent(item,index)"
              >{{item.name}}
             </span>
              </template>
              <div @click="getImageTypeIndex(index)">
                <el-upload
                  :class="{audit_pict:hideUpload}"
                  ref="upload"
                  action=""
                  :http-request="Picture"
                  show-file-list
                  list-type="picture-card"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  v-if="refreshUploadOSSComp"
                  accept=".jpg,.png,.jpeg"
                  :file-list="item.fileLists"
                  :on-exceed="handleExceed"
                  :on-preview="handlePictureCardPreview">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </el-tab-pane>
          <el-tab-pane  key="add" name="add"   v-if="ruleForm.shopImgList.length!=10 && formStatus!=''">
            <span slot="label" style="padding: 8px;font-size:20px">+</span>
          </el-tab-pane >
        </el-tabs>
       </div>
      </el-form-item>

结构：

          shopImgList:[{//门店展示图片集合
            imgUrlList:[],
            fileLists:[],
            seq:1,
            name:"门店展示",
          }],

限制规则：

      let checkDescImgs = (rule, value, callback) => {
        let _this = this;
        let _validatenull = validatenull;
        if(_validatenull(_this.ruleForm.shopImgList) ){
          return callback(new Error('请上传门店宣传信息'));
        }
        if(_this.ruleForm.shopImgList[0].imgUrlList.length < 3){
          return callback(new Error('门店展示必须上传3张'));
        }
        return callback();
      };



shopImgList:[{required: true,  validator: checkDescImgs, trigger: 'blur'}],

生命周期 --- created中回显处理：

        if (!isNull(_this.ruleForm.shopImgList)){
          _this.ruleForm.shopImgList.forEach(data => {
               data['fileLists']=[]
               data.imgUrlList.forEach((item,index)=>{
                 item['imgSrc']= item.imgUrl;
                 item['seq']=index+1
                 const map5 = {};
                 map5['name'] = '';
                 map5['url'] = item.imgUrl;
                 map5['seq'] = index+1
                 data.fileLists.push(map5);
               })
          })
        }else {
          _this.ruleForm.shopImgList=[{//门店展示图片集合
            imgUrlList:[],
            fileLists:[],
            seq:1,
            name:"门店展示",
          }]
        }

知识扩展

阻止键盘默认事件：@keydown.native.capture.stop.self 

方法：

1. 删除标签

        //删除门店展示名称
     removeTab(targetName) {
       let _this=this
       let isNull=validatenull
       if(_this.name==targetName){
         _this.name='1'
       }else if(Number(_this.name)>Number(targetName)){
         _this.name= (Number(_this.name)-1).toString()
       }
       _this.ruleForm.shopImgList.forEach((item, index) => {
         if (item.seq === Number(targetName)) {
           _this.ruleForm.shopImgList.splice(index, 1)
         }
       });
       _this.refreshUploadOSSComp=false
       if (!isNull(_this.ruleForm.shopImgList)){
         _this.ruleForm.shopImgList.forEach((data,idx) => {
           data.fileLists=[]
           data.imgUrlList.forEach((item,i)=>{
             item['seq']=i+1
             const map5 = {};
             map5['name'] = '';
             map5['url'] = item.imgSrc;
             map5['seq'] =i+1;
             data.fileLists.push(map5);
           })
         })
         _this.ruleForm.shopImgList.forEach((data,idx) => {
           data.seq=idx+1
         })
         _this.$nextTick(() => {
           _this.refreshUploadOSSComp = true;
         });
       }
      },

2. 切换事件 与 添加标签

      beforeLeave(currentName, oldName) {
        //重点，如果name是add，则什么都不触发
        if(currentName == "add") {
          this.addTitle()
          return false
        }
        this.arrIndex=Number(currentName)-1
      },
       // 添加门店展示名称
      addTitle() {
        if(this.ruleForm.shopImgList.length < 10){
          this.tagName='新增名称'
          this.formStatus1='create'
          this.dialogFormsVisible=true
          this.form.name=undefined
        }
      },

3. 双击打开标签，编辑内容

        // 编辑名称
      tabsContent(val,index){
        if(index!=0){
          this.tagName='编辑名称'
          this.formStatus1='update'
          this.arrIndex=index
          this.form.name=val.name
          this.dialogFormsVisible=true
        }
      },

4. 点击上传图片时，记录坐标

      getImageTypeIndex(index){
          this.arrIndex=index
       },

上传图片内容过多，忽略

5. 双击编辑标签 --- 弹出弹窗

    <!--    店铺展示添加编辑名称-->
    <el-dialog :title="tagName" :visible.sync="dialogFormsVisible" :modal-append-to-body="false" :close-on-click-modal="false"  append-to-body width="25%">
        <el-form :model="form" :rules="rulesForm" ref="form"  class="demo-ruleForm">
          <el-form-item label="名称" prop="name" label-width="70px">
            <el-input v-model.trim="form.name" maxlength="10" placeholder="限制10个字"  ></el-input>
          </el-form-item>
          <el-form-item style="display: flex;flex-direction: row;justify-content: center;align-items: center">
            <el-button type="primary" @click="submitFormButton('form')">确定</el-button>
            <el-button @click="getClose()">取消</el-button>
          </el-form-item>
       </el-form>
    </el-dialog>

tagName:undefined, //名字
dialogFormsVisible:false,//默认关闭弹窗
form:{
      name:undefined,
     }, //表单
 弹窗 校验规则绑定
 rulesForm:{
     name:[{ required: true,message:'请输入名称', trigger: 'blur'},{
        required: true,
        trigger: "blur",
        validator: (rule, value, callback) => {
        if (!value.split("").some(item => item !== " "))
           return callback(new Error("名称不能为纯空格"));
           return callback();
         }
      }],
   },

6. 弹窗 ---  确定按钮

      // 店铺展示添加编辑名称提交
      submitFormButton(form){
        let _this=this
        _this.$refs[form].validate((valid) => {
          if (valid){
            if(_this.formStatus1=='create'){
              _this.ruleForm.shopImgList.push({//门店展示图片集合
                imgUrlList:[],
                fileLists:[],
                seq:_this.ruleForm.shopImgList.length+1,
                name:_this.form.name,
              })
            }else{
              _this.ruleForm.shopImgList[_this.arrIndex].name=_this.form.name
            }
            _this.dialogFormsVisible=false
          }else{
            _this.showToal('提示', '请先维护必填信息', 'warning');
            return false;
          }
        })
      },

7. 弹窗 --- 取消按钮

      getClose(){
         this.dialogFormsVisible=false
      },