vue-element的select下拉框赋值实例

下面是针对vue-element的select下拉框赋值实例的详细攻略：

1. 安装vue-element-ui

首先，在vue项目中安装vue-element-ui库。可以运行以下命令来安装：

npm install element-ui -S

接着，在main.js文件中引入并使用vue-element-ui插件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 使用el-select组件

在组件中使用el-select元素，并且使用v-model指令来双向绑定选中的值，使用v-for指令循环渲染下拉选项，示例代码如下：

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

在上述代码中，options表示下拉选项数组，每个选项都由label和value两个字段组成，selectedValue表示默认选中的值。

3. 通过v-model绑定值

使用v-model指令可以将选中的值直接绑定到组件的data属性中，示例代码如下：

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

在上述代码中，当用户选择一个选项时，selectedValue的值会自动更新。

4. 通过props绑定值

也可以通过props属性来绑定选中的值，示例代码如下：

<el-select :model-value="selectedValue" placeholder="请选择" @change="handleChange">
  <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>

在上述代码中，通过:model-value属性来绑定selectedValue的值，@change事件则用来监听选中值的变化。

示例说明

示例1：渲染静态的下拉选项

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option label="选项1" value="1"></el-option>
    <el-option label="选项2" value="2"></el-option>
    <el-option label="选项3" value="3"></el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      selectedValue: ''
    }
  }
}
</script>

在上述代码中，通过静态的el-option元素来渲染下拉选项。

示例2：动态渲染下拉选项

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  }
}
</script>

在上述代码中，通过data属性中的options数组来渲染下拉选项，每个选项都由label和value字段组成。