我有一張桌子：
<b-table striped hover :items="coursesArray" :fields="fields"></b-table>
資料來自
coursesArray: [
{
id: "1",
name: "foo",
teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
teacherIds: ["A1", "A2", "A3"],
},
],
欄位是：
fields: [
{ key: "id", label: "Course ID" },
{ key: "name", label: "Course Name" },
{
key: "teacherEmails",
label: "Teacher Email",
formatter: "teacherEmailTCellFormat",
},
{ key: "teacherIds", label: "Teacher ID" },
],
這就是它在沒有格式化程式的情況下呈現的方式。
因此，我在欄位中添加了一個自定義格式化程式以洗掉括號和花括號。
我遇到的第一個問題是回圈回傳值中的所有專案teacherEmails不起作用。
teacherEmailTCellFormat(value) {
console.log(value)
value.forEach(item => {
return each[0]
}
}
第二個問題，我不明白為什么會這樣，如果我記錄傳遞給格式化程式的值，很明顯格式化程式函式被呼叫了兩次。
任何幫助或許可將不勝感激。
uj5u.com熱心網友回復：
您需要回傳一個陣列，您可以使用Array#map：
new Vue({
el:"#app",
data: () => ({
fields: [
{ key: "id", label: "Course ID" },
{ key: "name", label: "Course Name" },
{ key: "teacherEmails", label: "Teacher Email", formatter: "teacherEmailTCellFormat" },
{ key: "teacherIds", label: "Teacher ID" },
],
coursesArray: [
{
id: "1",
name: "foo",
teacherEmails: [{ 0: "sample1" }, { 1: "sample2" }, { 2: "sample3" }],
teacherIds: ["A1", "A2", "A3"],
}
]
}),
methods: {
teacherEmailTCellFormat(value) {
return value.map((item, i) => item[i]);
}
}
});<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table striped hover :items="coursesArray" :fields="fields"></b-table>
</div>注意：我假設鍵代表陣列中專案的索引，但您可以根據需要更改映射。主要問題是回傳陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/346178.html
上一篇：在所述陣列中保存陣列和物件