vue实现人员选择

Vue 实现人员选择功能

在 Vue 中实现人员选择功能，通常需要结合表单元素和组件化开发。以下是几种常见的实现方式：

使用下拉选择框（Select）

<template>
  <select v-model="selectedPerson">
    <option v-for="person in people" :value="person.id" :key="person.id">
      {{ person.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedPerson: null,
      people: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  }
}
</script>

使用复选框（Checkbox）实现多选

<template>
  <div v-for="person in people" :key="person.id">
    <input 
      type="checkbox" 
      :id="'person-' + person.id" 
      :value="person.id" 
      v-model="selectedPeople"
    >
    <label :for="'person-' + person.id">{{ person.name }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedPeople: [],
      people: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  }
}
</script>

使用第三方组件库

对于更复杂的人员选择需求，可以使用第三方组件库：

1. Element UI 的 Select 组件：

   

   <el-select v-model="selectedPerson" placeholder="请选择">
   <el-option
    v-for="person in people"
    :key="person.id"
    :label="person.name"
    :value="person.id">
   </el-option>
   </el-select>

2. Vuetify 的 Autocomplete 组件：

   <v-autocomplete
   v-model="selectedPerson"
   :items="people"
   item-text="name"
   item-value="id"
   label="选择人员"
   ></v-autocomplete>

实现搜索过滤功能

对于大量人员数据，可以添加搜索过滤：

<template>
  <input v-model="searchQuery" placeholder="搜索人员">
  <select v-model="selectedPerson">
    <option 
      v-for="person in filteredPeople" 
      :value="person.id" 
      :key="person.id"
    >
      {{ person.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedPerson: null,
      people: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  },
  computed: {
    filteredPeople() {
      return this.people.filter(person => 
        person.name.includes(this.searchQuery)
      )
    }
  }
}
</script>

实现分页加载

对于超大数据集，可以添加分页功能：

<template>
  <select v-model="selectedPerson">
    <option 
      v-for="person in visiblePeople" 
      :value="person.id" 
      :key="person.id"
    >
      {{ person.name }}
    </option>
  </select>
  <button @click="loadMore">加载更多</button>
</template>

<script>
export default {
  data() {
    return {
      selectedPerson: null,
      pageSize: 10,
      currentPage: 1,
      people: [
        // 大量人员数据
      ]
    }
  },
  computed: {
    visiblePeople() {
      return this.people.slice(0, this.pageSize * this.currentPage)
    }
  },
  methods: {
    loadMore() {
      this.currentPage++
    }
  }
}
</script>

实现树形选择

对于有层级关系的人员组织，可以使用树形选择：

<template>
  <tree-select
    v-model="selectedPeople"
    :options="peopleTree"
    :multiple="true"
    placeholder="选择人员"
  />
</template>

<script>
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { TreeSelect },
  data() {
    return {
      selectedPeople: [],
      peopleTree: [
        {
          id: 'dept1',
          label: '部门A',
          children: [
            { id: 1, label: '张三' },
            { id: 2, label: '李四' }
          ]
        },
        {
          id: 'dept2',
          label: '部门B',
          children: [
            { id: 3, label: '王五' }
          ]
        }
      ]
    }
  }
}
</script>

这些方法可以根据实际需求组合使用，构建出适合项目的人员选择功能。对于更复杂的需求，可能需要结合后端API实现异步加载和搜索功能。