vue 元件化彈窗列表以及獲取資料
阿新 • • 發佈:2022-05-09
列表以及獲取資料你們自己寫,重點在於倆個方法以及傳參和獲取方式
// 注意: 取消方法一定要傳空陣列,不然容易造成列表取消了勾選仍然能獲取到資料
<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 } },