使用elementUI 表格展开一行

需求：表格可以展开（只展开一行），里面的内容由后台接口返回

效果：

image.png

之前做的是每点开一次，内容从接口获取，但是有一个bug没解决。就是每次点开的时候数据是上一次的数据，猜测可能是延迟问题，不能及时更新上。所以跟后台商量了一下，所有的数据一次性返回。

开始！

一、前提：全局引用elementUI插件

自行根据element官网引用

二、在HTML页面引用表格组件

image.png

三、数据相关

workList：后台获取的表格数据
展开用的slot占位 props.row就是每一项数据的内容
data里的内容

image.png

四、只展开一行，点击其他行后自动收起上一个

找到每一项的key值（独一无二）本例是work_code

image.png