element ui 选择人员 demo

Element UI 是一套构建于 Vue.js 之上的组件库，提供了丰富的原生级视觉效果和响应式的组件供开发者创建用户界面。对于需要展示员工列表并允许用户进行选择的应用场景，Element UI 提供了“el-select”组件，这可以方便地集成到应用中用于选择功能。

下面是一个简单的使用 Element UI 的 el-select 组件来展示人员列表并实现单选或多选功能的 Demo：

### HTML 结构

首先，你需要在页面上放置一个包含人员数据的表格或者一个数组来存储员工信息，并利用 `el-select` 组件来展示和选择人员。

<template>
  <div>
    <!-- 显示选择的人员 -->
    <p>已选择的人员:</p>
    <ul>
      <li v-for="selected in selectedPersons" :key="selected.id">{{ selected.name }}</li>
    </ul>

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

### JavaScript 逻辑 (Vue)

在这个例子中，我们假设已经有一个名为 `persons` 的变量，它包含了员工的数据结构如下：

const persons = [
  { id: 1, name: '张三', department: '研发部' },
  { id: 2, name: '李四', department: '市场部' },
  // 更多员工...
];

接下来是在 Vue 实例中对这个组件的操作逻辑：

export default {
  data() {
    return {
      selectedPersons: [],
      selectedPerson: '',
      persons: persons,
    };
  },

  watch: {
    selectedPerson(newVal) {
      if (Array.isArray(newVal)) {
        this.selectedPersons = newVal;
      }
    },
  },
};

### CSS 样式

为了使界面更美观，可以添加一些基本的样式规则：

/* 示例样式的添加 */
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 5px;
}
.el-select .el-input__inner {
  width: 200px; /* 可根据需要调整宽度 */
}

### 功能说明

1. **显示已选择的人员**：当用户从下拉菜单中选择一个人员时，该人员的信息会被添加到已选择人员列表中，并实时更新。

2. **选择人员**：用户可以选择单个或多个人员，通过点击 `el-select` 组件下的选项实现选择。

3. **多选设置**：使用 `multiple` 属性开启多选功能。

通过以上示例，你可以快速搭建起一个基础的选择人员的功能模块。当然，在实际应用中，还需要进一步考虑性能优化、错误处理、用户体验等方面的问题。