组件el-check-tag、el-tag实现点击高亮（多选）

在Vue.js中，您可以使用el-check-tag和el-tag组件来实现点击高亮的功能。以下是一个简单的实现示例：

<template>
  <div>
    <el-checkbox-group v-model="checkedTags">
      <el-checkbox
        v-for="tag in tags"
        :key="tag"
        :label="tag"
        @change="handleTagChange(tag)"
      >
        <el-tag
          :class="{ 'is-highlight': checkedTags.includes(tag) }"
          @click="toggleTag(tag)"
        >
          {{ tag }}
        </el-tag>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tags: ['Tag 1', 'Tag 2', 'Tag 3'],
      checkedTags: []
    };
  },
  methods: {
    toggleTag(tag) {
      const tagIndex = this.checkedTags.indexOf(tag);
      if (tagIndex !== -1) {
        this.checkedTags.splice(tagIndex, 1);
      } else {
        this.checkedTags.push(tag);
      }
    },
    handleTagChange(tag) {
      // 可以在这里添加更多的逻辑处理
      console.log(`Tag ${tag} changed`);
    }
  }
};
</script>
 
<style>
.is-highlight {
  background-color: yellow; /* 高亮颜色 */
}
</style>

在这个示例中，我们使用了el-checkbox-group和el-checkbox来处理多选逻辑，并通过v-model绑定了选中的标签列表checkedTags。对于每个el-tag，我们使用了:class绑定来根据checkedTags数组中是否包含当前标签来动态添加高亮样式类is-highlight。通过@click事件处理函数toggleTag，我们可以在点击标签时切换其选中状态。