vue实现动态用户表格

Vue 动态用户表格实现方法

基础表格结构

使用<table>或第三方组件库（如Element UI的el-table）构建基础框架。静态数据示例：

<template>
  <el-table :data="userList" border>
    <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>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { name: '张三', age: 25, email: 'zhangsan@example.com' }
      ]
    }
  }
}
</script>

动态数据加载

通过API获取数据并更新表格：

methods: {
  async fetchUsers() {
    try {
      const res = await axios.get('/api/users')
      this.userList = res.data
    } catch (error) {
      console.error('获取用户数据失败:', error)
    }
  }
},
mounted() {
  this.fetchUsers()
}

动态列渲染

根据配置动态生成列：

data() {
  return {
    columns: [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄', sortable: true }
    ]
  }
}

模板中使用v-for动态渲染：

<el-table-column 
  v-for="col in columns" 
  :key="col.prop"
  :prop="col.prop" 
  :label="col.label"
  :sortable="col.sortable || false">
</el-table-column>

可编辑单元格

实现行内编辑功能：

<el-table-column label="操作">
  <template #default="{row}">
    <el-button @click="handleEdit(row)">编辑</el-button>
  </template>
</el-table-column>

编辑方法示例：

methods: {
  handleEdit(row) {
    this.$prompt('请输入新值', '编辑', {
      inputValue: row[editedField]
    }).then(({ value }) => {
      row[editedField] = value
    })
  }
}

分页与筛选

添加分页组件：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next"
  :total="totalUsers">
</el-pagination>

分页逻辑实现：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalUsers: 0
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val
    this.fetchUsers()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchUsers()
  }
}

性能优化

对于大数据量使用虚拟滚动：

<el-table
  :data="userList"
  height="500"
  v-loading="loading"
  row-key="id">
</el-table>

添加防抖处理搜索：

watch: {
  searchQuery: {
    handler: _.debounce(function() {
      this.fetchUsers()
    }, 500)
  }
}