<template>
<el-table
:data=
"tableData5"
style=
"width: 100%"
row-key=
"id"
:expand-row-keys=
"expands"
@row-click=
"rowClick"
>
<el-table-column type=
"expand"
>
<template slot-scope=
"props"
>
<el-form label-position=
"left"
inline
class
=
"demo-table-expand"
>
<el-form-item label=
"商品名稱"
>
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label=
"所屬店鋪"
>
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label=
"商品 ID"
>
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label=
"店鋪 ID"
>
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label=
"商品分類"
>
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label=
"店鋪地址"
>
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label=
"商品描述"
>
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label=
"商品 ID"
prop=
"id"
>
</el-table-column>
<el-table-column
label=
"商品名稱"
prop=
"name"
>
</el-table-column>
<el-table-column
label=
"描述"
prop=
"desc"
>
</el-table-column>
</el-table>
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color:
#99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script>
export
default
{
data() {
return
{
tableData5: [{
id:
'12987122'
,
name:
'好滋好味雞蛋仔'
,
category:
'江浙小吃、小吃零食'
,
desc:
'荷蘭優質淡奶，奶香濃而不膩'
,
address:
'上海市普陀區真北路'
,
shop:
'王小虎夫妻店'
,
shopId:
'10333'
}, {
id:
'12987123'
,
name:
'好滋好味雞蛋仔'
,
category:
'江浙小吃、小吃零食'
,
desc:
'荷蘭優質淡奶，奶香濃而不膩'
,
address:
'上海市普陀區真北路'
,
shop:
'王小虎夫妻店'
,
shopId:
'10333'
}, {
id:
'12987125'
,
name:
'好滋好味雞蛋仔'
,
category:
'江浙小吃、小吃零食'
,
desc:
'荷蘭優質淡奶，奶香濃而不膩'
,
address:
'上海市普陀區真北路'
,
shop:
'王小虎夫妻店'
,
shopId:
'10333'
}, {
id:
'12987126'
,
name:
'好滋好味雞蛋仔'
,
category:
'江浙小吃、小吃零食'
,
desc:
'荷蘭優質淡奶，奶香濃而不膩'
,
address:
'上海市普陀區真北路'
,
shop:
'王小虎夫妻店'
,
shopId:
'10333'
}],
// 要展開的行，數值的元素是row的key值
expands: []
}
},
methods:{
//在<table>里，我們已經設置row的key值設置為每行數據id：row-key="id"
rowClick(row, event, column) {
Array.prototype.remove =
function
(val) {
let
index =
this
.indexOf(val);
if
(index > -1) {
this
.splice(index, 1);
}
};
if
(
this
.expands.indexOf(row.id) < 0) {
this
.expands.push(row.id);
}
else
{
this
.expands.remove(row.id);
}
}
}
}
</script>