element 添加標籤

1html:

<template>
    <div>
        <el-card :body-style="{ height: '500px' }">
            <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="行業:" prop="label">
                            <el-tag
                            :key="tag"
                            v-for="tag in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                            {{tag}}
                            </el-tag>
                            <el-input
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                            >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">添加新標籤</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="handleConfirm('form')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

2.js

<script>
export default {
    data() {
        return {
            form:{},
            inputValue:'',
            dynamicTags: [],//標籤
            inputVisible: false,
        }
    },
    methods: {
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            })
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                var values = inputValue.split(/[,， \n]/).filter(item=>{
                    return item!='' && item!=undefined
                })
                values.forEach(element => {
                    var index = this.dynamicTags.findIndex(i=>{
                        return i==element
                    })
                    if(index<0){
                        this.dynamicTags.push(element);
                    }
                });
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleConfirm(formName) {
            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    return;
                }
                var ar = []
                for (var i = 0; i < this.dynamicTags.length; i++) {
                    ar.push(this.dynamicTags[i])
                }
                this.form.label = ar.join(',')
                if (this.form.label.length == 0) {
                    this.$message.error('請至少添加一個標籤')
                    return;
                }
                let data = {
                    ...this.form,
                };
                this.$http.post('', data).then(res => {
                    if (!res.status) {
                        this.$message.error(res.message || '行業添加失敗');
                        return;
                    }
                    this.$message.success('行業保存成功成功');
                });
            })
        }
    }
}
</script>