elementui的下拉框的回显数据类型(elementui下拉框获取值和id)

在使用ElementUI开发项目时，下拉框（el-select）是一个常用的组件，用于从多个选项中选择一个或多个值。然而，在实际应用中，我们经常需要处理下拉框的回显问题，即在页面加载时显示已选择的值，并且获取选中的值和对应的ID。本文将介绍如何实现这一功能，并提供多种解决方案。

解决方案概述

为了实现下拉框的回显和获取选中的值与ID，我们需要关注以下几个关键点：
1. 数据绑定：确保下拉框的值与Vue实例的数据属性正确绑定。
2. 选项数据结构：选项数据应包含值和ID。
3. 回显处理：在页面加载时设置下拉框的初始值。
4. 事件处理：监听下拉框的选择变化事件，获取选中的值和ID。

1. 数据绑定

首先，我们需要在Vue实例中定义一个数据属性来存储下拉框的选中值。假设我们的下拉框用于选择用户角色，我们可以这样定义：

javascript
new Vue({
el: '#app',
data: {
selectedRole: '', // 选中的角色值
roles: [
{ id: 1, name: '管理员' },
{ id: 2, name: '编辑' },
{ id: 3, name: '普通用户' }
]
}
});


2. 选项数据结构

在el-select组件中，我们使用el-option组件来定义选项。每个选项需要包含value和label属性，分别对应选项的值和显示文本。我们可以使用v-for指令来遍历roles数组并生成选项：

html

  <div id="app">
    
      <el-option
        v-for="role in roles"
        :key="role.id"
        :label="role.name"
        :value="role.name"</p>

<blockquote>
  <p>
      
    </div>
  
  

3. 回显处理

在页面加载时，我们需要设置下拉框的初始值。假设我们从后端获取了当前用户的角色信息，可以这样设置：

javascript
new Vue({
el: '#app',
data: {
selectedRole: '', // 选中的角色值
roles: [
{ id: 1, name: '管理员' },
{ id: 2, name: '编辑' },
{ id: 3, name: '普通用户' }
]
},
created() {
// 假设从后端获取到当前用户的角色信息
const currentUserRole = '编辑';
this.selectedRole = currentUserRole;
}
});


4. 事件处理

为了获取选中的值和ID，我们需要监听el-select组件的change事件。在事件处理函数中，我们可以根据选中的值找到对应的ID：

html

  <div id="app">
    
      <el-option
        v-for="role in roles"
        :key="role.id"
        :label="role.name"
        :value="role.name"</p>

<blockquote>
  <p>
      
    </div>
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedRole: '',
      roles: [
        { id: 1, name: '管理员' },
        { id: 2, name: '编辑' },
        { id: 3, name: '普通用户' }
      ]
    };
  },
  created() {
    const currentUserRole = '编辑';
    this.selectedRole = currentUserRole;
  },
  methods: {
    handleRoleChange(value) {
      const selectedRole = this.roles.find(role => role.name === value);
      if (selectedRole) {
        console.log('选中的角色值:', value);
        console.log('选中的角色ID:', selectedRole.id);
      }
    }
  }
};


<p>

多种思路

使用对象作为值

除了使用字符串作为el-option的值，我们还可以直接使用对象。这样在选择变化时可以直接获取到完整的对象，包括ID和名称。

html

  <div id="app">
    
      <el-option
        v-for="role in roles"
        :key="role.id"
        :label="role.name"
        :value="role"</p>

<blockquote>
  <p>
      
    </div>
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedRole: null,
      roles: [
        { id: 1, name: '管理员' },
        { id: 2, name: '编辑' },
        { id: 3, name: '普通用户' }
      ]
    };
  },
  created() {
    const currentUserRole = { id: 2, name: '编辑' };
    this.selectedRole = currentUserRole;
  },
  methods: {
    handleRoleChange(selectedRole) {
      if (selectedRole) {
        console.log('选中的角色值:', selectedRole.name);
        console.log('选中的角色ID:', selectedRole.id);
      }
    }
  }
};


<p>

使用value-key属性

如果选项对象中有多个相同的值，可以使用value-key属性来指定的键值，确保选项的性。

html

  <div id="app">
    
      <el-option
        v-for="role in roles"
        :key="role.id"
        :label="role.name"
        :value="role"</p>

<blockquote>
  <p>
      
    </div>
  </p>
</blockquote>


export default {
  data() {
    return {
      selectedRole: null,
      roles: [
        { id: 1, name: '管理员' },
        { id: 2, name: '编辑' },
        { id: 3, name: '普通用户' }
      ]
    };
  },
  created() {
    const currentUserRole = { id: 2, name: '编辑' };
    this.selectedRole = currentUserRole;
  },
  methods: {
    handleRoleChange(selectedRole) {
      if (selectedRole) {
        console.log('选中的角色值:', selectedRole.name);
        console.log('选中的角色ID:', selectedRole.id);
      }
    }
  }
};


<p>

通过以上方法，我们可以轻松实现ElementUI下拉框的回显和获取选中的值与ID。希望这些解决方案能帮助你在项目中更好地使用ElementUI。