Problem explanation:
There are still some problems when using the table function in ElementUI of vue version. It can be said that the team is hungry. Documentation in this UI framework is very good, but there are still some methods that are confusing at first sight. Some tables'common function sample code is not very detailed. Write a blog about how to achieve accordion effect with this expandable form.
Let's start with an official sample code rendering of ElementUI

You can see that there is no automatic folding function for this expandable table in the official code. The last line I clicked on after I clicked on another tab is still in an unfolding state, and the way to manipulate it is only by clicking on the small arrow in the upper left corner to control the unfolding state of the line. The experience is not particularly good. That's a bit awful, but I later found in the later document that The methods contained a method called toggle Row Expansion, which was supposed to be officially intended to allow us to freely control the unfolding state. From the two parameters passed, one is row (the line id currently clicked) and the other is expend. Ed (line expansion status, boolean value) seems reasonable, but I just don't know how to use it, because I can't always get the value of expended parameter, a little angry, so this time we use another way to achieve this function.

1 <template>
 2   <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
 3     <el-table-column label="commodity ID" prop="id" width="100">
 4     </el-table-column>
 5     <el-table-column label="Name of commodity" prop="name">
 6     </el-table-column>
 7     <el-table-column label="describe" prop="desc">
 8     </el-table-column>
 9     <el-table-column label="operation" width="100">
10       <template slot-scope="scope">
11         <el-button type="text" @click="toogleExpand(scope.row)">See details</el-button>
12       </template>
13     </el-table-column>
14     <el-table-column type="expand" width="1">
15       <template slot-scope="props">
16         <el-form label-position="left" inline class="demo-table-expand">
17           <el-form-item label="Name of commodity">
18             <span>{{ props.row.name }}</span>
19           </el-form-item>
20         </el-form>
21       </template>
22     </el-table-column>
23   </el-table>
24 </template>
25 
26 <script>
27 export default {
28   data() {
29     return {
30       tableData5: [{
31         id: '1',
32         name: 'Good taste and delicious eggs 1',
33         desc: 'Dutch high-quality mild milk, milk fragrance but not greasy 1',
34       }, {
35         id: '2',
36         name: 'Good taste and delicious eggs 2',
37         desc: 'Dutch high-quality mild milk, milk fragrance but not greasy 2',
38       }, {
39         id: '3',
40         name: 'Good taste and delicious eggs 3',
41         desc: 'Dutch high-quality mild milk, milk fragrance but not greasy 3',
42       }, {
43         id: '4',
44         name: 'Good taste and delicious eggs 4',
45         desc: 'Dutch high-quality mild milk, milk fragrance but not greasy 4',
46       }]
47     };
48   },
49   methods: {
50     toogleExpand(row) {
51       let $table = this.$refs.table;
52       $table.toggleRowExpansion(row)
53     }
54   }
55 }
56 </script>

We usually click on the button to expand and view details, so we replace the arrow with the "View Details" button to expand and close through the toggle Row Expansion method. The effect is as follows:

Because I set < el-table-column type= "expand" width= "1"> </el-table-column> to have an extra 1px margin, we can put an empty div on the outer layer and set the style overflow:hidden;
Set the table's style margin-left:1px again; all right, perfect implementation.

Put on the final effect map of the project, no extra 1px border.