1. 程式人生 > 其它 >vue 元件化彈窗列表以及獲取資料

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.chooseOption.push({
                open: false,
                selectData: this.selectData,
            });
            this.$emit("chooseStudent", []);
            this.chooseOption = [];
            this.selectData = [];
            this.$refs.multipleTable7.clearSelection();
        },

  

以下例子作為參考程式碼,不可全照抄

//應用:單檔案引入並且註冊。

備註: 這裡 chooseStudent 是 你寫的table元件的 vue 檔案,僅僅作為例子,不可照抄

<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
      }

    },