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

页面效果：

前端实现：

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