Question

我正在尝试更改表格中第一行的样式，事情是它没有正确应用，我需要知道我是否可以直接更改带有访问第一行的特定标记的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样式应用到第一行，但我怎么能在触发器上执行此操作？有什么帮助吗？

Answer 1

代码看起来应该是这样的。

＆＃13;

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
      }
    }
  }
})

＆＃13;

.headerRowDefault{
  background-color: blue;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.4.2"></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>

＆＃13;

显然，该示例使用虚假数据。我不知道实际的tableRows和tableCols应该是什么。

更改表格中第一行的样式

1 个答案: