vue中使用element寫點擊input內部標簽(使用模態框傳值)

首先附上源碼地址

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

好了.,有什么問題私信或者留言評論.謝謝