vue element ui tag标签组，获取选中值，存入数组

而耳迩儿

已于 2022-08-31 21:42:33 修改

阅读量8.2k

点赞数 3

分类专栏： demo 文章标签：前端 vue.js javascript

于 2022-08-25 23:31:06 首次发布

本文链接：https://blog.csdn.net/m0_65274248/article/details/126534496

版权

demo 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

我的tag标签组，是通过数据字典遍历获取的。通过点击，使选中的值的type改变，再次点击，type变回灰色，并将选中的值，存入数组。

效果图与选中的值打印如下：

原理是通过设置flag为true，选中的值存入数组，再次点击，flag为false,从数组中当前值的下标移除。

代码如下：

html部分：

<dict-tag v-for="dict in this.getDictDatas(DICT_TYPE.CONTRACT_LABEL)" :value="dict.value"
                        :key="dict.value"
                        :type="DICT_TYPE.CONTRACT_LABEL" @click.native="typeVal(dict.colorType,dict.value)"></dict-tag>

js部分：

// 合同标签点击
      typeVal(type, id) {
        this.contractData[id].colorType = 'primary'
        // if (type == this.contractData[id].colorType) {//当type==primary
        if (this.contractTagList.includes(id)) {//当type==primary
          this.contractData[id].colorType = 'info'
          this.flag = false
          this.contractTagList.splice(this.contractTagList.indexOf(id), 1)
        } else {
          this.flag = true
          this.contractTagList.push(id)
        }
        console.log(this.contractTagList,'this.contractTagList')
      },

方法二：通过data获取（不过也有问题，最好是通过调后端接口数据获取，后面在沟通）前一个方法是获取id，之后详情页显示不好展示，故这两种方法都改成存值

代码如下：

html部分：

<el-tag v-for="(item,index) in tagList" :type="item.type" :key="index" @click.native="tagVal(item,index)">
                {{ item.value }}
              </el-tag>

js部分：

//data数据
//合同标签
       tagList: [
          {type: 'info', value: '临时合同'},
          {type: 'info', value: '工位合同'},
          {type: 'info', value: '公寓合同'},
          {type: 'info', value: '短期合同'},
          {type: 'info', value: '长期合同'},
          {type: 'info', value: '不含税合同'},
          {type: 'info', value: '含税合同'},
          {type: 'info', value: '优惠合同'},
          {type: 'info', value: '有意向续约'},
        ],


//点击事件
tagVal(item, index) {
        this.tagList[index].type = 'primary'
        if (this.contractTagList.includes(item.value)) {//当type==primary
          this.tagList[index].type = 'info'
          this.flag = false
          this.contractTagList.splice(this.contractTagList.indexOf(item.value), 1)
        } else {
          this.flag = true
          this.contractTagList.push(item.value)
        }
        console.log(this.contractTagList, 'this.contractTagList')
        this.$set(this.form, 'contractTagList', this.contractTagList)
      },

效果图如下：