弹窗添加功能

先做静态的页面。

之后再做动态的。

 

代码规范。驼峰命名法。

 要把知识弄清楚，弄明白。我不理解。不明白。

<!--

        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,然后就不显示了。   -->

 

父组件Goods.vue

 

// 结构
<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>