ant-design-vue框架的Modal. confirm对话框，content参数只能是string/vNode。如果要想自定义样式，只能render函数处理了。

https://www.antdv.com/components/modal-cn/

h()函数接收3个参数分别是：

1.String(必填)：标签p，span，div等

2.Object(可选)：对象属性，详情参考Vue官网【深入数据对象】

3.String或Array(可选)：嵌套文本内容或h()函数

<template>
  <div>Vue render函数</div>
</template>

<script>
export default {
  name: 'vue',
  data() {
    return {}
  },
  mounted() {
    this.confirm()
  },
  methods: {
    //弹窗
    confirm() {
      this.$confirm({
        title: '以下的日期无值班人员，请确认是否执行？',
        content: (h) => this.getVNode(h),//
        okText: '提交',
        cancelText: '关闭',
        onOk: () => {
            //do something
        },
        onCancel: () => {
          return Promise.resolve() //关闭
        },
      })
    },
    //vNode
    getVNode(h) {
      return h(
        // 第一个参数是一个简单的HTML标签字符"必选"
        'div',
        // 第二个参数是一个包含模板相关属性的数据对象"可选"
        {
          style: {
            maxHeight: '600px',
            overflow: 'auto',
          },
        },
        // 第三个参数是String或Array"可选"
        [
          '无值班人员时该工单将无人匹配，需手动指派！',
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
              marginTop:'15px',
            },
            domProps: {
              innerHTML: '2022-01-23的工单没人指派！',
            },
          }),
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
            },
            domProps: {
              innerHTML: '2022-02-01的工单没人指派！',
            },
          }),
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
            },
            domProps: {
              innerHTML: '2022-02-11的工单没人指派！',
            },
          }),
        ]
      )
    },
  },
}
</script>

效果图：

image.png

参考的文章：

https://www.jianshu.com/p/7508d2a114d3

https://blog.csdn.net/sansan_7957/article/details/83014838