vue3 element ui 渲染列表数据

Vue 3 + Element UI 动态渲染列表数据实战指南

在现代前端开发中，列表数据的动态渲染是常见需求。Vue 3 结合 Element UI 的强大功能，为开发者提供了丰富的组件和灵活的配置，使得动态渲染列表数据变得轻松高效。本文将详细介绍如何在 Vue 3 项目中使用 Element UI 动态渲染列表数据，包括数据绑定、分页处理、排序和筛选等高级功能。

一、环境准备

安装 Node.js 和 npm：确保你的开发环境已经安装了 Node.js 和 npm。
创建 Vue 3 项目：使用 Vue CLI 创建一个新的 Vue 3 项目。
```
vue create my-vue3-project
```
安装 Element Plus：在项目中安装 Element Plus。
```
npm install element-plus --save
```

二、基本项目结构在你的 Vue 3 项目中，创建以下基本结构：

src/ |-- components/ | |-- List.vue |-- App.vue |-- main.js

三、引入 Element Plus 在 main.js 文件中引入 Element Plus 并使用它：

import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app');

四、创建 List 组件在 List.vue 文件中，创建一个用于动态渲染列表数据的组件：

<template> <div> <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" > <el-table-column prop="date" label="日期" sortable="custom" ></el-table-column> <el-table-column prop="name" label="姓名" sortable="custom" ></el-table-column> <el-table-column prop="address" label="地址" ></el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, // ... 更多数据 ], currentPage: 1, pageSize: 10, }; }, methods: { handleSizeChange(newSize) { this.pageSize = newSize; }, handleCurrentChange(newPage) { this.currentPage = newPage; }, handleSortChange({ prop, order }) { // 根据排序字段和顺序进行数据处理 }, }, }; </script>

五、在 App.vue 中使用 List 组件在 App.vue 文件中，引入并使用 List 组件：

<template> <div id="app"> <List /> </div> </template> <script> import List from './components/List.vue'; export default { name: 'App', components: { List, }, }; </script>

六、高级功能