Vue3|Vue3 列表界面数据展示详情 Vue3列表界面数据展示详情

一、列表界面展示示例

2、进行数据显示

2.1、组件在列表显示
2.2、接口返回数据在列表显示
2.3、接口数据改造
2.4、list列表一行显示为多条数据
2.5、列表内容前图标样式修改

一、列表界面展示示例现在要做的就是把打到页面的数据，带样式，也就是说好看点显示。
之前我们在《Vue3（二）集成Ant Design Vue》这篇文章中，有提及组件的使用，对于一个前端不是很好（后端也不咋的），本着拿来主义，我们能现成的是最好、最省事的方式了。
直白点说就是，找Ant Design Vue现成的组件，将列表数据按组件样式显示到界面上。
1、挑选自己喜欢的列表样式
从https://2x.antdv.com/components/list-cn中，找到list列表，找到自己喜欢的风格，
如下图所示：

文章图片

2、进行数据显示

2.1、组件在列表显示接下来，我们只需要在home里进行修改即可，找到刚才对应组件的位置，把对应代码拷贝到home中，然后在进行修改即可，
示例代码如下：

重新编译运行，查看效果如下：
【Vue3|Vue3 列表界面数据展示详情】

文章图片

2.2、接口返回数据在列表显示明显现在，可以看到想要用的列表样式已经在页面中成功展示了，但这并不是我想要的，我想要的是后端接口返回数据在此处展示，也就是数据源，接下来,我们再次调整Home的代码，
示例代码如下：

.ant-layout-sider{float: left; }

重新编译运行，查看效果如下：

文章图片

2.3、接口数据改造很明显，列表数据太少，我对接口进行改造，让其返回多条数据。
我们从service中，不难看出我们做的是，不管传入什么，都是写死的走的模糊查询，这里我们改成动态SQL即可，
示例代码如下：

package com.rongrong.wiki.service; import com.rongrong.wiki.domain.EBook; import com.rongrong.wiki.domain.EBookExample; import com.rongrong.wiki.mapper.EBookMapper; import com.rongrong.wiki.req.EBookReq; import com.rongrong.wiki.resp.EBookResp; import org.springframework.stereotype.Service; import org.springframework.util.ObjectUtils; import javax.annotation.Resource; import java.util.List; import static com.rongrong.wiki.util.CopyUtil.copyList; /** * @author rongrong * @version 1.0 * @description * @date 2021/10/13 23:09 */@Servicepublic class EBookService {@Resourceprivate EBookMapper eBookMapper; public List list(EBookReq eBookReq) {EBookExample eBookExample = new EBookExample(); //此处代码的意思相当于，搞了一个Sql的where条件EBookExample.Criteria criteria = eBookExample.createCriteria(); //划波浪线为不推荐使用，这里我们去看源代码做个替换即可if(!ObjectUtils.isEmpty(eBookReq.getName())){criteria.andNameLike("%"+eBookReq.getName()+"%"); }List eBookList = eBookMapper.selectByExample(eBookExample); //List eBookRespList = new ArrayList<>(); //for (EBook eBook: eBookList) {////EBookResp eBookResp = new EBookResp(); //////spring boot 自带的BeanUtils完成对象的拷贝////BeanUtils.copyProperties(eBook, eBookResp); ////eBookResp.setId(12345L); ////单体复制//EBookResp copy = copy(eBook, EBookResp.class); //eBookRespList.add(copy); //}//列表复制List respList = copyList(eBookList, EBookResp.class); return respList; }}

查看接口返回数据，如下：