(对话框)入门学习
适用场景
企业管理系统定制开发新增和编辑操作想要以弹框的方式显示，使用到el-dialog
知识点
el-dialog的title设置标题el-dialog的visible.sync控制弹框的显示el-dialog的append-to-body支持弹框中继续打开弹框el-dialog的before-close关闭按钮的钩子span的slot='footer'弹框底部设置el-dialog的center标题和底部居中显示
效果图
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script></head><body> <div id='app'> <el-button @click='handleOpenDialog'>打开Dialog弹框</el-button> <el-dialog title='外部表格弹窗' center :visible.sync='outVisible' :before-close='outClose'> <el-table :data='gridData'> <el-table-column prop='date' label='日期'></el-table-column> <el-table-column prop='name' label='姓名'></el-table-column> <el-table-column prop='address' label='地址'></el-table-column> <el-table-column label='操作'> <template slot-scope='scope'> <el-button type='warning' size='mini' @click='handleEdit(scope.row)'>修改</el-button> </template> </el-table-column> </el-table> <el-dialog title='内部表单弹窗' center :visible.sync='innerVisible' :before-close='outClose' append-to-body> <el-form :model='formData' label-width='80px'> <el-form-item label='日期'> <el-input v-model='formData.date'></el-input> </el-form-item> <el-form-item label='姓名'> <el-input v-model='formData.name'></el-input> </el-form-item> <el-form-item label='地址'> <el-input v-model='formData.address'></el-input> </el-form-item> </el-form> <span slot='footer'> <el-button @click='innerVisible=false'>返回</el-button> </span> </el-dialog> <span slot='footer'> <el-button @click='outVisible=false'>返回</el-button> </span> </el-dialog> </div></body></html><script> new Vue({ el: '#app', data() { return { outVisible: false, innerVisible: false, formData: { date: '', name: '', address: '' }, gridData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], } }, methods: { handleOpenDialog() { this.outVisible = true }, outClose(done) { this.$confirm('确认关闭', '提示框').then(() => { done() }).catch(() => { }) }, handleEdit(row) { this.formData = row this.innerVisible = true } } })</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96