html表格一行的隐藏和显示,使用element-ui中table expand展开行控制显示隐藏，隐藏小箭头列的方法，之展开一行内容...

涉及知识点：

1、不点击小箭头，点击其他列中的某个按钮展开行内容。

2、隐藏小箭头列(既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了)

3、只展开一行内容

先直接上代码：

1

2

3

4

5

6

7

8

9

10

11 查看详情

12

13

14

15

16

17

18 {{ props.row.name }}

19

20

21

22

23

24

25

26

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

我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：

自己项目中遇到的问题是想要隐藏小箭头列，无意间发现这篇文章，原来只需要设置 width="1" 就行了。

因为我设置了 会多出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