如何在 b-table 的 v-slot:cell() 模板中获取项目值 - BootstrapVue

Posted 2023-02-16

【中文标题】如何在 b-table 的 v-slot:cell() 模板中获取项目值 - BootstrapVue

【英文标题】：How to get item value in v-slot:cell() template of b-table - BootstrapVue

【发布时间】：2020-02-16 19:39:41

【问题描述】：

我是编程新手。我试图弄清楚如何绑定数据以获取链接：href 使用 store、vuex 和 bootstrap-vue 表工作。我为此花了4天时间，现在我快死了。请帮忙。

books.js(store, vuex)

books: [
    
      id: 1,
      name: "name 1",
      bookTitle: "book1",
      thumbnail: '../../assets/img/book01.jpeg',
      url: "https://www.google.com",
      regDate: '2019-10'
    ,
    
       id: 2,
      name: "name2",
      bookTitle: "book2",
      thumbnail: "book2",
      url: "http://www.yahoo.com",
      regDate: '2019-10'
    ,

BookList.vue

<script>
export default 
  name: "BookList",
  components: 
  ,
  computed: 
    fields() 
      return this.$store.state.fields
    ,
    books() 
      return this.$store.state.books
    ,
    bookUrl() 
      return this.$store.state.books.url
    
  ,
  data() 
    return 
      itemFields: this.$store.state.fields,
      items: this.$store.state.books,
      //url: this.$store.state.books.url
    
  

;
</script>

<template>
  <b-container>
    <b-table striped hover :items="items" :fields="itemFields" >
      <template v-slot:cell(thumbnail)="items">
          <img src="" >
      </template>
      <template v-slot:cell(url)="items">
          <b-link :href="bookUrl" >link</b-link>
      </template>
    </b-table>
  </b-container>
</template>

【参考方案1】：

单元格槽包含您通常感兴趣的两个属性：

item（当前行，或者准确地说，items 中的当前 item） value（单元格 - 或者，准确地说，item 中当前列的 value）。

因此，考虑到您的数据，在v-slot:cell(url)=" value, item " 的情况下，value 等价于item.url

以下任何一种都可以：

<template v-slot:cell(url)=" value ">
  <b-link :href="value">link</b-link>
</template>

<template v-slot:cell(url)="slot">
  <b-link :href="slot.value"> slot.item.bookTitle </b-link>
</template>

<template v-slot:cell(url)=" item ">
  <b-link :href="item.url"> item.bookTitle </b-link>
</template>

工作示例here。

---

请注意，您的问题包含一些可能会阻止您的代码工作的小问题（itemFields 被引用但未定义，未使用适当的 getter 等...）。有关详细信息，请查看工作示例。 并阅读文档！

【讨论】：

这太棒了。我的天啊。非常感谢你帮助我。有用！所有这些都完美无缺。并感谢您的注意。我真的很感激

非常感谢，关于 b-table 的文档有点混乱