时间戳

首页 > 解决方案 > 基于相邻单元格值的 B 表 tdClass

javascript - 基于相邻单元格值的 B 表 tdClass

问题描述

示例代码：

   export default {
      data() {
        return {
          fields: [
            { key: "some_key", tdClass: "someClass" },
            { key: "another_key"}
          ],
        },
      methods: {
        someClass(item) {
        if (item > 0) {
          return "table-success"
        }
      }

b-table 的 tdClass 接收一个 item 参数，它是单元格的值，因此您可以基于它应用样式。但我需要根据相邻单元格的值返回样式。

我认为可以以某种方式访问​​父元素（在这种情况下为 row）并像 row.another_key 一样访问它，但我在文档中没有找到任何信息。

有可能这样做吗？

标签： javascriptvue.jsbootstrap-vue

解决方案

tdClass 在调用时发送超过 3 个参数。(value, key, item). 因此，您可以使用第三个参数来访问另一个单元格。

window.onload = () => {
  new Vue({
    el: '#app',
    created() {
      for(let i = 0; i < 10; i++){      
        this.items.push({
          id: i + 1,
          email: "test@test.com"
        })
      }
    },
    data() {
      return {
        items: [],
        fields: [
          { key: 'id' },
          { key: 'email', tdClass: "addTdClass" }
        ]
      }
    },
    methods: {
      addTdClass(value, key, item) {
        if(item.id % 2)
          return "table-primary"
      }
    }
  })
}
<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table :items="items" :fields="fields">
  </b-table>
</div>

推荐阅读