vue自定义弹框的增删改 以及数据传输 操作

弹框的增删改 以及数据传输 操作

• 首先在父级页面用’scope’包裹你要操作的按钮等元素

          <template slot-scope="scope">
          <el-button
              @click="updateCompany(scope.row)"
              >修改</el-button
            >
          </template>

• 在对应的methods中 接收传过来的row 然后传递方法到store中

    updateCompany(row) {
      this.$store.commit("addCompanyDesign", "修改");
      this.$store.commit("checkCompanyData", row);
    }

• 自己页面也就是对应的弹框页面中 给确定或保存按钮添加点击事件

   <el-button type="success" @click="submitForm('postData')" round
          >确 定{{ this.companyDatas.id }}</el-button
        >

• 并把data中的数据传过去
  (这里的 this.companyDatas.id 中companyDatas在该页面中data定义好的 这里只是测试id是否传了进来)

• watch监听时 要添加对应的监听对象

  watch: {
      //监听弹出框
    "$store.state.company.addCompanyDesign": {
      handler(val) {
        this.dialogVisible = val;
        this.desginTitle = this.$store.state.company.designType + "公司信息";
      },
    },
    //对store中对应方法 也就是自己加进去的进行监听
    "$store.state.company.checkData": {
      handler(val) {
        console.log(val, "点击对象");
        this.companyDatas = val;
      },
    },
    //对postDate进行监听
    postData: {
      handler(val) {
        console.log(val, "监听表单");
        if (JSON.stringify(val) != "{}") {
          console.log("符合条件，进行存储");
          this.$store.commit("setCompanyDesign", val);
        }
      },
      deep: true  //深度监听
    }
  }

• 上面用this. 调用的都会在data中定义！！

• 子页面要写上这个方法 并在created中调用

   judgeFormData() {
      if (this.$store.state.company.addCompanyDesign == true) {
        this.dialogVisible = true;
        this.postData = this.$store.state.company.companyData;
      }
    }

  created() {
    this.judgeFormData();
  }

• 然后在子页面就可以进行增删改相应的方法了

• store中 在子页面用到的数据和方法也要记得写上

 checkCompanyList(state, payload) {
   state.companyList = payload
 }