Rumah > Soal Jawab > teks badan
Saya cuba mencipta .join()
pada tatasusunan di dalam jadual. Hasil yang dijangkakan ialah setiap kenderaan (dalam contoh di bawah) berada dalam satu baris.
Saya dah cuba guna .join("rn")
和 .join("<br />")
tapi tak berkesan. Apa yang saya terlepas?
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 />") } } } });
<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>
Coretan kod yang sama seperti di atas, tetapi pada CodePen.
P粉5877801032024-03-28 14:22:17
Andaikan anda mahu ia sentiasa berada pada baris yang berasingan (dan bukan hanya selepas mengklik butang dalam contoh), maka anda boleh menggunakan <b-table>
提供的插槽来自定义该列的内容,并使用一个简单的 v-for
来渲染它自己的 <div>
untuk setiap elemen.
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" } ] }; } });
sssccc sssccc {{ car }}
P粉1116277872024-03-28 12:39:47
Masalah yang anda lihat ialah kandungan tidak ditafsirkan jadi ia dipaparkan sebagai teks. Untuk melaraskan perkara ini, gunakan cell(key)
插槽。然后在槽中,使用 v-html
untuk mentafsir rentetan sebagai html.
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("
") } } } });
sssccc ssscccJoin Array