效果图
文章来源地址https://www.toymoban.com/news/detail-709521.html
页面展现
<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(",") //将字符串拆成数组
文章来源：https://www.toymoban.com/news/detail-709521.html
到了这里，关于誉天在线项目~ElementPlus Tag标签用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
