当前位置：首页 > 前端教程

elementui selected

2026-03-06 06:35:43前端教程

使用 ElementUI 的 selected 属性

ElementUI 的 selected 属性通常用于下拉选择组件（如 el-select）中，用于设置默认选中的选项。以下是常见的使用场景和方法：

基本用法

在 el-select 组件中，通过 v-model 绑定一个变量来管理选中的值。selected 可以通过初始化该变量实现默认选中。

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: 'option1', // 默认选中值为 'option1'
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    };
  }
};
</script>

动态设置选中值

可以通过方法动态修改 selectedValue 来改变选中项。

methods: {
  setSelectedValue(value) {
    this.selectedValue = value;
  }
}

多选模式

在多选模式下（multiple 属性为 true），selectedValue 应初始化为数组。

<el-select v-model="selectedValues" multiple placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValues: ['option1', 'option2'], // 默认选中多个值
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ]
    };
  }
};
</script>