element-plus el-select 扩展使用

element-plus el-select组件是一个常用的下拉选择框组件，可以用于选择单个或多个选项。在使用el-select时，我们可以通过扩展el-select的属性和方法，来满足我们的特定需求。

1. 扩展el-select的属性

我们可以通过给el-select添加自定义属性，来扩展其属性，例如：

<el-select v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
  </el-option>
</el-select>

在上面的代码中，我们通过给el-option添加了一个desc属性，来展示选项的描述信息。

2. 扩展el-select的方法

我们可以通过在el-select的mounted钩子函数中，给它添加自定义方法，例如：

<el-select ref="mySelect" v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    <span style="float: left">{{ item.label }}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      value: '',
      options: [
        { value: 'option1', label: '选项1', desc: '描述1' },
        { value: 'option2', label: '选项2', desc: '描述2' },
        { value: 'option3', label: '选项3', desc: '描述3' },
        { value: 'option4', label: '选项4', desc: '描述4' }
      ]
    }
  },
  mounted() {
    this.$refs.mySelect.myMethod = function() {
      console.log('自定义方法')
    }
  }
}
</script>

在上面的代码中，我们在el-select的mounted钩子函数中，给它添加了一个自定义方法myMethod，然后在组件中可以直接使用this.$refs.mySelect.myMethod()来调用这个方法。

总结：

通过扩展el-select的属性和方法，我们可以更加灵活地使用这个组件，满足我们特定的需求。但是，在扩展时需要注意，不要破坏el-select原有的功能和属性，以免出现意外的问题。