ElementPlus?Tag標簽用法小結(jié)
更新時間:2023年09月15日 11:57:38 作者:長安紫薯
這篇文章主要介紹了ElementPlus?Tag標簽用法,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
效果圖
頁面展現(xiàn)
<el-form-item label="課程標簽"> <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"> + 新標簽 </el-button> </el-form-item>
初始化
//tag標簽 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ù)組轉(zhuǎn)化成字符串,多個值以逗號隔開 form.data.tags = dynamicTags.value.join(",")
回顯時
//回顯課程標簽:數(shù)據(jù)庫存儲字符串,頁面是數(shù)組。 dynamicTags.value = form.data.tags.split(",") //將字符串拆成數(shù)組
到此這篇關于ElementPlus Tag標簽用法小結(jié)的文章就介紹到這了,更多相關ElementPlus Tag標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js函數(shù)參數(shù)設置默認值的一種變通實現(xiàn)方法
js函數(shù)中有個儲存參數(shù)的數(shù)組arguments,因此js版支持參數(shù)默認值的函數(shù)可以通過另外一種變通的方法實現(xiàn)2014-05-05微信小程序開發(fā)之好友列表字母列表跳轉(zhuǎn)對應位置
這篇文章主要介紹了微信小程序開發(fā)之好友列表字母列表跳轉(zhuǎn)對應位置的相關資料,希望通過本文能幫助到大家讓大家實現(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ā)微信小程序之使用阿里自定義字體圖標的方法
這篇文章主要介紹了在webstorm開發(fā)微信小程序之使用阿里自定義字體圖標 的相關資料,需要的朋友可以參考下2018-11-11