vue实现用户信息表

Vue 实现用户信息表的方法

使用 Vue CLI 创建项目

安装 Vue CLI 并初始化项目：

npm install -g @vue/cli
vue create user-info-table
cd user-info-table

安装必要的依赖

根据需求安装 Element UI 或 Vuetify 等 UI 框架：

npm install element-ui

创建用户信息表组件

在 src/components 目录下创建 UserTable.vue 文件：

<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 25, email: 'zhangsan@example.com' },
        { name: '李四', age: 30, email: 'lisi@example.com' }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('编辑', row)
    },
    handleDelete(row) {
      console.log('删除', row)
    }
  }
}
</script>

添加表单编辑功能

扩展组件以支持编辑功能：

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" title="编辑用户">
      <el-form :model="currentUser">
        <el-form-item label="姓名">
          <el-input v-model="currentUser.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="currentUser.age"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="currentUser.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      currentUser: {}
    }
  },
  methods: {
    handleEdit(row) {
      this.currentUser = {...row}
      this.dialogVisible = true
    },
    saveUser() {
      // 更新逻辑
      this.dialogVisible = false
    }
  }
}
</script>

实现数据持久化

添加与后端 API 的交互：

methods: {
  async fetchUsers() {
    const response = await axios.get('/api/users')
    this.users = response.data
  },
  async saveUser() {
    await axios.put(`/api/users/${this.currentUser.id}`, this.currentUser)
    this.dialogVisible = false
    this.fetchUsers()
  }
},
created() {
  this.fetchUsers()
}

添加表单验证

在表单中添加验证规则：

data() {
  return {
    rules: {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]
    }
  }
}

响应式布局优化

使用 CSS 或 UI 框架的响应式功能确保表格在不同设备上显示良好：

@media (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }
}

组件注册与使用

在 main.js 中注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

在父组件中使用：

<template>
  <div id="app">
    <user-table></user-table>
  </div>
</template>

<script>
import UserTable from './components/UserTable.vue'

export default {
  components: {
    UserTable
  }
}
</script>