vue 组件化弹窗列表以及获取数据

列表以及获取数据你们自己写,重点在于俩个方法以及传参和获取方式

// 注意： 取消方法一定要传空数组，不然容易造成列表取消了勾选仍然能获取到数据

<el-button type="primary" @click="submit" >确 定</el-button>
<el-button @click="submitReset">取 消</el-button>

　　

submit() { //有勾选的时候获取传的数据
            this.chooseOption.push({ // 父子组件传参，单个可以直接传，多个的时候用数组
                open: false, // 是否打开弹窗
                selectData: this.selectData, // table 数组 全选获取到的数据
            });
            this.$emit("chooseStudent", this.chooseOption);
            this.chooseOption = [];
            this.selectData = [];
            this.$refs.multipleTable7.clearSelection();
        },

        submitReset(){ // 没有勾选的时候传的数据

            this.$emit("chooseStudent", []);
            this.chooseOption = [];
            this.selectData = [];
            this.$refs.multipleTable7.clearSelection();
        },

　　

以下例子作为参考代码，不可全照抄

 

//应用：单文件引入并且注册。

备注： 这里 chooseStudent 是 你写的table组件的 vue 文件，仅仅作为例子，不可照抄

特别备注： @chooseStudent 要和 子组件的 $emit 的参数一致  this.$emit("chooseStudent",  这里是 table 点击的参数赋值 );

<chooseStudent @chooseStudent="getChooseStudent" />

　　

import chooseStudent from "@/views/educational/courseSelectionPay/chooseCourse/chooseStudent.vue"

components: {
    chooseStudent
  },

　

getChooseStudent(data) {

      this.missedDialogVisible2 = data.open; //这里是 打开弹窗的参数，用 data.open 来对应
      if (data[0].selectData.length != 0) { // 这里限定了只有 有数据的才能进，防止点击了取消传了空数组导致这里数据丢失问题

        this.missedTableData2 = []
        this.missedTableData2 = data[0].selectData
      }

    },