亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

element ui中table組件如何實現將checkbox 選中后,高亮選中的行

element ui中table組件如何實現將checkbox 選中后,高亮選中的行

繁華開滿天機 2018-08-23 15:19:25
類似于這種選擇方式,希望將選中的行實現高亮,最主要的是我想要實現的是動態的,當我選中某一行后實現高亮
查看完整描述

1 回答

?
慕村9548890

TA貢獻1884條經驗 獲得超4個贊

我的解決方法用到了@selection-change="handleSelectionChange" :row-style="rowClass",在handleSelectionChange中取到所有checkbox選中的內容保存在selectData,然后監聽selectData 判斷選中行在table列表里面的位置,將所有的index保存在selectRow中,最后在rowClass中給對應的行添加背景色

data(){    return {
        selectRow:[],
        selectData:[]
    }
},
  methods: {    // 選中篩選結果時候
    handleSelectionChange(data) {      this.selectData = data;
    },    // 多選高亮選中行
    rowClass({row, rowIndex}){      if(this.selectRow.includes(rowIndex)){        return { "background-color": "rgba(185, 221, 249, 0.75)" }
      }
    }
  },
watch: {
    selectData(data) {      this.selectRow = [];      if (data.length > 0) {  
        data.forEach((item, index) => {          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    }
}


查看完整回答
反對 回復 2018-08-26
  • 1 回答
  • 0 關注
  • 4523 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號