弹窗添加功能
先做静态的页面。
之后再做动态的。
代码规范。驼峰命名法。
要把知识弄清楚,弄明白。我不理解。不明白。
<!--
1.首先在data(){}中定义一个变量dialogVisible给一个默认值false。给显示GoodsDialog的值是false所以不会显示。
2.点击了父组件中的弹框添加button,点击触发方法addGoods,addGoods插件在methods把dialogVisible的值变成了true,然后弹框就显示出来了。然后传到子组件的数组中存着,它是怎么传到子组件的?(1)GoodsDialog显示框<GoodsDialog/>。(2)需要在script标签下导入子组件GoodsDialog,(3)在export default{}当中的components组件中放入GoodsDialog。
3.然后子组件中的。子组件中点击了取消,确定,按钮之后,调用了close方法,close自定义事件this.$emit("changeDialog"),通知父亲修改dialogVisible。在父组件中用changeDialog改变了dialogVisible的值是false,然后再传给GoodsDialog的changeDialog,然后就不显示了。 -->
// 结构 <template> <!-- <div><h2>页面files</h2></div> --> <div class="goods"> <!-- 1.搜索区域 --> <el-row> <el-col :span="4" class="aaa" ><div class="grid-content bg-purple">第一个</div></el-col > <el-col :span="4" ><div class="grid-content bg-purple-light">第二个</div></el-col > </el-row> <div div="header"> <!-- change仅在输入框鼠标失去焦点或用户按下回车时触发 searchInput就是搜索输入框@searchInp。 --> <el-input @change="searchInp" v-model="input" placeholder="请输入内容" ></el-input> <el-button size="mini">查看</el-button> <el-button type="primary">查询</el-button> <!-- 1.首先在data(){}中定义一个变量dialogVisible给一个默认值false。给显示GoodsDialog的值是false所以不会显示。 2.点击了父组件中的弹框添加button,点击触发方法addGoods,addGoods插件在methods把dialogVisible的值变成了true,然后弹框就显示出来了。然后传到子组件的数组中存着,它是怎么传到子组件的?(1)GoodsDialog显示框<GoodsDialog/>。(2)需要在script标签下导入子组件GoodsDialog,(3)在export default{}当中的components组件中放入GoodsDialog。 3.然后子组件中的。子组件中点击了取消,确定,按钮之后,调用了close方法,close自定义事件this.$emit("changeDialog"),通知父亲修改dialogVisible。在父组件中用changeDialog改变了dialogVisible的值是false,然后再传给GoodsDialog的changeDialog,然后就不显示了。 要把知识弄清楚,弄明白。我不理解。不明白。 --> <el-button type="primary" @click="addGoods">弹框添加</el-button> </div> <!-- 2.表格区域展示视图数据 --> <div class="wrapper"> <el-table :data="tableData" border> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="date" label="商品ID" width="100"> </el-table-column> <el-table-column prop="date" label="商品价格" width="100" show-overflow-tooltip ></el-table-column> <el-table-column prop="name" label="规格类目" width="100" ></el-table-column> <el-table-column prop="date" label="商品图片" width="100"> </el-table-column> <el-table-column prop="name" label="商品描述" width="100" ></el-table-column> <el-table-column prop="date" label="操作" width="100" show-overflow-tooltip > </el-table-column> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button > <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button > </el-table> </div> <!-- 4.显示弹窗组件dialog 父亲里面声明的值要传给子组件 --> <!-- 方法写在父亲里面,所以是子调父。方法写在父亲里面,所以就是@ --> <GoodsDialog :dialogVisible="dialogVisible" @changeDialog="changeDialog" /> <!-- <GoodsDialog :dialogVisible="123" /> --> </div> </template> //行为 <script> // 导入组件 import GoodsDialog from "./GoodsDialog.vue"; export default { components: { GoodsDialog }, data() { return { input: "", tableData: [], total: 10, pageSize: 1, type: 1, list: [], // 在父组件中默认的值是false,把父组件data当中的dialogVisible的值传到显示弹框组件当中。传值。 dialogVisible: false, tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ] }; }, methods: { //添加商品---出现弹框 addGoods() { this.dialogVisible = true; }, // 父亲用changeDialog方法把dialogVisible一个值就是false changeDialog() { this.dialogVisible = false; }, //搜索查询数据 searchInp(val) { this.$api .getSearch({ search: val }) .then(res => { console.log("搜索---", res.data); if (res.data.status === 200) { this.tableData = tabledata; //假设需要分页---我们处理分页 // 这个代码是什么意思呢?什么用途呢? this后面一般是方法。然后呢,。 // this.total = res.data.result.length; // this.pageSize = 3; // slice是什么意思?删除,后面有数字一般是增删改查。 this.tableData = res.data.result.slice(0, 3); } else { this.tableData = []; this.total = 1; this.pageSize = 1; } }); }, // 编辑操作 handleEdit() {}, //删除操作 handleDelete() {} } }; </script> //样式 <style lang="scss" scoped> .goods { margin: 20px; } .header { display: flex; el-button { margin-left: 20px; } } .wrapper { margin: 20px 0; } el-row { // display: block; height: 100px; margin: 5px 0; } .bg-purple { background-color: purple; } .bg-purple-light { background-color: rgb(241, 111, 241); } </style> <style scoped> .aaa { height: 80px; background-color: purple; } </style>
子组件GoodsDialog.vue
<template> <div> <!-- 弹框,把弹框放到div里面去 --> <!-- title="添加商品"弹框的标题。:visible.sync="dialogVisible" 控制弹框显示隐藏boolean true显示 sync是synchro同步的 --> <el-dialog title="添加商品" :visible.sync="dialogVisible" width="70%"> <span>这是一段信息</span> <!-- 弹框底部区域 --> <span slot="footer" class="dialog-footer"> <!-- <el-button @click="dialogVisible = false">取 消</el-button> --> <!-- 把这个改成close事件 --> <el-button @click="close">取 消</el-button> <el-button type="primary" @click="close">确 定</el-button> <!-- <el-button type="primary" @click="close">确 定</el-button> --> </span> </el-dialog> </div> </template> <script> export default { props: ["dialogVisible"], data() { return { // 当前组件的变量是多少 问问题 // dialogVisible: true }; }, // 方法 methods: { // 自定义事件--通知父亲--修改dialogVisible close() { this.$emit("changeDialog"); } } // 添加商品 // addGoods() { // dialogVisible = true; // } }; </script> <style></style>