改变表中第一行的样式

我想改变表中第一行的样式，事情是它没有正确应用，我需要知道，如果我可以直接更改与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

改变表中第一行的样式

回答

相关问题