告别查询列表页面，VUE+IVIEW让低端重复劳动一去不复返

2023-09-05 19:57:58

在前端开发中，查询列表页面是一种非常常见的页面类型。它通常由一个查询表单和一个数据表格组成。查询表单用于用户输入查询条件，数据表格用于展示查询结果。这种页面类型在各种应用中都有广泛的应用，例如：

电商网站的商品列表页
CRM系统的客户列表页
ERP系统的订单列表页
OA系统的员工列表页

传统的查询列表页面往往需要前端工程师手工编写大量的代码。这不仅费时费力，而且容易出错。随着前端框架和组件库的兴起，前端工程师可以利用这些工具来快速构建查询列表页面。

在本文中，我们将介绍如何使用Vue和iView来构建一个查询列表页面。Vue是一个流行的前端框架，它具有简洁的语法和丰富的功能。iView是一个基于Vue的组件库，它提供了丰富的组件，可以帮助前端工程师快速构建各种类型的页面。

使用Vue和iView构建查询列表页面

首先，我们需要安装Vue和iView。

npm install vue
npm install iview

然后，我们需要在项目中创建一个新的Vue组件。

vue create my-project
cd my-project

接下来，我们需要在项目中引入Vue和iView。

import Vue from 'vue'
import iView from 'iview'

Vue.use(iView)

现在，我们可以开始构建查询列表页面了。

查询表单

查询表单用于用户输入查询条件。我们可以使用iView的表单组件来构建查询表单。

<template>
  <div class="query-form">
    <i-form :model="form" label-width="80px">
      <i-form-item label="姓名">
        <i-input v-model="form.name"></i-input>
      </i-form-item>
      <i-form-item label="性别">
        <i-select v-model="form.gender">
          <i-option value="男">男</i-option>
          <i-option value="女">女</i-option>
        </i-select>
      </i-form-item>
      <i-form-item label="年龄">
        <i-input-number v-model="form.age"></i-input-number>
      </i-form-item>
      <i-form-item>
        <i-button type="primary" @click="onSubmit">查询</i-button>
      </i-form-item>
    </i-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        gender: '',
        age: ''
      }
    }
  },
  methods: {
    onSubmit() {
      // 将查询条件提交给服务器
    }
  }
}
</script>

数据表格

数据表格用于展示查询结果。我们可以使用iView的数据表格组件来构建数据表格。

<template>
  <div class="data-table">
    <i-table :data="tableData" :columns="tableColumns"></i-table>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([])
    const tableColumns = ref([
      {
        title: '姓名',
        key: 'name'
      },
      {
        title: '性别',
        key: 'gender'
      },
      {
        title: '年龄',
        key: 'age'
      }
    ])

    return {
      tableData,
      tableColumns
    }
  }
}
</script>

分页控件

分页控件用于用户翻页。我们可以使用iView的分页控件组件来构建分页控件。

<template>
  <div class="pagination">
    <i-pagination :total="total" :page-size="10" @on-change="onChange"></i-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 100
    }
  },
  methods: {
    onChange(page) {
      // 根据当前页码加载数据
    }
  }
}
</script>

将查询表单、数据表格和分页控件组合起来

现在，我们可以将查询表单、数据表格和分页控件组合起来，形成一个完整的查询列表页面。

<template>
  <div>
    <QueryForm></QueryForm>
    <DataTable></DataTable>
    <Pagination></Pagination>
  </div>
</template>

<script>
import QueryForm from './QueryForm.vue'
import DataTable from './DataTable.vue'
import Pagination from './Pagination.vue'

export default {
  components: { QueryForm, DataTable, Pagination }
}
</script>