首先附上源码地址
https://files.cnblogs.com/files/maruihua/vue-tagsinput-master.zip
这个是我修改后的代码.取消了部分功能,添加的一些功能,原插件在以下网址,有兴趣的可以去看一看
https://github.com/voerro/vue-tagsinput
具体怎么使用呢
<template> <div> <span>inputtags</span> <tagsinput></tagsinput> </div> </template> <script> import tagsstyle from '../../common/vue-tagsinput-master/dist/style.css' import tagsjs from '../../common/vue-tagsinput-master/dist/voerro-vue-tagsinput' import tagsinput from '../../common/vue-tagsinput-master/src/VoerroTagsInput' export default { components: { tagsinput }, data() { return { } }, methods: { tagsinput(val) {} } } </script> <style> </style>
对没错,就是真么简单.methods里面的那个方法可以直接打印input里的值
中间踩了很多坑.代码中都有注释,所以不需要我解释什么了.有看不懂的留言评论下.
其中模态框回显那里困了我大部分时间.
// 模态框 insert() { this.dialogtaginputstars = true this.$nextTick(() => { if (this.arrlist.length > 0) { let arr = this.arrlist arr.forEach((v, i) => { this.tablelist.forEach((_v, _i) => { if (v === _v.Name) { this.$refs.multipleTable.toggleRowSelection(_v, true) } }) }) } else { this.gettablelist() } }) },
最后尽然是没有加true.还在想为什么每次会清空数组.
对了,里面我请求了接口.所以自己使用的时候让接口换成你们自己的接口,然后console.log一下,看下数组把table里面的内容换成你们自己的就可以了.
因为原插件功能太过于强大,部分源码没有看完,继续学习.如果有需要select中多选加tag标签的,给你们推荐一个
https://segmentfault.com/a/1190000008209715?utm_source=tag-newest
好了.,有什么问题私信或者留言评论.谢谢