Vue3 uses the tag tag of elementplus to interact with the background data

Page effect:

front-end implementation:

<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>

method:

 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 = ''
    }

The data structure saved to the background is a comma-separated string:

the front-end echoes:

varsionTags.value = response.data.versionInfo.split(",")

Main implementation:
1. When receiving in the background, the front-end needs to convert the array to a string, and the background uses string to receive.
2. When the front-end echoes, what is needed is an array, so you can use split to split with a comma, and the split is an array.
That’s about it. If the description is wrong, please correct me. If you have any questions, you can add WeChat: 876942434. Let’s make progress together~