一文读懂Element-UI的Select选择器获取对象技巧

2022-12-13 16:23:04

Element UI Select 选择器：如何轻松获取选中的对象？

获取选中对象的多种方法

在 Element UI 中，Select 选择器是一个非常有用的组件，它允许用户从一系列选项中选择一个或多个值。在使用 Select 选择器时，我们经常需要获取选中的对象，以便执行进一步的操作。本文将详细介绍三种方法来获取选中的对象：

1. 使用 value-key 属性

value-key 属性允许您指定一个键，该键将用作选中的对象的唯一标识符。

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

在上面的示例中，id 被用作 value-key。这意味着我们可以通过 value-key 属性获取选中的对象的 id：

this.selected.id; // 获取选中的对象的 id

2. 使用 ref 属性

ref 属性允许您访问组件实例。

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

在上面的示例中，ref="select" 将 select 组件实例存储在 this.$refs.select 中。这意味着我们可以通过 ref 属性获取选中的对象：

this.$refs.select.props.value; // 获取选中的对象

3. 使用 change 事件

change 事件在选中选项时触发。

<el-select @change="handleChange">
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.name"
    :value="item"
  />
</el-select>

在上面的示例中，handleChange 方法将在选中选项时触发。我们可以使用事件处理函数中的 value 参数来获取选中的对象：

handleChange(value) {
  console.log(value); // 获取选中的对象
}

常见问题

1. 为什么我无法通过 value-key 属性获取选中的对象？

确保已向 Select 添加 value-key 属性并指定了唯一标识符。

2. 为什么我无法通过 ref 属性获取选中的对象？

确保已向 Select 添加 ref 属性并在组件实例的 props 属性中获取了选中的对象。

3. 为什么我无法通过 change 事件获取选中的对象？

确保已向 Select 添加了 change 事件并在事件处理函数中获取了选中的对象。

4. 我可以使用 template 来获取选中的对象吗？

是的，可以使用 template 来获取选中的对象。

<el-select v-model="selected">
  <template slot-scope="props">
    {{ props.option.id }}
  </template>
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.name"
    :value="item"
  />
</el-select>

在上面的示例中，template 将使用选定选项的 id 渲染插槽。

5. 如何获取多个选定的对象？

可以使用 multiple 属性来选择多个对象。

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