解决vue3使用element-ui
解决vue3使用element-ui
浩淇害死猫
于2022-06-15 16:06:36发布
7234
收藏
21
分类专栏：
Vue
文章标签：
elementui
vue.js
前端
Vue
专栏收录该内容
4 篇文章
0 订阅
订阅专栏
目前element-ui支持vue2版本，有一些组件在vue3中无法使用，这时候我们需要导入element-plus结合vue3开发
具体操作
1.首先安装element-ui
npm install element-ui --save
这里为什么要安装element-ui，我也不清楚，但是我一旦只安装element-plus，不安装element-ui就会报错，这里建议安装，或者不安，出问题了，再安装也可
2.安装element-plus
npm install element-plus --save
3.修改main.js文件
import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import locale from 'element-plus/lib/locale/lang/zh-cn' createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')添加
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
并且使用导入的函数模型
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')
这样基本就可以了
比如解决el-table获取当前行的值的问题
<el-table :data="list" border style="width: 66%" class="tableel12"> <el-table-column prop="tradeId" label="序号" width="180" /> <el-table-column prop="stockHolderId" label="股民id" width="180" /> <el-table-column prop="bankCardId" label="卡号" /> <el-table-column prop="addedMoney" label="交易金额" /> <el-table-column prop="state" label="状态" /> <el-table-column prop="type" label="操作股票方式" /> <el-table-column label="重传"> <template #default="scope"> <el-button type="primary" @click="update2(scope.row.tradeId,scope.row.state)" >重传</el-button > <!-- <el-button link type="primary" size="small">Edit</el-button> --> </template> </el-table-column> </el-table>如果使用element-ui官方文档中的方式，会出错的
这里附加element-plus的官方文档
一个 Vue 3 UI 框架 | Element Plus (gitee.io)