VueJs + Element UI: Как настроить заголовок el-dialog?

Question

Я создал диалог с пользовательским заголовком el-dialog, используя el-icon, но el-icon не появляется. как сделать так, чтобы иконка появилась?

вот мой код

<el-dialog :title="titleData" :visible.sync="dialogVisible" width="30%">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

methods: {
  setTitle() {
  this.titleData = '<el-icon-info></el-icon-info>' + 'Info'
}

вот моя скрипка: https://jsfiddle.net/dede402/y93kvew5/6/

Answer 1

Слот

-: содержание диалога

title: содержание заголовка диалога

нижний колонтитул: содержимое нижнего колонтитула Dialog

<el-dialog :visible.sync="dialogVisible" width="30%">
  <span slot="title"><el-icon-info></el-icon-info>Info</span>
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

Answer 2

просто используйте слот title, доступный для компонента el-dialog. Вот ваша скрипка с обновленным рабочим решением: https://jsfiddle.net/budgw/y93kvew5/10/