el-dialog 控制 标题_el-dialog 设置title

Dialog 中定义 :title="dialogTitle" 和 :visible.sync="dialogVisible"

<el-dialog
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose"
>
  <el-form>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13

script 中定义 dialogVisible 和 dialogTitle 属性，定义打开 Dialog 的方法

export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
    }
  },
  methods: {
    addDataSource() {
      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      this.dialogTitle = '审核'
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<el-button size="mini" type="primary" style="width: 100px;" @click="addDataSource">新建数据源</el-button>
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
1
2