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>以上方法可以根据实际需求灵活组合使用，实现不同场景下的选人功能。
