WX20220129-104619.png
動(dòng)態(tài)添加和刪除 #
用數(shù)組生成一組標(biāo)簽，可以動(dòng)態(tài)添加和刪除党窜。
官方提供了新增 刪除的功能鳄厌，但是業(yè)務(wù)還要求修改
<!-- tags -->
<span v-for="item in typeList" :key="item.id">
<a-input
v-if="item.show"
ref="input"
type="text"
size="small"
:style="{ width: '78px','padding-bottom':'3px','margin-right':'7px' }"
v-model="item.name"
@blur="editType(item)"
@keyup.enter="editType(item)"
/>
<!--編輯input-->
<a-tag
v-else closable @close="delType(item.id)"
@click="editInput(item)" >
{{item.name}}
</a-tag>
</span>
<!-- addTag -->
<span>
<a-input
v-if="inputVisible"
ref="addInput"
type="text"
size="small"
:style="{ width: '78px','padding-bottom':'3px'}"
:value="typeForm.name"
@change="handleInputChange"
@blur="handleInputConfirm"
@keyup.enter="handleInputConfirm"
/>
<!--新增input-->
<a-tag v-else style="background: #fff; borderStyle: dashed;" @click="addShow">
<a-icon type="plus" /> 新增類型
</a-tag>
</span>
新增：點(diǎn)新增后隱藏tag顯示input，點(diǎn)擊input外調(diào)用新增的接口
刪除：點(diǎn) x 時(shí)獲取item.id然后調(diào)用刪除接口
// 新增類型
addShow(){
this.inputVisible = true;
this.$nextTick(function() {
this.$refs.addInput.focus();
});
},
//提交新增表單
async handleInputConfirm() {
if(this.typeForm.name === ''){
this.inputVisible = false;
return
}
let res = await estateTypeInsert({
name:this.typeForm.name,
})
if(res.code === 200){
this.$message.success(res.msg);
this.inputVisible = false;
this.typeForm.name = ''
this.getType()
}else{
this.$message.error(res.msg);
}
},
// 刪除
delType(id){
this.$confirm({
title: "是否刪除",
onOk:async()=>{
let res = await estateTypeDel({manageEstateTypeIds:[id]})
if(res.code=== 200){
this.$message.success(res.msg);
this.getType()
}else{
this.$message.error(res.msg);
this.getType()
}
},
onCancel:()=>{
this.getType() //因?yàn)槭顷P(guān)閉標(biāo)簽后的回調(diào)糊探，如果不重新獲取一下數(shù)據(jù)就會(huì)標(biāo)簽就會(huì)消失
}
})
},
編輯：
稍微有點(diǎn)坑，因?yàn)槭莢-for的span河闰，span中包含input和tag科平。不好判斷顯示的是哪一個(gè)span的input，所以給循環(huán)span數(shù)組都加了show:false的屬性姜性。再根據(jù)show判斷顯示tag還是input瞪慧。
編輯點(diǎn)擊后先改變item.show的值，頁面中的tag變成input部念，但是如果不加ref.input.focus弃酌，光標(biāo)就不會(huì)默認(rèn)聚焦在輸入框里。
所以用戶如果不進(jìn)行編輯直接點(diǎn)input外就會(huì)觸發(fā)不了blur儡炼。一定要先把鼠標(biāo)點(diǎn)進(jìn)input中聚焦妓湘，然后再點(diǎn)input外才會(huì)觸發(fā)blur，所以focus還是要想辦法加進(jìn)去乌询。
但是又因?yàn)槭莢-for的多個(gè)input榜贴，所以要調(diào)用refs.input[index].focus。但是后來轉(zhuǎn)念一想妹田，因?yàn)槭荲-IF所以始終都是只展示一個(gè)input唬党，所以循環(huán)的refs.input雖然是數(shù)組但是長度為1，所以下標(biāo)為0而不是index
// 打開編輯框 聚焦input
editInput(obj,i) {
obj.show = true; // v-if show = true時(shí)候渲染input
this.$nextTick(()=>{ //如果不加nextTick鬼佣。這個(gè)refs.input打印為undefined驶拱，估計(jì)是頁面dom還沒渲染完成
console.log(this.$refs.input[0]);//因?yàn)槭荲-IF所以始終都是只展示一個(gè)input，所以循環(huán)的refs.input雖然是數(shù)組但是長度為1晶衷，所以下標(biāo)為0而不是傳進(jìn)來index
console.log(this.$refs.input[0].focus());//打印了半天$refs.input[0].focus()都是undefined蓝纲，點(diǎn)進(jìn)去看也是一個(gè)空數(shù)組阴孟。。但是實(shí)際是一個(gè)function
this.$refs.input[0].focus() //直接調(diào)用方法就可以聚焦了
})
},
// 離開編輯框的回調(diào)
async editType(item){
let res = await estateTypeUpdate({
id: item.id,
name: item.name
})
if(res.code === 200){
this.$message.success(res.msg)
item.show = false
}else{
this.$message.error(res.msg)
}
},
WechatIMG96.png
