欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年09月15日 11:57:38   作者:長(zhǎng)安紫薯  
這篇文章主要介紹了ElementPlus?Tag標(biāo)簽用法,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(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)文章

最新評(píng)論