Vue el-select 下拉框表格格式选项渲染 - 自定义选项展示

<p>Vue el-select 下拉框的 option 选项默认只支持字符串类型的展示，如果需要展示表格格式，需要自定义 option 的渲染方式。</p>
<p>可以通过设置 el-select 的 slot 属性，自定义下拉框的选项渲染方式。具体步骤如下：</p>
<ol>
  <li>在 el-select 中设置 slot 属性，值为 'dropdown-item'</li>
  <pre><code class="html"><el-select v-model="selected" placeholder="请选择" :style="{width: '100%'}" @change="handleChange" :slot="{dropdownItem: renderDropdownItem}">
</code></pre>
  <li>在 Vue 实例中定义 renderDropdownItem 方法，该方法返回一个自定义的下拉框选项，可以是一个表格或者其他自定义的 HTML 元素。</li>
  <pre><code class="javascript">renderDropdownItem(h, option) {
  return h('div', [
    h('table', [
      h('tr', [
        h('td', '姓名'),
        h('td', option.name)
      ]),
      h('tr', [
        h('td', '年龄'),
        h('td', option.age)
      ]),
      h('tr', [
        h('td', '性别'),
        h('td', option.gender)
      ])
    ])
  ])
}</code></pre>
  <li>在 Vue 实例中定义下拉框选项的列表，通过 v-for 指令循环渲染每个选项。</li>
  <pre><code class="javascript">options: [
  {name: '张三', age: 20, gender: '男'},
  {name: '李四', age: 22, gender: '女'},
  {name: '王五', age: 24, gender: '男'},
  {name: '赵六', age: 26, gender: '女'}
]</code></pre>
</ol>
<p>完整的示例代码如下：</p>
<pre><code class="html"><template>
  <el-select v-model="selected" placeholder="请选择" :style="{width: '100%'}" @change="handleChange" :slot="{dropdownItem: renderDropdownItem}">
    <el-option
      v-for="(option, index) in options"
      :key="index"
      :label="option.name"
      :value="option.age"
      :disabled="option.disabled">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        {name: '张三', age: 20, gender: '男'},
        {name: '李四', age: 22, gender: '女'},
        {name: '王五', age: 24, gender: '男'},
        {name: '赵六', age: 26, gender: '女'}
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    renderDropdownItem(h, option) {
      return h('div', [
        h('table', [
          h('tr', [
            h('td', '姓名'),
            h('td', option.name)
          ]),
          h('tr', [
            h('td', '年龄'),
            h('td', option.age)
          ]),
          h('tr', [
            h('td', '性别'),
            h('td', option.gender)
          ])
        ])
      ])
    }
  }
}
</script></code></pre>