vue elementui select 如何封装 根据不同选项 整个弹框显示不同列表内容 通过配置方式

您可以使用Vue的动态组件和Element UI的Select组件来封装一个根据不同选项显示不同列表内容的弹框。

首先，在组件中定义一个data属性，用来存储选项和对应的列表内容：

data() {
  return {
    options: [
      { label: '选项1', value: 'option1', list: [1, 2, 3] },
      { label: '选项2', value: 'option2', list: ['a', 'b', 'c'] },
      { label: '选项3', value: 'option3', list: ['x', 'y', 'z'] }
    ],
    selectedOption: null
  }
}

然后，在模板中使用Element UI的Select组件来显示选项列表，并通过v-model绑定选中的选项：

<el-select v-model="selectedOption" placeholder="请选择" @change="onOptionChange">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

接下来，在methods中定义一个方法来处理选项改变的事件，并根据选中的选项动态渲染不同的列表内容：

methods: {
  onOptionChange() {
    // 根据选中的选项，动态渲染不同的列表内容
    // 通过v-if或者动态组件实现
  }
}

您可以使用v-if指令来根据选中的选项显示不同的列表内容，或者使用动态组件来动态渲染不同的组件。

使用v-if方式：

<div v-if="selectedOption === 'option1'">
  <!-- 渲染选项1对应的列表内容 -->
  <ul>
    <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
  </ul>
</div>
<div v-if="selectedOption === 'option2'">
  <!-- 渲染选项2对应的列表内容 -->
  <ul>
    <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
  </ul>
</div>
<div v-if="selectedOption === 'option3'">
  <!-- 渲染选项3对应的列表内容 -->
  <ul>
    <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
  </ul>
</div>

使用动态组件方式：

<component :is="selectedOption ? selectedOption + '-list' : ''"></component>

然后在组件中定义三个不同的列表组件：

<template>
  <div>
    <ul v-if="option === 'option1'">
      <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
    </ul>
    <ul v-if="option === 'option2'">
      <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
    </ul>
    <ul v-if="option === 'option3'">
      <li v-for="item in options.find(option => option.value === selectedOption).list" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

最后，您可以根据具体需求来调整样式和逻辑。希望对您有帮助