Question

示例代码：

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

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

我认为可以以某种方式访问父元素（在这种情况下为行）并像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表tdClass

1 个答案: