html 表格展开行,element ui table（表格）实现点击一行展开功能

前言

element ui是一个非常不错的vue的UI框架，element对table进行了封装，简化了vue对表格的渲染。

element ui表格中有一个功能是展开行，在2.0版本官网例子中，只可以点击右箭头可以展开，我们的很多需求是点击某一行展开

那是不是无法实现呢？其实，借助element ui的一些属性，轻松实现点击某行展开，我们还是用2.0.9版本官网的例子，

对齐改造，使之可以做到这点

:data="tableData5"

style="width: 100%"

row-key="id"

:expand-row-keys="expands"

@row-click="rowClick">

{ { props.row.name }}

{ { props.row.shop }}

{ { props.row.id }}

{ { props.row.shopId }}

{ { props.row.category }}

{ { props.row.address }}

{ { props.row.desc