vue3引入element-plus（vue3的create 引入element）

本篇文章给大家谈谈vue3引入element-plus，以及vue3的createapp引入element对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、Vue3+ElementPlus使用svg加载iconfont的解决方案
2、懒人教程,Vue3+Element-Plus/Vue+Element-ui,封装表格组件el-table...

Vue3+ElementPlus使用svg加载iconfont的解决方案

1、npm install svg-sprite-loader --save-dev 之后，在 vue.config.js 中配置 webpack 链接，以实现 svg 图标的正确加载与使用。在项目结构中，我创建了 src/components/SvgIcon 文件夹，并在其中编写了 index.vue 文件，用于定义 svg 图标的组件。

2、templateel-iconEdit//el-icon/template//import{Edit}from@element-plus/icons-vue//按需引入，如果已经全局引入了就不需要按需引入 ElementPlus的el-icon使用的是svg，这与ElementUI使用的类名有很大的不同，也就是说我们无法直接在el-icon中使用iconfont的图标。

懒人教程,Vue3+Element-Plus/Vue+Element-ui,封装表格组件el-table...

在Vue3+ElementPlus或Vue+Elementui中封装eltable表格组件，实现自动获取数据与分页功能的懒人教程如下：引入ElementPlus或Elementui库：根据项目选择使用ElementPlus或Elementui。确保在项目中正确安装并引入这些UI库。在table.vue中定义表格组件：创建一个table.vue文件，用于封装eltable组件。

具体实现步骤如下：引入Element-Plus或Element-ui库在table.vue中定义表格组件通过API自动获取数据，例如使用axios进行 *** 请求在el-table中添加数据实现分页功能，如设置每页显示条数与导航条通过这些步骤，可在Vue框架中快速搭建功能完善的表格组件，适用于多种场景。

首先，搭建表格。初步效果展示如下。接着，为需要筛选的某一列开启筛选功能。这可通过给对应列添加`filters`属性实现，`filters`属性为数组，每项包括`text`和`value`，分别对应展示数据与标识。以姓名为例进行筛选。其他表格字段的多条件筛选将在后续补充。

在ElementUI中使用eltable实现前端分页，可以按照以下步骤进行：安装并引入ElementUI：使用npm或yarn安装ElementUI库。在Vue项目中引入ElementUI组件和样式。在Vue组件中使用eltable和elpagination组件：在template部分，使用eltable组件展示数据，并通过datasource属性绑定数据。

*** 一：直接在el-table中实现尽管这种 *** 能够达到效果，但代码冗余，适用于样式需求不多的情况。当需要展示七八种甚至更多的样式时，维护起来会变得复杂。以下是代码示例：el-table... (省略代码)总结：尽管直观，但对复杂需求不友好。

安装：yarnaddelement-plus 完整引入：//main.js...importElementPlusfromelement-plusimportelement-plus/dist/index.css .use(ElementPlus)引入后，我们就可以在Vue3项目中使用了：templateel-button按钮/el-button/template ElementPlus使用Icon会比ElementUI稍微麻烦点。