首先展示效果图,如下:

 很多时候我们要实现table表格的当前行下面也展示table表格出来,并且是完全独立的表头,那么就要使用iview组件库中的table表格的column属性中的type: 'expand',才可以展开下一层,如下图

 但是仅仅添加了expand属性是不够的,目前可以展开下一层级,但是下一层级里的内容是空白的,需要我们自己定义内容,对于我们要渲染表格来说,此时告诉大家一个小坑,就是我们通过render函数直接渲染“Table”是无效的,我发现怎么尝试,连表头都渲染不出来,更别提下面的数据了(也有可能是我还没有发现这样渲染的方法),因此经过很多渲染方式的尝试之后,我发现了一种可行的办法,就是通过自定义组件,再通过render函数来渲染自定义组件,而不是渲染Table标签,如下:

 此时又遇到另外一个坑,就是传值问题,一般情况下,我们通过render函数渲染的组件,如果要传值,我们都是使用props传值的,但是在这里不行,在子组件中通过props接收不到,因此在这里传值需要如上图所示,直接定义变量进行赋值,在子组件中直接通过props就可以接受到。

因此总结最重要的两点:第一:通过自定义的组件进行渲染,可以正常渲染出表格;第二:不要在render函数中通过prop传值,只需要直接定义变量进行赋值就好,子组件中才可以才props中获取到传过来的值;有了表格,又有了数据,此时表格不就可以正常渲染了吗,关于二级表格里面的操作,全都放在自定义组件里面去操作就可以了,完美解决,而且一点也不复杂。

Logo

前往低代码交流专区

更多推荐