vue后台开发，需要一个标签添加的界面,需要通过输入框内容进行本地标签过滤，以及点击label添加列表,以及点击label实现删除列表label.

<template>
  <div class="addlabel">
    <el-input class="mb20" v-model="name" placeholder="请输入标签名称"></el-input>
    <el-input class="mb20" v-model="keyword" placeholder="搜索关联标签"></el-input>
    <div class="listtag">
      <el-tag
        v-for="(tag,index) in filterList" :key="index"
        class="mr10 mb20 cur"
        @click="gettag(tag)"
        type="success">
        {{ tag.name }}
      </el-tag>
    </div>
    <p>已添加此标签的关联标签</p>
    <div class="listtag">
      <el-tag
        v-for="(tag,index) in linkedList" :key="index"
        class="mr10 mb20 cur"
        closable
        @close="deletelabel(index)"
        type="success">
        {{ tag.name }}
      </el-tag>
    </div>
    <div class="dialog-footer">
      <el-button @click="addlabel" type="primary" size="mini">确 定</el-button>
    </div>
  </div>
</template>

<script>

import { labelAdd, labelGetList } from '@/api/user'

export default {
  name: 'addLabels',
  components: {},
  data() {
    return {
      dialogVisible: false,
      list: [],
      linkedList: [],
      name: '',
      keyword: ''
    }
  },
  watch: {},
  mounted() {
    this.getdata()
  },
  computed: {
    filterList: function() {
      var that = this
      var list = that.list
      var filterList = []
      list.forEach((type) => {
        if (type.name.search(that.keyword) != -1) {
          filterList.push(type)
        }
      })
      return filterList
    }
  },
  methods: {
    gettag(item) {
      if (this.linkedList.length < 6) {
        var data = item
        // 判断是否存在同一个id存在则不添加
        this.linkedList.forEach((type) => {
          if (item.id == type.id) {
            data = {
              id: 0
            }
          }
        })
        if (data.id) {
          this.linkedList.push(item)
        }
      } else {
        this.$message.error('最多可添加6条')
      }
    },
    deletelabel(index) {
      // 删除label
      this.linkedList.splice(index, 1)
    },
    getdata() {
      var that = this
      labelGetList({
        'pageNum': 1,
        'pageSize': 1000,
        'parentId': 0,
        'type': 0
      }).then(function(res) {
        if (res.code == 200) {
          that.list = res.data.list
        }
      })
    },
    addlabel() {
      var that = this
      if (!this.name) {
        this.$message.error('请输入标签名称')
        return
      }
      labelAdd({
        'hot': 0,
        'integral': 0,
        'isHide': 1,
        'list': that.linkedList,
        'name': that.name,
        'num': 0,
        'status': 0
      }).then(function(res) {
        if (res.code == 200) {
          that.$message({
            message: '添加成功',
            type: 'success'
          })
          that.keyword = ''
          that.name = ''
          that.getdata()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mr10 {
  margin-right: 10px;
  margin-bottom: 20px;
}

.listtag {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.addlabel {
  width: 100%;
}
</style>