vue表格的实现
Vue 表格的实现方法
基础表格实现
使用 el-table 组件可以快速实现基础表格功能。需要定义 data 和 columns 数据，通过 v-for 渲染表格内容。
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 }
]
}
}
}
</script>动态列渲染
当列数不确定时，可以使用 v-for 动态渲染列。这种方法适合从后端获取列配置的场景。
<template>
<el-table :data="tableData">
<el-table-column
v-for="col in columns"
:key="col.prop"
:prop="col.prop"
:label="col.label">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
],
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 }
]
}
}
}
</script>表格分页功能
结合 el-pagination 组件实现分页功能。需要处理 current-change 事件来更新表格数据。
<template>
<div>
<el-table :data="currentTableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 },
// 更多数据...
],
currentPage: 1,
pageSize: 10,
total: 100
}
},
computed: {
currentTableData() {
const start = (this.currentPage - 1) * this.pageSize
return this.tableData.slice(start, start + this.pageSize)
}
},
methods: {
handleCurrentChange(val) {
this.currentPage = val
// 这里通常需要调用API获取新页数据
}
}
}
</script>表格排序功能
通过设置 sortable 属性启用列排序。可以监听 sort-change 事件处理排序逻辑。
<template>
<el-table
:data="tableData"
@sort-change="handleSortChange">
<el-table-column
prop="name"
label="姓名"
sortable>
</el-table-column>
<el-table-column
prop="age"
label="年龄"
sortable>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 22 }
]
}
},
methods: {
handleSortChange({ prop, order }) {
// 根据prop和order处理排序逻辑
this.tableData.sort((a, b) => {
if (order === 'ascending') {
return a[prop] - b[prop]
} else {
return b[prop] - a[prop]
}
})
}
}
}
</script>表格筛选功能
使用 filters 属性定义筛选选项，通过 filter-method 指定筛选方法。
<template>
<el-table
:data="tableData"
:default-filtered-value="filterValue">
<el-table-column
prop="gender"
label="性别"
:filters="[
{ text: '男', value: 'male' },
{ text: '女', value: 'female' }
]"
:filter-method="filterHandler">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', gender: 'male' },
{ name: '李四', gender: 'female' }
],
filterValue: ['male'] // 默认筛选男性
}
},
methods: {
filterHandler(value, row) {
return row.gender === value
}
}
}
</script>自定义表格内容
通过插槽可以自定义表格单元格内容，实现更复杂的展示效果。
<template>
<el-table :data="tableData">
<el-table-column label="操作">
<template #default="scope">
<el-button @click="handleEdit(scope.row)">编辑</el-button>
<el-button @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
}
},
methods: {
handleEdit(row) {
console.log('编辑', row)
},
handleDelete(row) {
console.log('删除', row)
}
}
}
</script>表格行样式定制
通过 row-class-name 属性可以为特定行添加自定义样式。
<template>
<el-table
:data="tableData"
:row-class-name="tableRowClassName">
<!-- 列定义 -->
</el-table>
</template>
<script>
export default {
methods: {
tableRowClassName({ row }) {
if (row.age > 20) {
return 'warning-row'
}
return ''
}
}
}
</script>
<style>
.el-table .warning-row {
background-color: #fff8e6;
}
</style>表格性能优化
对于大数据量表格，可以使用虚拟滚动提升性能。Element Plus 提供了 virtual-scroll 功能。
<template>
<el-table
:data="tableData"
height="500"
virtual-scroll>
<!-- 列定义 -->
</el-table>
</template>
