一、展示组件效果

二、组件的功能

1.用户可以在搜索框里输入字符，下方列表实时变动（筛选出包含搜索字符的可选项），如果没有字符，就展示所有的选项

2.用户点击可选项，右侧出现标签

3.用户点击标签的XX，标签会消失，并且左侧改可选项的“选中”状态消失

三、具体实现

代码主要有三部分组成el-input,el-checkbox-group,el-tag

<template><div class="userBox"><el-tabs type="border-card" class="tabsBox"><el-inputplaceholder="请输入名字查询"v-model="filterText"style="margin-bottom: 5px;"></el-input><el-checkbox-group v-model="checkList" class="checkbox-group"><el-checkbox v-for="item in filteredData" :key="item.indexCode" :label="item.indexCode">{{ item.name }}</el-checkbox></el-checkbox-group></el-tabs><div class="xs-left"><el-tag:key="tag.indexCode"v-for="tag in selectedItems"closable:disable-transitions="false"@close="selectCh(tag.indexCode)">{{ tag.name }}</el-tag></div></div>
</template><script>
export default {name: 'abc',props: {listData: {type: Array,default: [],},},data() {return {filterText: '', // 在这里声明查询字符串 filterTextcheckList: [],//被选中的列表};},computed: {//选中后的列表，会包含中文名，用来在右侧展示的selectedItems() {return this.ListData.filter(item => this.checkList.includes(item.indexCode));},//父组件传过来的数据列表，但是实际要展示的是被字符串筛选过后的新列表filteredData() {return this.filterText === '' ? this.ListData: this.ListData.filter(item => item.name.includes(this.filterText));}},watch: {//监听被选中的列表，实时返回给父组件checkList(newCheckList, oldCheckList) {// 在 checkList 变化时触发，可以在这里执行传递给父组件的逻辑this.$emit('updateCheckList', newCheckList);},},mounted() {// 在这里可以进行一些初始化操作},methods: {selectCh(indexCode) {// 从 checkList 中移除被点击的项目this.checkList = this.checkList.filter(code => code !== indexCode);},},
};
</script>