el-table 選中行與復選框相互聯(lián)動

需求:對el-table 選中行時復選框也被選中咆贬,選中復選框時觸發(fā)行的相應變化

(攏共分兩步)步驟:第一步:點擊行時觸發(fā)復選框的選擇或取消; 第二步:點擊復選框時觸發(fā)相應行的變化(問題關鍵在怎么獲取復選框選取的行)

1. 點擊行時觸發(fā)復選框的選擇或取消

// <template>
<el-table
            class="right-panel-table"
            :data="tableData"            
            @selection-change="(val) => handleSelectionChange(val,'ischeckboxTick')"
            ref="multipleTable"
            v-loading="planLoading"
            @cell-mouse-enter="handleMouseEnter"
            @cell-mouse-leave="handleMouseOut"
            @row-click="(row,column,event) => handleRowClick(row,column,event,'onclumn')"
            highlight-current-row
          >

//  <script>  添加row-click方法,點擊列表行時觸發(fā)
handleRowClick(row,column,event, onclumn){   
      if(onclumn === 'onclumn') {
        this.isonClunm = true;
      }
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
      if(row.flag) {
        this.selectSatitleLatLon(row);
      } else {
        this.unselectSatitleLatLon(row);
      }
}

添加完以上代碼后,點擊行阅羹,相應行前面的復選框會跟著選中或取消

2.點擊復選框時觸發(fā)相應行的變化(問題關鍵在怎么獲取復選框選取的行)

當點擊列表行時暑竟,先觸發(fā)row-click事件床蜘,然后再觸發(fā) selection-change事件晰洒,點擊復選框時只觸發(fā)selection-change事件,想要判斷出點擊復選框時觸發(fā)的是哪一行時糊闽,則需要對上一次選中的列表項和這次選中的列表項對比
// template部分同上
// <script>
handleSelectionChange(val, checkFlag) {
      let that = this;
      if(checkFlag === 'ischeckboxTick') {
        that.ischeckboxTick = true
      }
      // 獲取當前增加的或者減少的那條數(shù)據(jù)
      let n = {};
      let currentVal = [];
      val.forEach(item => {
        currentVal.push(item);
      })
      if(val.length > that.multipleSelection.length) {
        // 增加時比之前不一樣的某個值
        n = (val.filter(item => !that.multipleSelection.includes(item)))[0];
      } else {
        // 減少時與之前不一樣的值
        let oldSelect = [];
        that.multipleSelection.forEach(item => {
          oldSelect.push(item)
        })
        if(val.length === 0) {
          n = that.multipleSelection[0];
        } else {
          that.multipleSelection.forEach((item, index) => {
            let delIndex = 0;
            currentVal.forEach((item1, index1) => {
              if(item.sname === item1.sname && item.startTime === item1.startTime && item.endTime === item1.endTime) {
                delIndex = index;
                currentVal.splice(index1, 1);
                oldSelect.splice(delIndex, 1, '');    
              }
            })
          })
          oldSelect.forEach(item => {
            if(item !== '') {
              n = item
            }
          })
        }
      }

      that.multipleSelection = val;  // 選中的所有項
      that.isonClunm = false;
      that.ischeckboxTick = false;
    
    },
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末梳玫,一起剝皮案震驚了整個濱河市爹梁,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌提澎,老刑警劉巖卫键,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異虱朵,居然都是意外死亡,警方通過查閱死者的電腦和手機钓账,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門碴犬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人梆暮,你說我怎么就攤上這事服协。” “怎么了啦粹?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵偿荷,是天一觀的道長。 經(jīng)常有香客問我唠椭,道長跳纳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任贪嫂,我火速辦了婚禮寺庄,結果婚禮上,老公的妹妹穿的比我還像新娘力崇。我一直安慰自己斗塘,他們只是感情好,可當我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布亮靴。 她就那樣靜靜地躺著馍盟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪茧吊。 梳的紋絲不亂的頭發(fā)上贞岭,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天,我揣著相機與錄音饱狂,去河邊找鬼曹步。 笑死,一個胖子當著我的面吹牛休讳,可吹牛的內容都是我干的讲婚。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼俊柔,長吁一口氣:“原來是場噩夢啊……” “哼筹麸!你這毒婦竟也來了活合?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤物赶,失蹤者是張志新(化名)和其女友劉穎白指,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酵紫,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡告嘲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奖地。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片橄唬。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖参歹,靈堂內的尸體忽然破棺而出仰楚,到底是詐尸還是另有隱情,我是刑警寧澤犬庇,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布僧界,位于F島的核電站,受9級特大地震影響臭挽,放射性物質發(fā)生泄漏捂襟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一埋哟、第九天 我趴在偏房一處隱蔽的房頂上張望笆豁。 院中可真熱鬧,春花似錦赤赊、人聲如沸闯狱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽哄孤。三九已至,卻和暖如春吹截,著一層夾襖步出監(jiān)牢的瞬間瘦陈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工波俄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留晨逝,地道東北人。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓懦铺,卻偏偏與公主長得像捉貌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,925評論 2 344