vue实现选人

Vue 实现选人功能

使用 Element UI 的 Select 组件

Element UI 提供了 Select 组件，可以方便地实现选人功能。需要安装 Element UI 并引入 Select 组件。

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

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

使用自定义组件实现多选

如果需要多选功能，可以使用 multiple 属性。

<el-select v-model="selectedPersons" multiple placeholder="请选择人员">
  <el-option
    v-for="person in personList"
    :key="person.id"
    :label="person.name"
    :value="person.id">
  </el-option>
</el-select>

结合后端 API 动态加载人员列表

通常人员列表需要从后端 API 获取，可以使用 axios 或其他 HTTP 库。

export default {
  data() {
    return {
      selectedPerson: '',
      personList: []
    }
  },
  mounted() {
    this.fetchPersonList()
  },
  methods: {
    fetchPersonList() {
      axios.get('/api/persons').then(response => {
        this.personList = response.data
      })
    }
  }
}

添加搜索过滤功能

Element UI 的 Select 组件支持搜索过滤，通过 filterable 属性启用。

<el-select v-model="selectedPerson" filterable placeholder="请搜索并选择人员">
  <el-option
    v-for="person in personList"
    :key="person.id"
    :label="person.name"
    :value="person.id">
  </el-option>
</el-select>

使用虚拟滚动优化性能

对于大量人员数据，可以使用虚拟滚动提升性能。

<el-select
  v-model="selectedPerson"
  filterable
  remote
  reserve-keyword
  placeholder="请输入关键词"
  :remote-method="remoteMethod"
  :loading="loading">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

实现自定义模板

如果需要更复杂的展示方式，可以使用自定义模板。

<el-select v-model="selectedPerson" placeholder="请选择人员">
  <el-option
    v-for="person in personList"
    :key="person.id"
    :label="person.name"
    :value="person.id">
    <span style="float: left">{{ person.name }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ person.department }}</span>
  </el-option>
</el-select>

以上方法可以根据实际需求灵活组合使用，实现不同场景下的选人功能。