Vue+Element-ui table type="expand" 如何动态显示行的展开符

Element-ui提供了动态展开行的功能,如图(截自官方文档):

Vue+Element-ui table type=

如图:通过点击 > 符号就可以展开这行隐藏的信息了,但是需求是有的行需要展开,有的不需要,不需要的行怎么隐藏 > 符号?

可以通过row-class-name方法实现。


getRowClassName({row, rowIndex}){
   if (row.groupSize == 0) {
       return 'row-expand-cover';
   }
}

说下思路:

1.为表格绑定row-class-name方法,在方法里判断此行是否需要展开,如果不需要,返回一个class属性row-expand-cover

Vue+Element-ui table type=

2.为row-expand-cover属性添加样式, 隐藏其内部的>符号

效果:

Vue+Element-ui table type=

 

 

你可能感兴趣的:(Vue)