vue3 element table
时间: 2023-10-08 15:07:22 浏览: 40
Vue 3 和 Element UI 库都是非常受欢迎的前端框架和UI组件库。在 Vue 3 中使用 Element UI 的 Table 组件非常简单,我们可以通过以下步骤来实现:
1. 安装 Element UI 库:使用 npm 或 yarn 安装 Element UI 库:
```
npm install element-plus --save
```
2. 引入 Element UI 库:在 main.js 中引入 Element UI 库并注册:
```
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
```
3. 使用 Table 组件:在组件中使用 Table 组件并传递数据和列属性:
```
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2022-03-01',
name: '张三',
address: '北京市海淀区'
}, {
date: '2022-03-02',
name: '李四',
address: '上海市徐汇区'
}, {
date: '2022-03-03',
name: '王五',
address: '广州市天河区'
}, {
date: '2022-03-04',
name: '赵六',
address: '深圳市福田区'
}]
}
}
}
</script>
```
以上就是使用 Vue 3 和 Element UI 实现 Table 组件的步骤,可以根据自己的需求进行相应的配置和样式调整。