vue table组件实现
Vue Table 组件实现方法
基础表格实现
使用el-table组件快速构建表格，需绑定数据源并定义列：
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2023-01-01', name: '张三', address: '北京市' },
{ date: '2023-01-02', name: '李四', address: '上海市' }
]
}
}
}
</script>动态列渲染
通过v-for动态生成表格列：
<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>自定义列模板
使用插槽实现复杂单元格内容：
<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>表格排序与筛选
添加sortable和filters属性实现功能：
<el-table-column
prop="date"
label="日期"
sortable
:filters="[
{ text: '北京', value: '北京市' },
{ text: '上海', value: '上海市' }
]"
:filter-method="filterHandler">
</el-table-column>分页功能实现
结合el-pagination组件：
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>性能优化建议
大数据量时启用虚拟滚动：
<el-table
:data="tableData"
height="400"
v-loading="loading"
row-key="id">
</el-table>自定义样式
通过CSS覆盖默认样式：
.el-table .warning-row {
background-color: #fff8e6;
}
.el-table .success-row {
background-color: #f0f9eb;
}
