补充下 vue3 的吧,直接代码,样式忽略
<div class="table-container">
<el-table
:data="tableData"
border
ref="table"
>
<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-column
label="操作"
width="100"
>
<template #default="scoped">
<el-button
type="text"
@click="toogleExpand(scoped.row)"
>查看详情</el-button>
</template>
</el-table-column>
<el-table-column
type="expand"
width="1"
>
<template #default="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>
</div>
const tableData = ref<any[]>([{
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'
}] as any)
const table = ref()
const toogleExpand = (row) => {
tableData.value.map((item) => {
if (row.id != item.id) {
table.value.toggleRowExpansion(item, false)
}
})
table.value.toggleRowExpansion(row)
}