【vue2.0+Element】弹框嵌套选择器（messsageBox+Select）

这篇文章距离上次修改已过248天，其中的内容可能已经有所变动。

在Vue 2.0中，如果你想在MessageBox中嵌套一个Select选择器，你可以创建一个自定义的MessageBox组件，并在其中使用Element UI的Select组件。以下是一个简单的例子：

首先，确保你已经安装并设置了Element UI库。

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="选择器对话框"
    @open="handleOpen"
  >
    <el-select v-model="selectedValue" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmSelection">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        selectedValue: '',
        options: [
          { label: '选项1', value: 'option1' },
          { label: '选项2', value: 'option2' },
          // ...更多选项
        ],
      };
    },
    methods: {
      handleOpen() {
        this.dialogVisible = true;
      },
      confirmSelection() {
        // 处理选择结果
        console.log('Selected value:', this.selectedValue);
        this.dialogVisible = false;
      },
    },
  };
</script>

然后，你可以在你的主组件中引入并使用这个自定义的MessageBox组件：

<template>
  <div>
    <el-button @click="openSelectDialog">打开选择器对话框</el-button>
  </div>
</template>

<script>
  import SelectDialog from './SelectDialog.vue';

  export default {
    components: {
      SelectDialog,
    },
    methods: {
      openSelectDialog() {
        this.$modal.show(SelectDialog, {}, { name: 'select-dialog' });
      },
    },
  };
</script>

在这个例子中，我们创建了一个名为SelectDialog.vue的Vue组件，它包含了一个el-dialog元素，在其中放置了一个el-select元素。我们使用了Element UI的<el-dialog>和<el-select>组件。

在主组件中，我们通过点击按钮来触发打开这个选择器对话框。我们使用了一个假设的this.$modal.show方法来展示对话框，这个方法是假设的，你需要使用一个适合你的Vue版本和Element UI版本的方法来显示对话框。例如，你可以使用Vue的动态组件或者Element UI的MessageBox组件。

【vue2.0+Element】弹框嵌套选择器（messsageBox+Select）

评论已关闭

推荐阅读