objctの中のobjectをelementUiのtableで参照し表示したい
Q&A
Closed
解決したいこと
objctの中のobjectをelementUiのtableで参照し表示したい
objectの中の特定のキーにvalueとして更にobjectがある構造のデータをテーブルに表示することができず、困っています。
環境
"vue":"^2.6.14"
"element-ui":"^2.12.0"
該当するソースコード
<div>
<el-tabel
:data="tableData"
size="mini">
<el-table-column
align="center"
width="100">
<template slot="header" slot-scope="{}">
<el-checkbox
v-model="cheackAllItem"
@change="cheackItem"/>
</template>
<el-table-colmun>
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.cheack"
@change="cheackItem"/>
</template>
</el-table-column>
<el-table-column
:label="items"
width="100">
<template slot-scope="scope">
scope.row.item
</template>
</el-table-column>
<el-table-column
:label="value"
width="100">
<template slot-scope="scope">
scope.row.item
</template>
</el-table-column>
</el-table>
</div>
<script>
export default {
name:'test',
data () {
returun {
tableData:
[{item:"A", use:teue, child:[{item:"Z", use,true}},
{item:"B", use:teue},
{item:"C", use:teue}]
};
},
</script>
<template slot-scope="scope">
scope.row.child.item
</template>
自分で試したこと
child.itemなどを参照しようとしましたが取得できませんでした。
scope.row.itemでABCを表示することはできますが、ZのみやABCとZの表示ができません。
テーブルにABCZのアイテムを表示するにはどのようにすればいいでしょうか？
0 likes