Vue.JS Bootstrap-vue 表 - API Laravel - 关系答案

【问题标题】：Vue.JS Bootstrap-vue Tables - API Laravel - RelationshipVue.JS Bootstrap-vue 表 - API Laravel - 关系
【发布时间】：2021-07-17 01:22:29
【问题描述】：

我正在使用带有 API Laravel 的 b-table (Bootstrap-vue)。

这是vue代码：

<TableCli
  :items="items"
  :fields="fields"
  :rows="rows"
  :perPage="perPage">
</TableCli>

data: function () {
return {
  mode: "save",
  item: {},
  items: [],
  paises: [{}],
  checked: 1,
  page: 1,
  perPage: 10,
  fields: [
    { key: "id", label: "Código", sortable: true },
    { key: "name", label: "Name", sortable: true },
    { key: "tva", label: "TVA", sortable: true },
    { key: "country_id", label: "Country", sortable: true},
    { key: "cp", label: "CP", sortable: true },
    { key: "city", label: "City", sortable: true },
    { key: "address", label: "Address", sortable: true },
    {
      key: "status",
      label: "Status",
      sortable: true,
      formatter: (value) => (value ? "Yes" : "No"),
    },
    { key: "actions", label: "Actions" }
  ],
};

方法：

methods: {
loadCli() {
  const url = `${baseApiUrl}/api/cli`;
  axios.get(url).then((res) => {
    this.items = res.data;
  });
},
loadCountrys() {
  const url = `${baseApiUrl}/api/country`;
  axios.get(url).then(res => {
    this.country = res.data
  })
},

我的表返回的是国家id，如何返回国家名称？

另外一个问题，如何在 Actions 列中添加操作按钮？编辑和删除按钮。

【问题讨论】：

标签： laravel vue.js relationship bootstrap-vue

【解决方案1】：

我认为这个 sn-p 回答了你的问题。主要思想是将slot 用于b-table。

new Vue({
  el: '#app',
  data() {
      return {
          table_fields: [
              {
                  key: "title",
                  label: "Title"
              },
              {
                  key: "user",
                  label: "User"
              },
              {
                  key: "id",
                  label: "Detail Button"
              }
           ],
           page_contents: [
               {
                   id: "title-id-1",
                   title: "title 1",
                   user: {
                       id: "user-id-1",
                       name: "name 1",
                   },        
               }
           ]
       }
   },
   methods: {
       do_sth(id) {
           console.log(id)
       }
   }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
    <b-table-lite striped small hover :items="page_contents" :fields="table_fields">
            <template #cell(id)="data">
                <b-button size="sm" @click='do_sth(data.value)'>Detail Button</b-button>
            </template>
            <template #cell(user)="data">
                <span> {{ data.value.id }} </span> 
                <span> || </span>
                <span> {{ data.value.name }} </span>
            </template>
        </b-table-lite>
</div>

【讨论】：