el-select使用

使用 el-select 可以按照以下步骤进行：

1. 引入 Element UI 库和样式文件：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在 Vue 组件中使用 el-select 组件：

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

3. 在 el-select 中添加选项：

<el-select>
  <el-option label="选项1" value="value1"></el-option>
  <el-option label="选项2" value="value2"></el-option>
  <el-option label="选项3" value="value3"></el-option>
</el-select>

4. 设置默认选中项：

<el-select v-model="selected">
  <el-option label="选项1" value="value1"></el-option>
  <el-option label="选项2" value="value2"></el-option>
  <el-option label="选项3" value="value3"></el-option>
</el-select>
<script>
  export default {
    data() {
      return {
        selected: 'value2',
      };
    },
  };
</script>

5. 自定义选项模板：

<el-select v-model="selected" placeholder="请选择">
  <template slot="option" slot-scope="{ option }">
    <span>{{ option.label }} - {{ option.value }}</span>
  </template>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

6. 远程搜索：

<el-select v-model="selected" remote filterable 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 {
        selected: '',
        options: [],
      };
    },
    mounted() {
      // 通过异步请求获取 options 数据
      this.fetchOptions();
    },
    methods: {
      fetchOptions() {
        // 通过异步请求获取 options 数据
        // 模拟异步请求
        setTimeout(() => {
          this.options = [
            { value: 'value1', label: '选项1' },
            { value: 'value2', label: '选项2' },
            { value: 'value3', label: '选项3' },
          ];
        }, 1000);
      },
    },
  };
</script>

以上是 el-select 的基本用法，更多高级用法可以参考 Element UI 官方文档。