利用el-tag标签实现类似checkbox的选择(多选)效果

利用el-tag标签实现类似checkbox的选择(多选)效果

第一种: 先定义好数据

<el-tag
   v-for="item in tagList"
   :key="item.key"
   class="tag"
   :type="item.isSelect ? 'success' : 'info'"
   :effect="item.isSelect ? 'dark' : 'plain'"
   size="medium"
   @click="handleSelect(item.key)"
 >
   {{ item.label }}
</el-tag>

data() {
    return {
      tagList: [
        {
          label: 'aaa',
          key: '111',
          isSelect: false
        },
        {
          label: 'bbb',
          key: '222',
          isSelect: false
        },
        {
          label: 'ccc',
          key: '333',
          isSelect: false
        },
        {
          label: 'ddd',
          key: '444',
          isSelect: false
        }
      ]
    }
  },
  methods: {
  	handleSelect(key) {
      const currentTag = this.tagList.find(item => item.key === key)
      currentTag.isSelect = !currentTag.isSelect
      this.formData[key] = currentTag.isSelect
    },
  }

第二种:最基础数据

<el-tag
   v-for="(tag, index) in tags"
   :key="index"
   closable
   @click="handleSelect(tag)"
   :type="isSelected(tag) ? 'success' : 'info'"
 >
   {{ tag }}
 </el-tag>

data() {
    return {
      tags: ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4'],
      selectedTags: [],
    };
  },
  methods: {
    handleSelect(tag) {
      this.isTagSelected(tag)
        ? this.selectedTags.splice(this.selectedTags.indexOf(tag), 1)
        : this.selectedTags.push(tag);
    },
    isSelected(tag) {
      return this.selectedTags.includes(tag);
    }

最后我想让这些tag标签竖向排列,便给其父元素设置了flex,column,但是发现tag标签铺满了父元素,很丑.设置了flex 0 0 auto不生效 width auto也不生效. 最后设置了width fit-content解决 不过又长又短还是丑索性给了一个最小宽度,至此解决