国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

elementUI多選框反選的實現代碼

來源:懂視網 責編:小采 時間:2020-11-27 21:59:22
文檔

elementUI多選框反選的實現代碼

elementUI多選框反選的實現代碼:最近有一個需求,點擊添加按鈕,彈出窗口(窗口顯示多選、可翻頁、可檢索列表),選中多條信息,當我點擊確定按鈕,把選中信息顯示在頁面上;點擊取消,選中信息不顯示在頁面上。再次打開,把在頁面上的信息顯示選中狀態。 思路:一開始選用elementUI官網例
推薦度:
導讀elementUI多選框反選的實現代碼:最近有一個需求,點擊添加按鈕,彈出窗口(窗口顯示多選、可翻頁、可檢索列表),選中多條信息,當我點擊確定按鈕,把選中信息顯示在頁面上;點擊取消,選中信息不顯示在頁面上。再次打開,把在頁面上的信息顯示選中狀態。 思路:一開始選用elementUI官網例

最近有一個需求,點擊添加按鈕,彈出窗口(窗口顯示多選、可翻頁、可檢索列表),選中多條信息,當我點擊確定按鈕,把選中信息顯示在頁面上;點擊取消,選中信息不顯示在頁面上。再次打開,把在頁面上的信息顯示選中狀態。

思路:一開始選用elementUI官網例子,使用selection-change,但是它只顯示當前改變的選擇,不能滿足我翻頁及檢索后還能選中數據的問題

toggleSelection(rows) {
 if (rows) {
 rows.forEach(row => {
 this.$refs.multipleTable.toggleRowSelection(row);
 });
 } else {
 this.$refs.multipleTable.clearSelection();
 }
 }

后來查詢api,發現了另外2個api,頁面上的存在本地字段 glht,列表上選中的存在本地字段 yglht.

每次要計算頁面顯示的數據是列表的第幾條數據,直接把對象放里面并不會勾選我上傳選中的數據。

emmm....知道有點蠢,但是我還沒想到別的辦法...

彈框:

<el-dialog class="contract_modal" title="信息" :visible.sync="glht_modal" width="80%" :modal="false" @close="cancel">
 <el-form :inline="true" :model="searchData" label-width="90px">
 <el-form-item label="名稱:">
 <el-input v-model.trim="searchData.mc_" size="small" class="contract_input"></el-input>
 </el-form-item>
 <span class="list_btns">
 <el-button type="primary" size="small" @click="listSearch(page, 1)" class="con_btn">搜索</el-button>
 <el-button size="small" @click="searchData = {}" class="con_btn">清空</el-button>
 </span>
 </el-form>
 <div id="list_body" class="list-body" style="padding-left: 0;">
 <el-table :data="tableData" stripe border style="width: 100%" max-height="480" ref="multipleTable" @select-all="handleSelectionAll" @select="handleSelectionChange">
 <el-table-column type="selection" width="26" align="right"></el-table-column>
 <el-table-column type="index" width="50" label="序號" align="left" header-align="left"></el-table-column>
 <el-table-column prop="mc_" label="名稱" width="180" show-overflow-tooltip align="left"></el-table-column>
 
 </el-table>
 <div class="list-pagination">
 <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
 :current-page.sync="page.page" :page-sizes="[10, 20, 50, 100]":page-size="page.pageCount"
 layout="total, sizes, prev, pager, next, jumper, ->"
 :total="page.total"></el-pagination>
 </div>
 </div>
 <div slot="footer" class="dialog-footer">
 <el-button type="primary" @click="save" size="small">確定</el-button>
 <el-button @click="cancel" size="small">取消</el-button>
 </div>
</el-dialog>

methods 里,全選時與選中單個時所做的操作:

// 全選 當val有數據,即為全選;為空數組,即為取消全選
handleSelectionAll (val) {
 // 獲取所有選中的數據 
 this.records = JSON.parse(localStorage.getItem('glht'))
 if(val.length !== 0) { 
 //全選
 // this.records = Array.from(new Set(val.concat(this.records))) 發現去重不好用!只能手動push了
 // 全選選中的一定是本頁所有數據,所以循環本頁
 this.tableData.forEach((v) => {
 if(this.records.find((e,index) => { return v.id_ === e.id_})){}else {
 // 如果數組中沒有就把選中的push進去
 this.records.push(v)
 }
 })
 } else { 
 // 取消全選,在選中的所有信息中把本頁列表有的刪除
 this.tableData.forEach((v) => {
 this.records.forEach((e,index) => {
 if (e.id_ === v.id_) {
 this.records.splice(index, 1)
 }
 })
 })
 }
 // 每次選的數據暫時存一下
 localStorage.setItem('glht', JSON.stringify(this.records))
},
// 單選 
handleSelectionChange(val, row) {
 // 獲取所有選中的數據 
 this.records = JSON.parse(localStorage.getItem('glht'))
 if (this.records.length === 0) {
 // 還沒有選中任何數據
 this.records = [row]
 } else {
 if (this.records.filter(i => { return i.id_ === row.id_ }).length === 0) {
 // 已選中的數據里沒有本條(取消),把這條加進來
 this.records.push(row)
 } else {
 // 已選中的數據里有本條(取消選中),把這條刪除
 this.records.forEach((e,index) => {
 if (e.id_ === row.id_) {
 this.records.splice(index, 1)
 }
 })
 }
 }
 // 每次選的數據暫時存一下
 localStorage.setItem('glht', JSON.stringify(this.records))
},

methods 里,獲取彈出框列表與選中數據:

listGet() {
 this.$axios.post("interface", {}, { params: searchData }).then(res => {
 if (res.data.success) {
 this.tableData = res.data.data.rows;
 this.page.total = res.data.data.total;
 this.records = JSON.parse(localStorage.getItem('yglht'))
 this.toggleSelection(JSON.parse(localStorage.getItem('yglht'))); // 反選操作
 } else {
 this.$message.error(res.data.message)
 }
 })
 .catch(err => console.log(err));
},
// 反選處理
toggleSelection(rows) {
 let arr =[]
 this.tableData.forEach((e, index) => {
 rows.forEach((i, ind) => {
 if (e.id_ === i.id_) {
 arr.push(this.tableData[index])
 }
 })
 })
 if (arr) {
 this.$nextTick(() => {
 arr.forEach(row => {
 this.$refs.multipleTable.toggleRowSelection(row);
 });
 })
 } else {
 this.$refs.multipleTable.clearSelection();
 }
},

methods 里,保存與取消單個時所做的操作:

save () {
 this.glht_modal = false
 localStorage.setItem('yglht', localStorage.getItem('glht'))
 this.yglht()
},
cancel () {
 this.glht_modal = false
 // 取消時 取在頁面上的值
 localStorage.setItem('glht', localStorage.getItem('yglht'))
 // this.toggleSelection(JSON.parse(localStorage.getItem('yglht'))); 直接寫不好用
 this.listGet({}) // 獲取彈出框列表數據,這里調用一次是因為防止再次打開彈出框閃現之前選擇的內容
 this.yglht()
},
yglht() {
 this.list = JSON.parse(localStorage.getItem('yglht'))
 // 處理this.list中地址、時間等頁面顯示問題
}

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

elementUI多選框反選的實現代碼

elementUI多選框反選的實現代碼:最近有一個需求,點擊添加按鈕,彈出窗口(窗口顯示多選、可翻頁、可檢索列表),選中多條信息,當我點擊確定按鈕,把選中信息顯示在頁面上;點擊取消,選中信息不顯示在頁面上。再次打開,把在頁面上的信息顯示選中狀態。 思路:一開始選用elementUI官網例
推薦度:
標簽: 多選 實現 代碼
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 九九精品视频一区二区三区 | 精品国产综合区久久久久99 | 国产精品伦理久久久久 | 国产资源视频在线观看 | 亚洲欧洲免费 | 亚欧一区| 可以看的毛片网站 | 欧美日韩三区 | 国产在线看不卡一区二区 | 成人精品视频一区二区三区 | 日本a黄 | 精品国产欧美一区二区 | 欧美亚洲综合图区在线 | 午夜大片在线观看 | 精品久久久久久国产牛牛app | 欧美亚洲综合网 | 色综合天天综合中文网 | 国产在线视频在线 | 欧美一区二区在线观看 | 国产欧美精品区一区二区三区 | 欧美一级视频在线观看 | 国产女同一区二区三区五区 | 国产亚洲欧美日韩俺去了 | 日本欧美一区二区三区不卡视频 | 国产成人一区二区三区 | 国产91精品一区二区麻豆亚洲 | 亚洲国产一区二区三区在线观看 | 明星国产欧美日韩在线观看 | 日韩欧美网站 | 一区二区三区视频 | 天天色天天射天天操 | 国产激情一区二区三区成人91 | 国产一区欧美二区 | 欧美日韩91 | 91精品欧美| 国产免费一区二区三区 | 欧美日韩精品一区二区在线播放 | 午夜日本一区二区三区 | 91福利国产在线观一区二区 | 永久免费观看的毛片的网站下载 | 欧美精品日韩一区二区三区 |