前端-如何自己做一个可视化的人员选择泛用组件

一、展示组件效果

二、组件的功能

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

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

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

三、具体实现

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

复制代码

<template>
  <div class="userBox">
    <el-tabs type="border-card" class="tabsBox">
      <el-input
        placeholder="请输入名字查询"
        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: '', // 在这里声明查询字符串 filterText
      checkList: [],//被选中的列表
    };
  },

  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>