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

Question

示例代码：

   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 收到一个项目参数，它是单元格的值，因此您可以基于它应用样式。但我需要 return 基于相邻单元格值的样式。

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

可以吗？

Answer 1

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>

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

B-table tdClass based on adjacent cell value

javascript

vue.js

bootstrap-vue