element 中的 el-select 下拉列表如何自定义列表

在Element UI的el-select组件中，下拉列表（即选项组）的自定义通常通过两个关键点实现：`options`属性和`option-label-renderer`或`option-value-renderer`函数。

1. **options**属性：这是定义下拉列表项的基本配置，每个选项是一个对象，包含`label`（显示文本）、`value`（选择值，通常与数据库中的id对应）等字段。例如：

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

// 自定义选项数组
const customOptions = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' },
  // 更复杂的结构可以添加如icon、disabled等属性
];

2. **option-label-renderer** 或 **option-value-renderer** 函数：这两个是可选的渲染函数，允许你在展示选项时动态处理内容，比如使用计算属性、条件判断等。例如，如果你想根据某个值渲染不同样式的标签：

<template>
  <el-select placeholder="请选择" option-label-renderer="customLabelRenderer">
    <el-option
      v-for="item in customOptions"
      :key="item.value"
      :label="customLabelRenderer(item)"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  methods: {
    customLabelRenderer(option) {
      return option.label + ' (Custom)' // 这里可以根据需要定制渲染逻辑
    }
  }
};
</script>