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

心已赠人 2022-03-08 05:08 940阅读 0赞

Element-ui提供了动态展开行的功能，如图（截自官方文档）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70][]

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

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

<el-table
              :data="tableData"
              style="width: 100%" :row-class-name="getRowClassName" >
    </el-table>

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

说下思路：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70 1][]

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70]: /images/20220308/f35bb51f164e412ea2a945c9bbff228d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70 1]: /images/20220308/92a42aca7f1f424d90fd2efe09d8d374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dZQTE5OTM_size_16_color_FFFFFF_t_70 2]: /images/20220308/fe7f5c2157dd4c92bbf0012c44dd5a79.png