ElementPlus?Tag標(biāo)簽用法小結(jié)
效果圖

頁面展現(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ù)庫存儲(chǔ)字符串,頁面是數(shù)組。
dynamicTags.value = form.data.tags.split(",") //將字符串拆成數(shù)組到此這篇關(guān)于ElementPlus Tag標(biāo)簽用法小結(jié)的文章就介紹到這了,更多相關(guān)ElementPlus Tag標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(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)對應(yīng)位置
這篇文章主要介紹了微信小程序開發(fā)之好友列表字母列表跳轉(zhuǎn)對應(yīng)位置的相關(guān)資料,希望通過本文能幫助到大家讓大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09
Add 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-11
JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下2022-01-01

