使用element-ui中table expand展开行控制显示隐藏，隐藏小箭头列的方法，之展开一行内容
涉及知识点：
1、不点击小箭头，点击其他列中的某个按钮展开行内容。
2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了）
3、只展开一行内容
先直接上代码：
1 <template>
2 <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
3 <el-table-column label="商品 ID" prop="id" width="100">
4 </el-table-column>
5 <el-table-column label="商品名称" prop="name">
6 </el-table-column>
7 <el-table-column label="描述" prop="desc">
8 </el-table-column>
9 <el-table-column label="操作" width="100">
10 <template slot-scope="scope">
11 <el-button type="text" @click="toogleExpand(scope.row)">查看详情</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="商品名称">
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: '好滋好味鸡蛋仔1',
33 desc: '荷兰优质淡奶，奶香浓而不腻1',
34 }, {
35 id: '2',
36 name: '好滋好味鸡蛋仔2',
37 desc: '荷兰优质淡奶，奶香浓而不腻2',
38 }, {
39 id: '3',
40 name: '好滋好味鸡蛋仔3',
41 desc: '荷兰优质淡奶，奶香浓而不腻3',
42 }, {
43 id: '4',
44 name: '好滋好味鸡蛋仔4',
45 desc: '荷兰优质淡奶，奶香浓而不腻4',
46 }]
47 };
48 },
49 methods: {
50 toogleExpand(row) {
51 let $table = this.$refs.table;
52 $table.toggleRowExpansion(row)
53 }
54 }
55 }
56 </script>
我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：
自己项目中遇到的问题是想要隐藏小箭头列，无意间发现这篇文章，原来只需要设置 width="1" 就行了。
因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；
再设置此table的样式margin-left:1px；好了，完美实现。（自己的项目中没有遇到1px影响效果的情况，可以直接设置宽度为1px即可）
放上项目最终的效果图，无多出的1px边框。
同样的，toggleRowExpansion方法也支持手风琴效果，点击展开自己的同时关闭原先除自己之外的已打开的展开项，实现手风琴，修改methods→toogleExpand方法：
1 toogleExpand(row) {
2 let $table = this.$refs.table;
3 this.tableData5.map((item) => {
4 $table.toggleRowExpansion(item, false)
5 })
6 $table.toggleRowExpansion(row)
7 }
table的toggleRowExpansion方法可以传两个参数，第一个参数传row，第二个参数传false，意思是合闭expand。我们把每行的expand关闭一次，再把对应的行打开，这样就实现了手风琴效果了。
新的问题，当我们点击打开了手风琴，每次都至少有一个是打开状态的，这样很明显是bug了，我们做一下让已打开行的expand合闭。
bug原因：当我们点击已打开的expand想关闭它时，相当于走了一遍$table.toggleRowExpansion(row, false)后，又走了一遍$table.toggleRowExpansion(row)，所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。
修复toogleExpand方法：
1 toogleExpand(row) {
2 let $table = this.$refs.table;
3 this.tableData5.map((item) => {
4 if (row.id != item.id) {
5 $table.toggleRowExpansion(item, false)
6 }
7 })
8 $table.toggleRowExpansion(row)
9 }
点击展开内容时，遍历外层数组，找到除了当前点击的展开项之外的行，关闭除自己之外的已展开项，然后展开或者关闭当前点击的行。
嗯，就酱啦~
参考文章：https://www.cnblogs.com/jiajialove/p/11477679.html
