Vue3 + TypeScript 后台管理：用户列表查询与编辑

2023-10-05 08:40:40

前言

在上一篇文章中，我们已经完成了用户列表页面的基础搭建，并实现了用户数据的增删操作。今天，我们将继续完善用户列表功能，实现用户数据的查询和编辑功能。通过这两个功能的实现，我们将对 Vue3 + TypeScript 后台管理系统有更加深入的了解，并能够更好地满足用户管理的需求。

查询功能

1. 查询条件

在用户列表页面，我们需要提供查询条件，以便用户能够快速找到所需数据。常用的查询条件包括：

姓名
电话
邮箱
状态

2. 数据分页

当用户数据量较大时，需要对数据进行分页显示，以便用户能够方便地浏览和操作数据。常用的分页方式包括：

前端分页
服务端分页

前端分页是指在前端对数据进行分页处理，然后将分页后的数据渲染到页面上。这种方式比较简单，但是当数据量较大时，可能会影响页面的加载速度。

服务端分页是指在服务端对数据进行分页处理，然后将分页后的数据返回给前端。这种方式比较复杂，但是可以避免前端页面加载过慢的问题。

3. 查询实现

在 Vue3 + TypeScript 中，我们可以使用 v-model 指令来绑定查询条件，并使用 computed 属性来计算分页后的数据。具体实现如下：

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    // 查询条件
    const name = ref('')
    const phone = ref('')
    const email = ref('')
    const status = ref('')

    // 分页参数
    const currentPage = ref(1)
    const pageSize = ref(10)

    // 分页后的数据
    const paginatedData = computed(() => {
      // 获取所有用户数据
      const allData = [
        { id: 1, name: '张三', phone: '13800000001', email: 'zhangsan@example.com', status: '启用' },
        { id: 2, name: '李四', phone: '13800000002', email: 'lisi@example.com', status: '禁用' },
        // ...
      ]

      // 过滤数据
      let filteredData = allData.filter(item => {
        return (
          item.name.includes(name.value) &&
          item.phone.includes(phone.value) &&
          item.email.includes(email.value) &&
          item.status.includes(status.value)
        )
      })

      // 分页数据
      const startIndex = (currentPage.value - 1) * pageSize.value
      const endIndex = startIndex + pageSize.value
      return filteredData.slice(startIndex, endIndex)
    })

    return {
      name,
      phone,
      email,
      status,
      currentPage,
      pageSize,
      paginatedData
    }
  }
}
</script>

<template>
  <div>
    <!-- 查询条件 -->
    <div>
      <input type="text" v-model="name" placeholder="姓名" />
      <input type="text" v-model="phone" placeholder="电话" />
      <input type="text" v-model="email" placeholder="邮箱" />
      <select v-model="status">
        <option value="">全部</option>
        <option value="启用">启用</option>
        <option value="禁用">禁用</option>
      </select>
    </div>

    <!-- 用户列表 -->
    <table border="1" cellpadding="5" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>电话</th>
          <th>邮箱</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in paginatedData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.email }}</td>
          <td>{{ item.status }}</td>
          <td>
            <button @click="editUser(item)">编辑</button>
            <button @click="deleteUser(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div>
      <button @click="currentPage.value -= 1" :disabled="currentPage.value === 1">上一页</button>
      <button @click="currentPage.value += 1" :disabled="currentPage.value === Math.ceil(paginatedData.length / pageSize.value)">下一页</button>
    </div>
  </div>
</template>

编辑功能

1. 编辑页面设计

在用户列表页面，我们提供了编辑按钮，点击该按钮可以进入用户编辑页面。在编辑页面，我们需要提供以下字段：

姓名
电话
邮箱
状态

2. 数据更新

当用户在编辑页面修改了数据并点击保存按钮时，我们需要将修改后的数据更新到数据库中。具体实现如下：

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 当前用户数据
    const user = ref({
      id: 1,
      name: '张三',
      phone: '13800000001',
      email: 'zhangsan@example.com',
      status: '启用'
    })

    // 修改后的数据
    const updatedUser = ref({
      name: '',
      phone: '',
      email: '',
      status: ''
    })

    // 更新数据
    const updateUser = () => {
      // 更新数据库中的用户数据

      // 更新成功后，跳转回用户列表页面
      this.$router.push('/user-list')
    }

    return {
      user,
      updatedUser,
      updateUser
    }
  }
}
</script>

<template>
  <div>
    <!-- 编辑用户表单 -->
    <form @submit.prevent="updateUser">
      <input type="text" v-model="updatedUser.name" placeholder="姓名" />
      <input type="text" v-model="updatedUser.phone" placeholder="电话" />
      <input type="text" v-model="updatedUser.email" placeholder="邮箱" />
      <select v-model="updatedUser.status">
        <option value="启用">启用</option>
        <option value="禁用">禁用</option>
      </select>
      <button type="submit">保存</button>
    </form>
  </div>
</template>