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-tabsv-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-listlist-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+1const map5 = {};map5['name'] = '';map5['url'] = item.imgUrl;map5['seq'] = index+1data.fileLists.push(map5);})})}else {_this.ruleForm.shopImgList=[{//门店展示图片集合imgUrlList:[],fileLists:[],seq:1,name:"门店展示",}]}

知识扩展

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

方法：

1. 删除标签

        //删除门店展示名称removeTab(targetName) {let _this=thislet isNull=validatenullif(_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=falseif (!isNull(_this.ruleForm.shopImgList)){_this.ruleForm.shopImgList.forEach((data,idx) => {data.fileLists=[]data.imgUrlList.forEach((item,i)=>{item['seq']=i+1const 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=truethis.form.name=undefined}},

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

        // 编辑名称tabsContent(val,index){if(index!=0){this.tagName='编辑名称'this.formStatus1='update'this.arrIndex=indexthis.form.name=val.namethis.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},