黑马智数Day3 - 技术栈

渲染基础Table列表

封装接口：

javascript 复制代码

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

具体实现：

javascript 复制代码

  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
      }
    }
  }

html 复制代码

  <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>

适配状态显示

javascript 复制代码

<el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />

formatStatus(row) {
  const MAP = {
    0: '可用',
    1: '已过期'
  }
  return MAP[row.cardStatus]
}

分页功能实现

页数分出来
点击每页的时候获取当前页的数据重新渲染到table上
通过实践获取到当前点击的是第几页
以当前拿到的页数作为参数去和后端要数据
把获取到的当前页的列表数据重新渲染到table组件上

搜索功能实现

收集查询字段数据

javascript 复制代码

<!-- 搜索区域 -->
<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-option
      v-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>
</div

data() {
    return {
      // 请求参数
      params: {
        page: 1,
        pageSize: 5,
        carNumber: null,
        personName: null,
        cardStatus: null
      },
      // 月卡状态
      cardStatusList: [
        {
          id: null,
          name: '全部'
        },
        {
          id: 0,
          name: '可用'
        },
        {
          id: 1,
          name: '已过期'
        }
      ]
    }
  }

调用接口获取数据

javascript 复制代码

doSearch() {
  // 调用接口之前把页数参数重置为1
  this.params.page = 1
  this.getCardList()
}

<el-button type="primary" class="search-btn" @click="doSearch">查询</el-button>