它适用于vue3.0嘛
时间: 2023-08-03 12:07:35 浏览: 100
是的,Element UI 也支持 Vue 3.0,但是需要安装 `element-plus` 而不是 `element-ui`。同时,Element Plus 的 `Table` 组件也有一些不同于 `element-ui` 的用法。以下是一个简单的示例:
首先,我们需要在 Vue 3.0 中引入 Element Plus 和 Table 组件:
```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import { ElTable, ElTableColumn, ElPagination } from 'element-plus'
```
然后,我们可以在组件中使用 `ElTable` 和 `ElPagination` 来展示数据并进行分页:
```vue
<template>
<div>
<el-table :data="tableData" :default-sort="{prop: 'date', order: 'descending'}">
<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>
<el-pagination
v-if="total > 0"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="total"
:page-sizes="[10, 20, 30, 40]"
@current-change="handleCurrentChange"
@size-change="handleSizeChange">
</el-pagination>
</div>
</template>
<script>
import { reactive, onMounted } from 'vue'
export default {
setup() {
const state = reactive({
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0
})
const fetchData = () => {
// 发起请求获取数据
// ...
// 更新 tableData 和 total
state.tableData = [...]
state.total = ...
}
const handleCurrentChange = (currentPage) => {
state.currentPage = currentPage
fetchData()
}
const handleSizeChange = (pageSize) => {
state.pageSize = pageSize
fetchData()
}
onMounted(() => {
fetchData()
})
return {
...state,
handleCurrentChange,
handleSizeChange
}
},
components: {
ElTable,
ElTableColumn,
ElPagination
}
}
</script>
```
需要注意的是,Vue 3.0 中使用 `reactive` 来代替 Vue 2.0 中的 `data`,同时需要使用 `setup` 函数来代替 Vue 2.0 中的 `data` 和 `methods`。此外,`el-pagination` 组件在 Vue 3.0 中需要加上 `v-if` 判断,否则会出现渲染错误的问题。
阅读全文