jiansgk 2024-08-01 09:17 采纳率: 50%
浏览 3
已结题

VUE3+element plus 不能正常显示页面

代码如下，页面不能正常渲染


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>


<div id="app">
    <template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </template>

</div>

<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!--<script src="https://unpkg.com/vue@3.4.35/dist/vue.global.prod.js"></script>-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus"></script>
<!--引入axios组件库-->
<script src ="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入Vue组件库-->

<script lang="ts" setup >

    Vue.createApp({

       data(){
           return {
               tableData: [{
                           date: '2016-05-03',
                           name: 'Tom',
                           address: 'No. 189, Grove St, Los Angeles',
                       },
                       {
                           date: '2016-05-02',
                           name: 'Tom',
                           address: 'No. 189, Grove St, Los Angeles',
                       },
                       {
                           date: '2016-05-04',
                           name: 'Tom',
                           address: 'No. 189, Grove St, Los Angeles',
                       },
                       {
                           date: '2016-05-01',
                           name: 'Tom',
                           address: 'No. 189, Grove St, Los Angeles',
                       }
               ]
           }
       }
   }).mount("#app")


</script>

</body>
</html>

img

  • 写回答

1条回答 默认 最新

  • 代码伐木匠 2024-08-01 09:52
    关注

    你的代码在使用 Vue 3 和 Element Plus 时，有几个地方需要调整，以确保页面能够正常渲染。以下是需要修改的内容：

    1. 移除不必要的 <template> 标签：在你的代码中，<template> 标签是不必要的，因为你已经在 div 中使用了 id="app"，并且你直接使用了 Vue.createApp，这会自动挂载到 #app 元素上。

    2. Vue 3 的 <script setup> 语法：你的代码里使用了 <script lang="ts" setup>，但你在其中调用了 Vue.createApp，这不符合 <script setup> 的使用方式。如果你希望直接使用 Vue.createApp，则不需要使用 <script setup>。不过，如果你想要使用 <script setup>，那就需要按照 Vue 3 Composition API 的方式来书写组件。

    3. 导入 Element Plus 组件：在使用 Element Plus 组件时，需要确保正确导入和注册组件。

    修改后的代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
</head>
<body>

<div id="app">
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</div>

<!-- 引入 Vue 和 Element Plus -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>

<script>
    const { createApp } = Vue;
    const { ElTable, ElTableColumn } = ElementPlus;

    createApp({
        data() {
            return {
                tableData: [
                    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
                    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
                    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
                    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
                ]
            };
        },
        components: {
            ElTable,
            ElTableColumn
        }
    }).mount('#app');
</script>

</body>
</html>

    关键点解释：

    1. 组件注册：在 Vue 3 中，Element Plus 的组件需要手动注册。在上述代码中，我在 components 中注册了 ElTable 和 ElTableColumn。
    2. **移除 <template>**：<template> 标签是多余的，直接在 HTML 中定义模板即可。

    这样调整后，页面应该能够正确渲染 el-table 和数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 8月9日
  • 已采纳回答 8月1日
  • 创建了问题 8月1日

悬赏问题

  • ¥15 torch.multiprocessing.spawn.ProcessExitedException: process 1 terminated with signal SIGKILL
  • ¥15 QuartusⅡ15.0编译项目后，output_files中的.jdi、.sld、.sof不更新怎么解决
  • ¥15 pycharm输出和导师的一样，但是标红
  • ¥15 想问问富文本拿到的html怎么转成docx的
  • ¥15 我看了您的文章，遇到了个问题。
  • ¥15 GitHubssh虚拟机连接不上
  • ¥15 装完kali之后下载Google输入法 重启电脑后出现以下状况 且退不出去 桌面消失 反复重启没用
  • ¥15 ESP-IDP-BLE配网连接wifi
  • ¥15 ue2.6.12版本用的若以，安装gojs，引入import * as go from 'gojs';报错
  • ¥15 服务器上的网站安装php5.6版本