参考网址:
https://www.jianshu.com/p/c064db86c559?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
实现思路:
1. table 添加 ref="refTable" 引用 该table
2. table 添加 @row-click="clickTable" 点击事件
3. 点击时,调用table的方法 toggleRowExpansion ,展开/关闭
参考API : https://element.eleme.cn/#/zh-CN/component/table
clickTable(row,index,e){
//调用,table的方法,展开/折叠 行
this.$refs.refTable.toggleRowExpansion(row)
}
此处贴的是别人的代码:
1 <template>
2 <el-table
3 :data="tableData5"
4 @row-click="clickTable"
5 ref="refTable"
6 style="width: 100%">
7 <el-table-column type="expand">
8 <template slot-scope="props">
9 <el-form label-position="left" inline class="demo-table-expand">
10 <el-form-item label="商品名称">
11 <span>{{ props.row.name }}</span>
12 </el-form-item>
13 <el-form-item label="所属店铺">
14 <span>{{ props.row.shop }}</span>
15 </el-form-item>
16 <el-form-item label="商品 ID">
17 <span>{{ props.row.id }}</span>
18 </el-form-item>
19 <el-form-item label="店铺 ID">
20 <span>{{ props.row.shopId }}</span>
21 </el-form-item>
22 <el-form-item label="商品分类">
23 <span>{{ props.row.category }}</span>
24 </el-form-item>
25 <el-form-item label="店铺地址">
26 <span>{{ props.row.address }}</span>
27 </el-form-item>
28 <el-form-item label="商品描述">
29 <span>{{ props.row.desc }}</span>
30 </el-form-item>
31 </el-form>
32 </template>
33 </el-table-column>
34 <el-table-column
35 label="商品 ID"
36 prop="id">
37 </el-table-column>
38 <el-table-column
39 label="商品名称"
40 prop="name">
41 </el-table-column>
42 <el-table-column
43 label="描述"
44 prop="desc">
45 </el-table-column>
46 </el-table>
47 </template>
48
49 <style>
50 .demo-table-expand {
51 font-size: 0;
52 }
53 .demo-table-expand label {
54 width: 90px;
55 color: #99a9bf;
56 }
57 .demo-table-expand .el-form-item {
58 margin-right: 0;
59 margin-bottom: 0;
60 width: 50%;
61 }
62 </style>
63
64 <script>
65 export default {
66 data() {
67 return {
68 tableData5: [{
69 id: '12987122',
70 name: '好滋好味鸡蛋仔',
71 category: '江浙小吃、小吃零食',
72 desc: '荷兰优质淡奶,奶香浓而不腻',
73 address: '上海市普陀区真北路',
74 shop: '王小虎夫妻店',
75 shopId: '10333'
76 }, {
77 id: '12987123',
78 name: '好滋好味鸡蛋仔',
79 category: '江浙小吃、小吃零食',
80 desc: '荷兰优质淡奶,奶香浓而不腻',
81 address: '上海市普陀区真北路',
82 shop: '王小虎夫妻店',
83 shopId: '10333'
84 }, {
85 id: '12987125',
86 name: '好滋好味鸡蛋仔',
87 category: '江浙小吃、小吃零食',
88 desc: '荷兰优质淡奶,奶香浓而不腻',
89 address: '上海市普陀区真北路',
90 shop: '王小虎夫妻店',
91 shopId: '10333'
92 }, {
93 id: '12987126',
94 name: '好滋好味鸡蛋仔',
95 category: '江浙小吃、小吃零食',
96 desc: '荷兰优质淡奶,奶香浓而不腻',
97 address: '上海市普陀区真北路',
98 shop: '王小虎夫妻店',
99 shopId: '10333'
100 }]
101 }
102 },
103 methods: {
104 clickTable(row,index,e){
105 this.$refs.refTable.toggleRowExpansion(row)
106 }
107 }
108