搜索

首页  >  问答  >  正文

在 Bootstrap 表中中断行:在 Bootstrap 表中实现行中断的指南

我正在尝试在表内的数组上创建 .join() 。预期结果是每辆车(在下面的示例中)位于一排。

我尝试过使用 .join("\r\n").join("<br />"),但它不起作用。我错过了什么?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

new Vue({

  el: "#table",

  data() {

    return {

      items: [

        { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },

        { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },

        { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },

        { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }

      ],

      fields: [

        { key: "firstname", label: "First name" },

        { key: "lastname", label: "Last name" },

        { key: "cars", label: "Cars" }

      ]

    };

  },

  methods: {

    join() {

      for (let item of this.items) {

        item.cars = item.cars.join("<br />")

      }

    }

  }

});

1

2

3

4

5

6

7

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

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

 

<div id="table">

  <b-button @click="join">Join Array</b-button>

  <b-table :fields="fields" :items="items" />

</div>

与上面相同的代码片段,但在 CodePen 上。

P粉957661544P粉957661544310 天前415

全部回复(2)我来回复

  • P粉587780103

    P粉5877801032024-03-28 14:22:17

    假设您希望它始终位于单独的行上(并且不仅仅是在单击示例中的按钮之后),那么您可以使用 <b-table> 提供的插槽来自定义该列的内容,并使用一个简单的 v-for 来渲染它自己的 <div> 中的每个元素。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    new Vue({

      el: "#table",

      data() {

        return {

          items: [

            { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },

            { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },

            { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },

            { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }

          ],

          fields: [

            { key: "firstname", label: "First name" },

            { key: "lastname", label: "Last name" },

            { key: "cars", label: "Cars" }

          ]

        };

      }

    });

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    sssccc

    sssccc

     

    <div id="table">

      <b-table :fields="fields" :items="items">

        <template #cell(cars)="{ value }">

          <div v-for="car in value" :key="car">

            {{ car }}

          </div>

        </template>

      </b-table>

    </div>

    回复
    0
  • P粉111627787

    P粉1116277872024-03-28 12:39:47

    您看到的问题是内容未被解释,因此它显示为文本。要对此进行调整,请使用 cell(key) 插槽。然后在槽中,使用 v-html 来解释字符串作为 html。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    new Vue({

      el: "#table",

      data() {

        return {

          items: [

            { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] },

            { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] },

            { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] },

            { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] }

          ],

          fields: [

            { key: "firstname", label: "First name" },

            { key: "lastname", label: "Last name" },

            { key: "cars", label: "Cars" }

          ]

        };

      },

      methods: {

        join() {

          for (let item of this.items) {

            item.cars = item.cars.join("<br>")

          }

        }

      }

    });

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    sssccc

    sssccc

     

    <div id="table">

      <b-button @click="join">Join Array</b-button>

      <b-table :fields="fields" :items="items">

          <template #cell(cars)="data">

            <span v-html="data.value"></span>

          </template>

      </b-table>

    </div>

    回复
    0
  • 取消回复