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

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

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

1 2	`<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 点击的参数赋值 );

1	`<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
      }
 
    },