Element-UI下拉多选框回显

**Element-UI 下拉多选框回显**

在 Element-UI 中，下拉多选框（MultiSelect）是一个非常有用的组件，可以让用户从一个列表中选择多个项。然而，在实际的应用场景中，我们经常需要将已有的数据进行回显到这个下拉多选框中，以便于用户可以快速地看到已经选择过的项。

在本文中，我们将一步步地讲解如何实现 Element-UI 下拉多选框的回显功能。

### 一、准备工作首先，我们需要准备一个包含已有数据的数组。例如，我们有一个 `users` 数组，里面存储了多个用户信息：

javascriptconst users = [
 { id:1, name: '张三', age:25 },
 { id:2, name: '李四', age:30 },
 { id:3, name: '王五', age:35 }
]

### 二、创建下拉多选框组件接下来，我们需要在 Vue 组件中创建一个下拉多选框组件。我们使用 Element-UI 的 `el-select` 和 `el-option` 组件来实现这个功能：

html<template>
 <div>
 <el-select v-model="selectedUsers" multiple placeholder="请选择用户">
 <el-option v-for="(user, index) in users" :key="index" :label="user.name" :value="user.id"></el-option>
 </el-select>
 </div>
</template>

<script>
export default {
 data() {
 return {
 selectedUsers: [], // 已选择的用户 ID users: [
 { id:1, name: '张三', age:25 },
 { id:2, name: '李四', age:30 },
 { id:3, name: '王五', age:35 }
 ]
 }
 }
}
</script>

### 三、实现回显功能现在，我们需要在组件中实现回显功能。我们可以通过 `v-model` 指令将已选择的用户 ID 与下拉多选框的值进行绑定：

html<template>
 <div>
 <el-select v-model="selectedUsers" multiple placeholder="请选择用户">
 <el-option v-for="(user, index) in users" :key="index" :label="user.name" :value="user.id"></el-option>
 </el-select>
 </div>
</template>

<script>
export default {
 data() {
 return {
 selectedUsers: [], // 已选择的用户 ID users: [
 { id:1, name: '张三', age:25 },
 { id:2, name: '李四', age:30 },
 { id:3, name: '王五', age:35 }
 ]
 }
 },
 mounted() {
 // 从后端获取已选择的用户 ID this.$axios.get('/users/selected')
 .then(response => {
 const selectedUserIds = response.data;
 this.selectedUsers = selectedUserIds;
 })
 .catch(error => {
 console.error(error);
 });
 }
}
</script>

在上面的代码中，我们使用 `mounted`生命周期钩子函数来从后端获取已选择的用户 ID。我们将获取到的 ID 值赋给 `selectedUsers` 数组。

### 四、展示回显结果最后，我们需要在 Vue 组件中展示回显结果。在本例中，我们可以通过使用 `v-for` 指令循环遍历 `users` 数组，并根据 `selectedUsers` 数组的值进行过滤：

html<template>
 <div>
 <el-select v-model="selectedUsers" multiple placeholder="请选择用户">
 <el-option v-for="(user, index) in users" :key="index" :label="user.name" :value="user.id"></el-option>
 </el-select>
 <ul>
 <li v-for="(user, index) in filteredUsers" :key="index">{{ user.name }}</li>
 </ul>
 </div>
</template>

<script>
export default {
 data() {
 return {
 selectedUsers: [], // 已选择的用户 ID users: [
 { id:1, name: '张三', age:25 },
 { id:2, name: '李四', age:30 },
 { id:3, name: '王五', age:35 }
 ]
 }
 },
 computed: {
 filteredUsers() {
 return this.users.filter(user => this.selectedUsers.includes(user.id));
 }
 }
}
</script>

在上面的代码中，我们使用 `computed` 属性来计算过滤后的用户列表。我们通过 `filter()` 方法将 `users` 数组中的每个项与 `selectedUsers` 数组的值进行比较，如果匹配，则保留该项。

这样，Element-UI 下拉多选框就可以实现回显功能了！