页面效果:
前端实现:
<el-form-item label="设备配置">
<div style="border: 1px solid #dcdfe6;width: 100%;border-radius:5px">
<el-tag
v-for="tag in configTags"
:key="tag"
class="mx-1"
closable
:disable-transitions="false"
@close="configTagClose(tag)"
>
{
{ tag }}
</el-tag>
<el-input
v-if="configInputVisible"
ref="InputRef"
v-model="configInputValue"
class="ml-1 w-20"
size="small"
@keyup.enter="configHandleInputConfirm"
@blur="configHandleInputConfirm"
/>
<el-button v-else class="button-new-tag ml-1" size="small" @click="configShowInput">
+ 添加
</el-button>
</div>
</el-form-item>
方法:
const configInputValue = ref('')
const configTags = ref([])
const configInputVisible = ref(false)
const configTagClose= (tag) => {
configTags.value.splice(configTags.value.indexOf(tag), 1)
}
const configShowInput = () => {
configInputVisible.value = true
nextTick(() => {
// InputRef.value!.input!.focus()
})
}
const configHandleInputConfirm = () => {
if (configInputValue.value) {
configTags.value.push(configInputValue.value)
}
// 数组转字符串
form.value.equipmentConfig = Object.values(configTags.value).toString()
configInputVisible.value = false
configInputValue.value = ''
}
保存到后台的数据结构为逗号分割的字符串 :
前端回显:
varsionTags.value = response.data.versionInfo.split(",")
主要实现:
1后台接收时,需要前端将数组转字符串,后台用string接收
2前端回显时,需要的是一个数组,所以可以用split 以逗号分割,分割出来的就是一个数组。
大概就是这样,描述有误的地方欢迎大家指正,有问题可加微信 :876942434,大家一起进步~