526互联

Vue.js框架：vue3版本引入使用element-ui

发布时间 2023-10-22 09:43:40作者: 我命倾尘

一、引入element-plus

　　element-ui只支持vue2，vue3需要引入element-plus进行使用，两个分别对应vue2和3两个版本，各自独立，无法跨级兼容。

　　地址：https://element-plus.gitee.io/

　　在vue3项目终端里使用以下命令引入该依赖：

    npm install element-plus --save

　　

二、修改main.ts配置

　　import引入以下内容：

    // 引入element-plus依赖
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

　　对组件进行全局注册：

// 引入element-plus依赖
　　app.use(ElementPlus)

三、使用测试

　　创建一个简单的el-table表格：

    <script setup lang="ts">
    import { reactive } from 'vue';

    let testTable = reactive([
      {
        name: "测试数据列1",
        value: "200",
        remark: "备注1",
      },
      {
        name: "测试数据列2",
        value: "250",
        remark: "备注2",
      },
      {
        name: "测试数据列3",
        value: "100",
        remark: "备注3",
      }
    ]);
    </script>

    <template>
      <el-table :data="testTable" max-height="200px">
        <el-table-column prop="name" label="名称" width="150"></el-table-column>
        <el-table-column prop="value" label="数值" width="150"></el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      </el-table>
    </template>

　　运行结果如下：

　　

　　正常显示无报错，说明element-plus引入成功。