ElementPlus Tag标签用法小结
作者：长安紫薯
这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
效果图
页面展现
<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 = ''
}保存时
//把数组转化成字符串，多个值以逗号隔开
form.data.tags = dynamicTags.value.join(",")回显时
//回显课程标签：数据库存储字符串，页面是数组。
dynamicTags.value = form.data.tags.split(",") //将字符串拆成数组到此这篇关于ElementPlus Tag标签用法小结的文章就介绍到这了,更多相关ElementPlus Tag标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！