写一个vue封装人员选择的组件

Vue 封装人员选择组件的步骤如下：

1. 创建一个 Vue 组件，并定义其 props、data 和 methods。
2. 在组件的模板中使用 HTML 元素和绑定来展示人员列表。
3. 在 methods 中实现组件的逻辑，例如：选择/取消选择人员、搜索人员等。
4. 导出该组件并在其他组件中引入使用。

示例代码：

<template>
  <div>
    <input type="text" v-model="searchKey" placeholder="搜索人员">
    <ul>
      <li v-for="person in filteredList" :key="person.id">
        <input type="checkbox" v-model="selectedPeople" :value="person.id">
        {{ person.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    peopleList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchKey: '',
      selectedPeople: []
    }
  },
  computed: {
    filteredList() {
      return this.peopleList.filter(person => person.name.includes(this.searchKey))
    }
  },
  methods: {
    toggleSelection(personId) {
      const index = this.selectedPeople.indexOf(personId)
      if (index > -1) {
        this.selectedPeople.splice(index, 1)
      } else {
        this.selectedPeople.push(personId)
      }
    }
  }
}
</script>