通过具名 slot (插槽) 来显示Dialog 的标题_综合

做项目时遇到一个问题：在Dialog中写入副标题，可是 dialog的title是一个字符串啊，怎么在title中写入两个不同样式的字符串呢？
问题：如下图
在这里插入图片描述
这是一个dialog , 通常我们的写法是这样的：

<el-dialogtitle="提示":visible.sync="centerDialogVisible"width="30%"center>
</el-dialog>

所以这种情况，我们没法去写副标题，还要加一些样式来区别主标题和副标题，即图中的 2 部分，那怎么办呢，还好有slot，所以我们可以这样来解决：

<el-dialogalign="left":visible.sync="validateDialogVisible":before-close="handleClose":close-on-click-modal="false"><span slot="title"><span class="header-main-title">{
   {title}}</span><span class="header-sub-title">{
   {subTitle}}</span></span>....</el-dialog>

// 在data中：data () {
    return {
    title: "选择省区",subTitle: "每次只能登录一个省区",}
}

这样我们就可以很灵活的定义主标题和副标题的样式了，这样问题就得到解决了。完美！