elementui使用MessageBox 弹框自定义内容$msgbox：实现循环生成一个多选框内容未被解析

在 ElementUI 的 MessageBox 弹框中，可以通过传入一个 Vue 组件作为参数来自定义弹框的内容。如果你想要在自定义组件中生成多个复选框，可以使用 v-for 指令来实现循环生成。

以下是一个示例代码，演示了如何在自定义组件中循环生成多个复选框：

<template>
  <div>
    <p>{{ message }}</p>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <div>
      <el-button @click="handleConfirm">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkedList: []
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm', this.checkedList)
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

在这个组件中，我们使用了一个 el-checkbox-group 组件来实现多选框，使用 v-model 指令来绑定选中的值。然后使用 v-for 指令循环生成多个 el-checkbox 组件。

然后在调用 MessageBox 时，将这个组件作为参数传入，并传入 options 数组来提供选项列表：

<template>
  <div>
    <el-button @click="showDialog">显示自定义弹框</el-button>
  </div>
</template>

<script>
import MyMessageBox from '@/components/MyMessageBox'

export default {
  components: {
    MyMessageBox
  },
  data() {
    return {
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    }
  },
  methods: {
    showDialog() {
      const h = this.$createElement
      const messageBox = this.$msgbox({
        title: '自定义弹框',
        message: h(MyMessageBox, {
          props: {
            message: '请选择一个或多个选项：',
            options: this.options
          },
          on: {
            confirm: (checkedList) => {
              messageBox.close()
              console.log(checkedList)
            },
            cancel: () => {
              messageBox.close()
            }
          }
        }),
        showCancelButton: true,
        showConfirmButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      })
    }
  }
}
</script>

这样就可以在自定义组件中循环生成多个复选框了。注意，这里我们在 MyMessageBox 组件中添加了一个 options 属性，用于传递选项列表。在调用 MessageBox 时，我们也需要传入这个 options 属性。