Vue.js新手入门实践 - 表单、列表、搜索与分页示例

2024-01-27 05:42:02

1. Vue.js入门 - 概述

Vue.js是一个渐进式JavaScript框架，它允许您以一种声明性方式构建用户界面。它可以帮助您轻松创建响应式、可复用的组件，并且易于上手。

2. Element-ui简介

Element-ui是一个基于Vue.js的组件库，它提供了丰富的UI组件，包括表单、按钮、表格、布局、导航等，可以帮助您快速构建出美观、实用的用户界面。

3. 搭建Vue.js开发环境

首先，我们需要安装Vue.js和Element-ui。您可以使用npm或yarn进行安装。

npm install vue
npm install element-ui

安装完成后，我们需要创建一个Vue.js项目。您可以使用Vue CLI进行创建。

vue create my-project

4. 创建表单添加、列表展示页面

在src目录下，创建一个components文件夹，并在其中创建一个名为Form.vue的文件。这是我们的表单组件。

<template>
  <el-form :model="form">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    submit() {
      // 这里可以做一些表单提交的逻辑
      console.log(this.form)
    }
  }
}
</script>

在src目录下，创建一个views文件夹，并在其中创建一个名为List.vue的文件。这是我们的列表组件。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20
        },
        {
          name: '李四',
          age: 30
        },
        {
          name: '王五',
          age: 40
        }
      ]
    }
  }
}
</script>

5. 添加搜索和分页功能

在src目录下，创建一个store文件夹，并在其中创建一个名为index.js的文件。这是我们的Vuex store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    currentPage: 1,
    pageSize: 10,
    tableData: [
      {
        name: '张三',
        age: 20
      },
      {
        name: '李四',
        age: 30
      },
      {
        name: '王五',
        age: 40
      }
    ],
    searchValue: ''
  },
  mutations: {
    setCurrentPage(state, page) {
      state.currentPage = page
    },
    setPageSize(state, size) {
      state.pageSize = size
    },
    setTableData(state, data) {
      state.tableData = data
    },
    setSearchValue(state, value) {
      state.searchValue = value
    }
  },
  getters: {
    getTableData: state => {
      // 这里可以对tableData进行一些处理，比如搜索、分页等
      return state.tableData
    }
  }
})

export default store

在src目录下，创建一个components文件夹，并在其中创建一个名为Pagination.vue的文件。这是我们的分页组件。

<template>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    @current-change="handleCurrentPageChange"
    @size-change="handlePageSizeChange"
  ></el-pagination>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleCurrentPageChange(page) {
      this.currentPage = page
      this.$emit('update:currentPage', page)
    },
    handlePageSizeChange(size) {
      this.pageSize = size
      this.$emit('update:pageSize', size)
    }
  }
}
</script>

在src目录下，创建一个views文件夹，并在其中创建一个名为Index.vue的文件。这是我们的主页面。

<template>
  <div>
    <Form v-model="form"></Form>
    <List :table-data="tableData"></List>
    <Pagination :table-data="tableData" v-model="currentPage" v-model="pageSize"></Pagination>
  </div>
</template>

<script>
import Form from '../components/Form.vue'
import List from '../components/List.vue'
import Pagination from '../components/Pagination.vue'
import store from '../store'

export default {
  components: {
    Form,
    List,
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: []
    }
  },
  computed: {
    tableData() {
      // 这里可以对tableData进行一些处理，比如搜索、分页等
      return store.getters.getTableData
    }
  },
  created() {
    // 初始化数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 这里可以从服务器端获取数据
      this.tableData = [
        {
          name: '张三',
          age: 20
        },
        {
          name: '李四',
          age: 30
        },
        {
          name: '王五',
          age: 40
        }
      ]
    }
  }
}
</script>