ElementPlus?Tag標(biāo)簽用法小結(jié)
效果圖
頁(yè)面展現(xiàn)
<el-form-item label="課程標(biāo)簽"> <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" closable :disable-transitions="false" @close="handleClose(tag)" style="margin:5px;" > {{ tag }} </el-tag> <el-input style="width:200px;" v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" /> <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput"> + 新標(biāo)簽 </el-button> </el-form-item>
初始化
//tag標(biāo)簽 const inputValue = ref('') const dynamicTags = ref([]) const inputVisible = ref(false) const InputRef = ref() const handleClose = (tag) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1) } const showInput = () => { inputVisible.value = true nextTick(() => { InputRef.value.input.focus() }) } const handleInputConfirm = () => { if (inputValue.value) { dynamicTags.value.push(inputValue.value) } inputVisible.value = false inputValue.value = '' }
保存時(shí)
//把數(shù)組轉(zhuǎn)化成字符串,多個(gè)值以逗號(hào)隔開 form.data.tags = dynamicTags.value.join(",")
回顯時(shí)
//回顯課程標(biāo)簽:數(shù)據(jù)庫(kù)存儲(chǔ)字符串,頁(yè)面是數(shù)組。 dynamicTags.value = form.data.tags.split(",") //將字符串拆成數(shù)組
到此這篇關(guān)于ElementPlus Tag標(biāo)簽用法小結(jié)的文章就介紹到這了,更多相關(guān)ElementPlus Tag標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js函數(shù)參數(shù)設(shè)置默認(rèn)值的一種變通實(shí)現(xiàn)方法
js函數(shù)中有個(gè)儲(chǔ)存參數(shù)的數(shù)組arguments,因此js版支持參數(shù)默認(rèn)值的函數(shù)可以通過另外一種變通的方法實(shí)現(xiàn)2014-05-05微信小程序開發(fā)之好友列表字母列表跳轉(zhuǎn)對(duì)應(yīng)位置
這篇文章主要介紹了微信小程序開發(fā)之好友列表字母列表跳轉(zhuǎn)對(duì)應(yīng)位置的相關(guān)資料,希望通過本文能幫助到大家讓大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06在webstorm開發(fā)微信小程序之使用阿里自定義字體圖標(biāo)的方法
這篇文章主要介紹了在webstorm開發(fā)微信小程序之使用阿里自定義字體圖標(biāo) 的相關(guān)資料,需要的朋友可以參考下2018-11-11JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下2022-01-01