Vue知识分享03-多个dialog对话框_vue dialog

Vue知识分享03-多个dialog对话框

场景

在实现CRUD的时候，添加数据和修改数据都需要使用dialog对话框

问题

添加数据已经创建了一个dialog对话框,修改数据还需要一个dialog对话框，如何创建多个平行dialog对话框？

可行方法

单个dialog对话框

    <el-row>

        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>


<!--添加数据对话框表单-->
    <el-dialog
            title="添加品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

<script>
  export default {
    data() {
      return {
        // 品牌模型数据
        brand: {
           status: '',
           brandName: '',
           companyName: '',
           id: "",
           ordered: "",
           description: ""
        },
        dialogVisible: false,
      };
    }
  };
</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

多个dialog对话框

只需要将第一个复制一份，放到第一个dialog下面或者合适的位置。修改el-dialog标签属性中:visible.sync的值，在script的return里再定义修改的值为false.在给修改按钮绑定点击显示dialog框即可，但是修改需要回显数据，所以最好点击事件绑定一个函数，传入对应要修改的对象，在函数里面进行开关和给绑定的数据模型赋值，两个dialog共用一个数据模型即可

            //修改数据打开对话框传入原来数据
            openDialog(row){
                this.brand = JSON.parse(JSON.stringify(row));
                this.dialogVisible2 = true;

            },
1
2
3
4
5
6