欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementUI多選框反選的實(shí)現(xiàn)代碼

 更新時(shí)間:2019年04月03日 09:37:02   作者:魷魚妹  
這篇文章主要介紹了elementUI多選框反選的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

思路:一開始選用elementUI官網(wǎng)例子,使用selection-change,但是它只顯示當(dāng)前改變的選擇,不能滿足我翻頁(yè)及檢索后還能選中數(shù)據(jù)的問題

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

后來(lái)查詢api,發(fā)現(xiàn)了另外2個(gè)api,頁(yè)面上的存在本地字段 glht,列表上選中的存在本地字段 yglht.

每次要計(jì)算頁(yè)面顯示的數(shù)據(jù)是列表的第幾條數(shù)據(jù),直接把對(duì)象放里面并不會(huì)勾選我上傳選中的數(shù)據(jù)。

emmm....知道有點(diǎn)蠢,但是我還沒想到別的辦法...

彈框:

<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="序號(hào)" 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 里,全選時(shí)與選中單個(gè)時(shí)所做的操作:

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

methods 里,獲取彈出框列表與選中數(shù)據(jù):

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 里,保存與取消單個(gè)時(shí)所做的操作:

save () {
 this.glht_modal = false
 localStorage.setItem('yglht', localStorage.getItem('glht'))
 this.yglht()
},
cancel () {
 this.glht_modal = false
 // 取消時(shí) 取在頁(yè)面上的值
 localStorage.setItem('glht', localStorage.getItem('yglht'))
 // this.toggleSelection(JSON.parse(localStorage.getItem('yglht')));  直接寫不好用
 this.listGet({})  // 獲取彈出框列表數(shù)據(jù),這里調(diào)用一次是因?yàn)榉乐乖俅未蜷_彈出框閃現(xiàn)之前選擇的內(nèi)容
 this.yglht()
},
yglht() {
  this.list = JSON.parse(localStorage.getItem('yglht'))
  // 處理this.list中地址、時(shí)間等頁(yè)面顯示問題
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文搞懂Vue里的過渡和動(dòng)畫

    一文搞懂Vue里的過渡和動(dòng)畫

    在Vue中,過渡和動(dòng)畫是一種用于在組件之間添加平滑過渡效果和動(dòng)畫效果的高級(jí)用法,Vue提供了一些內(nèi)置的過渡和動(dòng)畫功能,同時(shí)也支持自定義過渡和動(dòng)畫效果,本文就給大家介紹一些Vue中過渡和動(dòng)畫的高級(jí)用法,需要的朋友可以參考下
    2023-06-06
  • Vue中util的工具函數(shù)實(shí)例詳解

    Vue中util的工具函數(shù)實(shí)例詳解

    本文通過實(shí)例代碼給大家介紹了Vue中util的工具函數(shù),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • 使用 Vue.js 仿百度搜索框的實(shí)例代碼

    使用 Vue.js 仿百度搜索框的實(shí)例代碼

    本篇文章主要介紹了使用 Vue.js 仿百度搜索框的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-05-05
  • Vue 計(jì)算屬性 computed

    Vue 計(jì)算屬性 computed

    這篇文章主要介紹了Vue 計(jì)算屬性 computed,一般情況下屬性都是放到data中的,但是有些屬性可能是需要經(jīng)過一些邏輯計(jì)算后才能得出來(lái),那么我們可以把這類屬性變成計(jì)算屬性,下面我們來(lái)看看具體實(shí)例,需要的朋友可以參考一下
    2021-10-10
  • vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式

    vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式

    這篇文章主要介紹了vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue 彈窗時(shí) 監(jiān)聽手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))

    vue 彈窗時(shí) 監(jiān)聽手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))

    這篇文章主要介紹了vue 彈窗時(shí) 監(jiān)聽手機(jī)返回鍵關(guān)閉彈窗功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值(頁(yè)面不跳轉(zhuǎn)) ,需要的朋友可以參考下
    2019-05-05
  • 基于Vue制作組織架構(gòu)樹組件

    基于Vue制作組織架構(gòu)樹組件

    最近公司在做一個(gè)基于vue開發(fā)的項(xiàng)目,項(xiàng)目需要開發(fā)一個(gè)展示組織架構(gòu)的樹組件,在網(wǎng)上搜了半天,沒有找到合適的,下面小編給大家分享一個(gè)基于Vue制作組織架構(gòu)樹組件,需要的朋友參考下吧
    2017-12-12
  • vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地

    vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地

    這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue+element開發(fā)一個(gè)谷歌插件的全過程

    vue+element開發(fā)一個(gè)谷歌插件的全過程

    這篇文章主要給大家介紹了關(guān)于vue+element開發(fā)一個(gè)谷歌插件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • Vue?(Vuex)中?store?基本用法

    Vue?(Vuex)中?store?基本用法

    Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下
    2023-01-01

最新評(píng)論