vue3 使用elementplus的tag标签与后台进行数据交互

页面效果：

前端实现：

      

            
                {{ tag }}
            
            
            
                + 添加
            
        

方法：

 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，大家一起进步~