element-ui filterable

element-ui是一套基于Vue.js的UI组件库，它提供了丰富的可复用的组件，方便开发者快速构建用户界面。其中的filterable是element-ui中一个常用的属性，用于在某些组件中实现可筛选的功能。

在element-ui中，filterable属性通常用于下拉选择框（Select）和级联选择器（Cascader）等组件中。当设置filterable为true时，会在组件中显示一个可输入的文本框，用户可以通过输入关键字来筛选选项。这样可以方便用户在大量选项中快速找到所需的选项。

使用filterable属性的示例代码如下：

<el-select v-model="value" filterable>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

在上述代码中，`filterable`属性被应用在`el-select`组件上，表示该下拉选择框支持筛选功能。用户可以在文本框中输入关键字，系统会根据输入的关键字动态过滤选项。

相关问题

element-ui穿梭框

### 关于 Element UI 穿梭框 (Transfer) 组件的使用教程

#### 基础配置与初始化
为了在项目中使用 `el-transfer` 组件，需先安装并导入 Element UI 库。对于 Vue 2.x 版本的应用程序来说，这一步骤必不可少[^1]。

import { Transfer } from 'element-ui';
Vue.use(Transfer);

#### 数据准备
定义好要传递给穿梭框的数据源以及目标容器中的初始数据：

<template>
  <div class="transfer-demo">
    <!-- 定义穿梭框 -->
    <el-transfer v-model="value" :data="data"></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    const generateData = _ => {
      let data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: false, // 可选设置某些项不可用
        });
      }
      return data;
    };
    
    return {
      value: [], // 目标容器内的key集合
      data: generateData(), // 所有可转移项目的数组
    };
  },
};
</script>

上述代码展示了如何创建一个简单的双向选择器，并通过 `v-model` 将已选定的目标侧元素绑定到组件实例的状态变量 `value` 上；同时提供了一个由对象组成的列表作为候选池供用户挑选。

#### 自定义样式与布局调整
可以通过自定义类名来修改默认外观，比如改变宽度、高度等属性以适应页面设计需求[^4]。

.transfer-demo .el-transfer-panel{
  width: 300px !important;
}

此外还可以利用插槽机制来自定义标题栏、按钮文字等内容，增强用户体验。

#### 高级特性支持
除了基本的选择操作外，Element UI 还提供了诸如过滤搜索、批量迁移等功能的支持，使得复杂场景下的交互更加灵活高效[^3]。

例如可以添加筛选输入框帮助快速定位特定条目：

<el-transfer filterable :filter-method="filterMethod"
             :titles="['待选', '已选']" ... >
</el-transfer>

其中 `filterMethod` 函数用于控制哪些记录应该显示在当前视图中。

element-ui封装选人控件

Element UI提供了一个el-select组件，可以用来实现选择人的功能。以下是一个简单的示例：

<template>
  <el-select v-model="selectedUser" multiple filterable>
    <el-option v-for="user in userList" :key="user.id" :label="user.name" :value="user.id"></el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      selectedUser: [], // 选中的用户id数组
      userList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ] // 用户列表
    }
  }
}
</script>

这段代码中，我们使用el-select组件来实现选择人的功能。通过v-model绑定selectedUser变量，可以实时获取用户选择的结果。通过filterable属性，可以打开搜索框，方便用户快速筛选人员。通过el-option组件，我们可以循环渲染用户列表，其中label属性是展示在界面上的文本，value属性是与选项相关联的值，这里使用用户id。

当然，如果你需要更丰富的选人功能，可以考虑自己封装一个组件，以满足业务需求。