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)
}
}
