欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

千鋒扣丁學(xué)堂HTML5培訓(xùn)之詳解element-ui表格中勾選checkbox

2019-09-02 13:47:34 4801瀏覽

今天千鋒扣丁學(xué)堂HTML5培訓(xùn)老師給大家分享一篇關(guān)于詳解element-ui表格中勾選checkbox，高亮當(dāng)前行的詳細(xì)介紹，首先大多數(shù)程序員遇到同樣的問題在做后臺(tái)管理系統(tǒng)的時(shí)候經(jīng)常需要操作表格，這里我們要實(shí)現(xiàn)的一個(gè)功能就是，勾選復(fù)選框，高亮顯示當(dāng)前行，也就是當(dāng)前行樣式改變。這是一個(gè)非常常見的使用場(chǎng)景，官網(wǎng)給我們提供了一個(gè)帶Checkbox的table表格，但是并沒有給出上述使用案例，解決辦法有很多，我簡(jiǎn)單總結(jié)下我自己的實(shí)現(xiàn)過程，希望能幫助到有同樣需求的小伙伴。

勾選表格中當(dāng)前項(xiàng)時(shí)會(huì)觸發(fā)selection-change事件，在<el-table>中綁定handleSelectionChange方法。

<el-table
 @selection-change="handleSelectionChange"
>

編寫handleSelectionChange方法，實(shí)現(xiàn)思路就是根據(jù)勾選當(dāng)前行的下標(biāo)，改變當(dāng)前樣式。但是elementtable表格中沒有獲取勾選后當(dāng)前行index的方法，這里主要通過兩個(gè)forEach遍歷實(shí)現(xiàn)。

在data中定義tableData的時(shí)候一定要設(shè)置id屬性，因?yàn)檫@里我們是通過id的對(duì)比來獲取當(dāng)前行的下標(biāo)。

tableData: [{
 id:0,
 date: '2016-05-03',
 name: '王小虎',
 address: '上海市普陀區(qū)金沙江路 1518 弄'
}

下列方法打印出來的i就是你要獲取的勾選行的索引值，我們?cè)赿ata中定義一個(gè)空數(shù)組，專門用來存儲(chǔ)選中項(xiàng)的下標(biāo)，方便使用。

handleSelectionChange(val) {
 var arr = [];
 val.forEach((val, index) => {
　　　this.tableData.forEach((v, i) => {
　　　　// id 是每一行的數(shù)據(jù)id
   if(val.id == v.id){
    // console.log(i);
    arr.push(i)
   }
  })
 })  
 this.multipleSelection = arr;
}

獲取到下標(biāo)之后就需要改變樣式，給<el-table>標(biāo)簽綁定修改當(dāng)前行樣式的方法rowStyle

<el-table
 @selection-change="handleSelectionChange"
 :row-class-name="rowStyle"
>

編寫rowStyle方法，思路是循環(huán)便利multipleSelection數(shù)組，取出存儲(chǔ)的下標(biāo)，與當(dāng)前行下標(biāo)做對(duì)比，如果相同則返回rowStyle，改變當(dāng)前行的樣式。

這里需要注意一個(gè)問題：

forEach中return無效！我們希望達(dá)到某一條件時(shí)，跳出循環(huán)，代碼終止，使用forEach進(jìn)行遍歷是無法實(shí)現(xiàn)的。

原因：forEach()無法在所有元素都傳遞給調(diào)用的函數(shù)之前終止遍歷！

    this.multipleSelection.forEach((v)=>{
 if(rowIndex === v){
  return 'rowStyle'
 }
})

解決方法：使用for替換forEach

rowStyle({row, rowIndex}){
 let arr = this.multipleSelection;
 for(let i = 0; i < arr.length; i++){
  if(rowIndex === arr[i]){
   return 'rowStyle'
  }
 } 
}

在style中定義選中行的樣式

</style>
 .rowStyle{
  background-color:red!important;
 }
</style>

另外如果想更改鼠標(biāo)移入的hover樣式，要注意需要在td上修改，因?yàn)槭录翘砑釉趖d身上的，在tr上修改無效。

.el-table{
 width: 1163px; 
 margin: 0 auto;
 .el-table__body{
  tr:hover>td{
   background-color:rgba(238,250,249,1)!important;
  }
 }
}

以上就是關(guān)于千鋒扣丁學(xué)堂HTML5培訓(xùn)之詳解element-ui表格中勾選checkbox的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，想要了解更多關(guān)于HTML5開發(fā)方面內(nèi)容的小伙伴，請(qǐng)關(guān)注扣丁學(xué)堂HTML5培訓(xùn)官網(wǎng)、微信等平臺(tái)，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育有專業(yè)的HTML5講師為您指導(dǎo)，此外扣丁學(xué)堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發(fā)實(shí)戰(zhàn)技能?？鄱W(xué)堂H5技術(shù)交流群：673883249。

                             

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開發(fā)VIP免費(fèi)公開課】  

查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>