改變表中第一行的樣式

我想改變表中第一行的樣式，事情是它沒有正確應用，我需要知道，如果我可以直接更改與CSS的CSS訪問表的第一行的特定標籤。改變表中第一行的樣式

基本上每次我檢查一個複選框時，它應該將我的行標題的顏色更改爲藍色，並且如果未選中，則不選中。

所以我這樣做：

<div class="col-md-3"> 
    <label class="checkbox-inline control-label col-md-10"><input v-model="hasHeader" type="checkbox">Header Row?</label> 
</div> 



<table class="table table-responsive"> 
    <tbody> 
     <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader}"> 
     <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="table.tableGrid[idx1][idx2]" type="text" class="borderTbl" value="HEY"></td> 
     </tr> 
    </tbody> 
    </table>

我計算checkHeader方法：

checkHeader (idx2) { 
     alert('CHECKHEADER') 
     if (this.hasHeader === true && idx2 === 0) { 
     return true 
     } else { 
     return false 
     } 
    }

有我的複選框辦法，我可以觸發這種改變到第一行，我知道我可以將CSS樣式應用到第一行，但我怎麼能在觸發器上執行此操作？任何幫助？

來源

2017-09-01 Filipe Costa

計算屬性不帶參數。你需要使用一種方法。 – Bert

對不起，我被困我用了一種方法 –

我怎麼可以使用計算和獲得該指數？ –

代碼應該看起來像這樣。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    tableRows:[1,2,3,4,5], 
 
    tableCols: [1,2,3], 
 
    hasHeader: false 
 
    }, 
 
    methods:{ 
 
    checkHeader (rowIndex) { 
 
     if (this.hasHeader === true && rowIndex === 0) { 
 
     return true 
 
     } else { 
 
     return false 
 
     } 
 
    } 
 
    } 
 
})

.headerRowDefault{ 
 
    background-color: blue; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/[email protected]"></script> 
 
<div id="app"> 
 
    <div class="col-md-3"> 
 
    <label class="checkbox-inline control-label col-md-10"><input v-model="hasHeader" type="checkbox">Header Row?</label> 
 
    </div> 
 

 

 

 
    <table class="table table-responsive"> 
 
    <tbody> 
 
     <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"> 
 
     <td class="table-success" v-for="(col,idx2) in tableCols">{{idx2}}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

顯然示例使用假的數據。我不知道實際的tableRows和tableCols應該是什麼。

來源

2017-09-01 18:42:01 Bert

'''做這個.table.hasHeader，我的問題 –

謝謝大家〜 –

@FilipeCosta我們都會犯有愚蠢的錯誤有時:) – Bert

改變表中第一行的樣式

回答

相關問題