場景

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

效果如下

注：

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

實現

1、el-tag官方文檔

Element - The world's most popular Vue UI framework

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-inputclass="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);}

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

總結

以上是生活随笔為你收集整理的Vue中使用el-tag标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。