场景

实现对某任务的起点，途径点，终点进行管理，其中途径点可以是多个。

效果如下

注：

博客：
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标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)相关推荐

.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
微信H5页面跳转小程序 - Vue中使用微信开放标签＜wx-open-launch-weapp＞
微信开放标签说明文档使用微信开放标签前置条件 1.绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名" 2 ...
php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图效果图我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
vue 中的el表达式_解释el页面数据表达式
java web开发人员经常使用标签 struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resou ...
vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...
vue中，input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考这里需用到vue修饰符不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
Vue-Cleave - 在Vue中使用CleaveJS格式化你的输入内容
项目地址:https://github.com/jrainlau/vue-cleave What's CleaveJS? CleaveJS是最近github上的一个热门项目,在短短的一个多月中star ...
vue中Vant的field输入框实现输入内容可见密码
有时候会有这种需求,密码输入的时候点击要显示密码再次点击隐藏. demo 请狠狠的戳这里 ¥ https://download.lllomh.com/cliect/#/product/F422705 ...

Vue中使用el-tag标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)

场景

实现

Vue中使用el-tag标签实现输入多个字符串实现新增和修改回显(字符数组拼接和拆分)相关推荐

最新文章

热门文章