vue里使用elementUI里的el-table下拉树表格,如何定义个性化的子表格?

最近项目写到一个业务,首先需要展示各类分组的基本信息,然后需要点击每个分组展示该分组下子的所有具体信息

一开始我是打算用tab来展示就是首先父分组的名称就是各个不同的tab按钮,然后点击按钮再展示不同的子表格信息

but...产品说不行,要一开始就展示一个表格,然后每一行可以点击下拉,再展示一个子表格

然后我就在饿了么官网寻找有没有对应的组件,当我看见下面这个组件时很开心以为可以直接用了


image

但是,当我点开始发现并不是我想要的那样


image

这里的子表格并没有表头,而且和父表格的表头内容一样,并不是自定义的
然后又找了一个,这里也只是展示了每行信息的详情
image

这时候我们该怎么办呢?自己重新写个组件?还是直接把el的源码拿过来修改源码样式?写出来倒是不难,但是时间不允许啊,同时你还要考虑各种兼容性,以及样式风格

然后又看了一下上面这个代码,这里是个form表单,那我可不可以把它换成一个个性化的表格呢


image

然后我在代码里这样写