解决vue3使用element-ui

目前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)