黑马智数Day3

渲染基础Table列表

封装接口：

export function getCardListAPI(params) {return request({url: '/parking/card/list',params})
}

具体实现：

  import { getCardListAPI } from '@/apis/card'export default {data() {return {// 请求参数params: {page: 1,pageSize: 10},// 月卡列表cardList: []}},mounted() {this.getCardList()},methods: {async getCardList() {const res = await getCardListAPI(this.params)this.cardList = res.data.rows}}}

  <el-table style="width: 100%" :data="cardList"><el-table-column type="index" label="序号" /><el-table-column label="车主名称" prop="personName" /><el-table-column label="联系方式" prop="phoneNumber" /><el-table-column label="车牌号码" prop="carNumber" /><el-table-column label="车辆品牌" prop="carBrand" /><el-table-column label="剩余有效天数" prop="totalEffectiveDate" /><el-table-column label="操作" fixed="right" width="180"><template #default="scope"><el-button size="mini" type="text">续费</el-button><el-button size="mini" type="text">查看</el-button><el-button size="mini" type="text">编辑</el-button><el-button size="mini" type="text">删除</el-button></template></el-table-column></el-table>

适配状态显示

<el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />formatStatus(row) {const MAP = {0: '可用',1: '已过期'}return MAP[row.cardStatus]
}

分页功能实现

1. 页数分出来

2. 点击每页的时候获取当前页的数据重新渲染到table上

          1. 通过实践获取到当前点击的是第几页

          2. 以当前拿到的页数作为参数去和后端要数据

          3. 把获取到的当前页的列表数据重新渲染到table组件上

搜索功能实现

收集查询字段数据

<!-- 搜索区域 -->
<div class="search-container"><span class="search-label">车牌号码：</span><el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" /><span class="search-label">车主姓名：</span><el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" /><span class="search-label">状态：</span><el-select v-model="params.cardStatus"><el-optionv-for="item in cardStatusList":key="item.id":value="item.id":label="item.name"/></el-select><el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>
</divdata() {return {// 请求参数params: {page: 1,pageSize: 5,carNumber: null,personName: null,cardStatus: null},// 月卡状态cardStatusList: [{id: null,name: '全部'},{id: 0,name: '可用'},{id: 1,name: '已过期'}]}}

调用接口获取数据

doSearch() {// 调用接口之前把页数参数重置为1this.params.page = 1this.getCardList()
}<el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>