Vue中使用el-tag標簽實現輸入多個字符串實現新增和修改回顯(字符數組拼接和拆分)

場景

實現對某任務的起點，途徑點，終點進行管理，其中途徑點可以是多個。

效果如下

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、el-tag官方文檔

https://element.eleme.cn/#/zh-CN/component/tag

2、后台設置數據庫字段為一個字符串字段。

3、新增和編輯實現

添加el-form-item

                <el-form-item label="途經點" prop="pathwaySite">       
                    <el-tag
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag}}
                    </el-tag>
                    <el-input
                    class="input-new-tag"
                    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>

首先需要聲明各變量

                dynamicTags: [],
                inputVisible: false,
                inputValue: '',

然后實現各方法

            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) {
                this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
            },

還需要實現各樣式

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

以上都是基於官方文檔實現顯示多選框效果，最終將選擇的內容添加進數組dynamicTags中。

然后在新增按鈕的點擊事件中

            /** 新增按鈕操作 */
            handleAdd() {
                this.reset();
                this.dynamicTags = [];
                this.open = true;
                this.title = "添加物流任務";
            },

將存儲多個途經點的數組清空

修改按鈕的操作

            /** 修改按鈕操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids;
                getCollect(id).then((response) => {
                    //對途經點進行處理     
                    this.form = response.data;
                    var tujingString  = this.form.pathwaySite;
                    if(tujingString)
                    {
                        this.dynamicTags = tujingString.split("→");
                    }
                    this.open = true;
                    this.title = "修改物流任務";
                });
            },

在修改按鈕中實現字符數組的分割，通過split實現，分割符號為→

this.dynamicTags = tujingString.split("→");

然后在新增和編輯的提交按鈕的方法中

            /** 提交按鈕 */
            submitForm() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                         var tujing = "";
                            for (var i = 0; i < this.dynamicTags.length; i++) {
                            tujing += this.dynamicTags[i]+ "→";
                            }
                            //去掉最后一個號
                            if (tujing.length > 0) {
                            tujing = tujing.substr(0, tujing.length - 1);
                            }
                            this.form.pathwaySite = tujing;
                        if (this.form.id != null) {
                            updateCollect(this.form).then((response) => {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addCollect(this.form).then((response) => {
                                this.msgSuccess("新增成功");
                                this.dynamicTags = [];
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },

首先對多選的字符數組進行循環追加

                            for (var i = 0; i < this.dynamicTags.length; i++) {
                            tujing += this.dynamicTags[i]+ "→";
                            }

追加之后去掉最后一個箭頭符號

                            if (tujing.length > 0) {
                            tujing = tujing.substr(0, tujing.length - 1);
                            }

然后分別調用新增和編輯接口