需求如上,点击右边的按钮显示明细表格
不知道该怎么隐藏掉展开收起的图标,研究官网搞了大半天
代码如下:
<template>
<el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
<el-table-column label="商品 ID" prop="id" width="100">
</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 slot-scope="scope">
<el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ props.row.age }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData5: [
{
id: '1',
name: '好滋好味鸡蛋仔1',
desc: '荷兰优质淡奶,奶香浓而不腻1',
age: 11,
},
{
id: '2',
name: '好滋好味鸡蛋仔2',
desc: '荷兰优质淡奶,奶香浓而不腻2',
age: 11,
},
{
id: '3',
name: '好滋好味鸡蛋仔3',
desc: '荷兰优质淡奶,奶香浓而不腻3',
age: 11,
},
{
id: '4',
name: '好滋好味鸡蛋仔4',
desc: '荷兰优质淡奶,奶香浓而不腻4',
age: 11,
},
],
};
},
methods: {
toogleExpand(row) {
const $table = this.$refs.table;
this.tableData5.forEach(item => {
if (row.id !== item.id) {
$table.toggleRowExpansion(item, false);
}
});
$table.toggleRowExpansion(row);
},
},
};
</script>
网友评论