Element-ui中el-table展开行

类似这样的需求还记录不记录呢,其实我觉得是没必要的,但是想来还是记录一下吧,因为element-ui里面组件本身也很多,其中el-table的配置样式需求更是很多很多,所以这还是决定来记录一下,以后再有类似的需求也有个印象可以来找一下不是。

展开行在el-table中以及提供了,使用也很简单,不过就是它只能点击左侧箭头icon来控制展开收缩,我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合(因为点击icon的时候不会触发row-click),然后展开的时候就得通过设置expand-row-keys 这个来控制收缩,注意使用这个必须要设置row-key

Element-ui中el-table展开行_第1张图片 Element-ui中el-table展开行_第2张图片

 

 

核心就是用到这四个配置来实现点击某行控制收缩 

另外这次还有就是样式也正好记录一下 (深色系系统),每次修改element-ui样式的时候有点儿烦烦的呢。

下面上个页面的完整代码吧 

人员定位分站责任划分



效果是这样的: 

Element-ui中el-table展开行_第3张图片 

当然展开后的逻辑可以自定义去写的,点击的当前行的数据都是可以拿到的,具体可以看上面代码。就这样吧,简单记录一下~ 

你可能感兴趣的:(vue,前端,vue.js,elementui,javascript)