場(chǎng)景

實(shí)現(xiàn)對(duì)某任務(wù)的起點(diǎn)，途徑點(diǎn)，終點(diǎn)進(jìn)行管理，其中途徑點(diǎn)可以是多個(gè)。

效果如下

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi?
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、el-tag官方文檔

Element - The world's most popular Vue UI framework

2、后臺(tái)設(shè)置數(shù)據(jù)庫(kù)字段為一個(gè)字符串字段。

?

3、新增和編輯實(shí)現(xiàn)

添加el-form-item

??????????????? <el-form-item label="途經(jīng)點(diǎn)" 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">+點(diǎn)擊添加途經(jīng)點(diǎn)(回車結(jié)束)</el-button></el-form-item>

首先需要聲明各變量

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

然后實(shí)現(xiàn)各方法

??????????? 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 = '';},

還需要實(shí)現(xiàn)各樣式

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

以上都是基于官方文檔實(shí)現(xiàn)顯示多選框效果，最終將選擇的內(nèi)容添加進(jìn)數(shù)組dynamicTags中。

然后在新增按鈕的點(diǎn)擊事件中

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

將存儲(chǔ)多個(gè)途經(jīng)點(diǎn)的數(shù)組清空

修改按鈕的操作

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

在修改按鈕中實(shí)現(xiàn)字符數(shù)組的分割，通過(guò)split實(shí)現(xiàn)，分割符號(hào)為→

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]+ "→";}//去掉最后一個(gè)號(hào)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();});}}});},

首先對(duì)多選的字符數(shù)組進(jìn)行循環(huán)追加

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

追加之后去掉最后一個(gè)箭頭符號(hào)

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

然后分別調(diào)用新增和編輯接口

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。