【vue3+ts后台管理】商品列表完成

【vue3+ts后台管理】商品列表完成

文章目录

​​数据获取和搜索​​​​商品列表​​​​商品列表分页​​​​商品列表查询功能​​

数据获取和搜索

在 request/api.ts 中增加获取商品列表的接口

//商品列表export function getGoodsList(){ return service({ url:'/getGoodsList', method:'get', })}

修改 GoodsView.vue ，打印接口返回数据

我们设计商品列表样式为头部为一个搜索框，搜索后在下面展示商品列表。我们根据 ​​行内表单​​ 的相关代码，复制过来即可完成搜索框

我们在 type 文件夹下新建 goods.ts

export interface ListInt{ userId:number, id:number, title:string, introduce:string}interface selectIntData{ title:string, introduce:string, page:number,//页码 count:number,//总条数 size:number//默认一页显示几条}export class InitData{ selectData:selectIntData = { title:'', introduce:'', page:1, count:0, size:10 } list:ListInt[] = []//展示的内容数据}

然后修改 GoodsView.vue

商品列表

我们根据 ​​表格​​ 来展示商品列表

商品列表分页

商品列表查询功能

查询按钮上有事件 ​​onSubmit​​，我们增加这个方法，当标题或详情输入框中有查询内容时，过滤出包含输入内容的数组，赋值给变量 arr。如果两个输入框都没查询内容，直接把原来全部列表数据赋值给变量 arr 即可

最后更新页码数据，再把 arr 赋值给展示表格数据的 data.list

const onSubmit = () => { //console.log(data.selectData.title,data.selectData.introduce) let arr: ListInt[] = [] //查询条件是否有值 if (data.selectData.title || data.selectData.introduce) { if (data.selectData.title) { //将过滤出来的数组赋值给arr arr = data.list.filter((value) => { return value.title.indexOf(data.selectData.title) !== -1 }) } if (data.selectData.introduce) { //将过滤出来的数组赋值给arr arr = data.list.filter((value) => { return value.introduce.indexOf(data.selectData.introduce) !== -1 }) } } else { arr = data.list } data.selectData.count = arr.length data.list = arr }

为了方便观察数据，我们把默认每页10条数据，改为每页5条数据。所以，我们修改 goods.ts

export class InitData{ selectData:selectIntData = { ...... size:5 } list:ListInt[] = []//展示的内容数据}

同时，分页组件中，size 用于设置每页显示的页码数量，所以我们修改页面中的分页组件

可以看到能搜索出结果了，但是还需要完善，当我们删除搜索的关键字时，列表应该恢复到为筛选之前的全部数据，所以我们进行监听，当两个搜索条件都为空时，重新获取列表数据 或者 我们可以在最开始获取完列表数据后再用一个数组存储原始数据。

//监听输入框的两个属性 watch([()=>data.selectData.title,()=>data.selectData.introduce],()=>{ if(data.selectData.title == '' && data.selectData.introduce == ''){ getGoodsList().then(res => { data.list = res.data data.selectData.count = res.data.length }) } })

最后完善下代码，把获取商品列表提取出来成为一个方法，然后在 onMounted 中调用，在监听输入框的两个属性时，也调用这个方法

export default defineComponent({ name: 'HomeView', setup() { const data = reactive(new InitData()) const getGoods = ()=>{ getGoodsList().then(res => { data.list = res.data data.selectData.count = res.data.length }) } onMounted(()=>{ getGoods() }) ...... //监听输入框的两个属性 watch([()=>data.selectData.title,()=>data.selectData.introduce],()=>{ if(data.selectData.title == '' && data.selectData.introduce == ''){ getGoods() } }) return { ...... } }, components: {},});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。