项目背景:在一个页面中引入三个表格的需求(这里以两个为例子好了)
这里是失败的例子
cool-admin中的cl表格可以实现出现这两个表格
这是data中return回来的
使用封装好的onload方法,调用server接口,实现从后端获取数据展示出来
注意这里后端返回的数据格式必须是list数组,数组中对应的每一条数据和table中字段对应,这是组件封装好的必须使用list,切记
比如这里table中有两条数据值,那么页面显示的时候也会有两个列叫备注和说明,list返回的数据也只能是
[{remark:'备注1',des:'说明1'},{remark:'备注',des:'说明'}]
类似这种,页面就会展示两条数据。
但是由于是两个数据表,所以返回一个list数据无法分配的,因为单纯的cloums无法检测是哪个表对应了list中的哪些数据,返回两个list也是不行的,前面说过只能使用叫list的数组。。。。
所以这种方法只能pass了。。。。。。
正解:
前面的方式使用的是cl-table的方式,cool-admin是基于element-ui的框架,所以找到了element-ui作为解决方案了。
使用下面的方式就能插入很多表格了。。。
在之前写cl-table的地方替换成el-table
缩进的地方按照饿了么组件里那种写法就行,后面做的事就是从后端获取数据然后绑定在table1,table2上就行了。
我的做法是在刷新的钩子里面写了函数,回调获取了后端的数据,这里最开始在生命周期里写了不太成功放弃了。。。
然后就是这样。后端接口的数据那块就看返回是什么,直接赋值过来就行了
最后就是页面上有数据展示了。
刷新的钩子需要在cl-crud里面配置一下:onRefresh="onRefresh"
因为这个问题我忙活了半天,唉。