小小爱1990 2021-10-12 19:51 采纳率: 100%
浏览 41
已结题

vue3+element怎么做表格？


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
</head>
<body>
<div id="table1">
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date"/>
        <el-table-column prop="name" label="Name"/>
        <el-table-column prop="address" label="Address"/>
    </el-table>
</div>
<script>
    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',
                    },
                ],
            };
        },
    }).use(ElementPlus).mount('#table1')
</script>
</body>
</html>

img

表格显示不对，哪里有问题么

  • 写回答

2条回答 默认 最新

  • 本堃不方 2021-10-13 16:00
    关注

    找了半天，发现是标签的错，不知道为什么不能这样写

    //错误
<el-table-column prop="date" label="Date" />

//正确
<el-table-column prop="date" label="Date" > </el-table-column>

    我改了之后就可以出来了

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <script src="https://unpkg.com/vue@next"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <script src="https://unpkg.com/element-plus"></script>
        <title>Element Plus demo</title>
    </head>
    <body>
        <div id="table1">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="Date" > </el-table-column>
                <el-table-column prop="name" label="Name"> </el-table-column>
                <el-table-column prop="address" label="Address"> </el-table-column>
            </el-table>
        </div>
        <script>
            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',
                            },
                        ],
                    };
                },
            }).use(ElementPlus).mount('#table1')
        </script>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月21日
  • 已采纳回答 10月13日
  • 创建了问题 10月12日

悬赏问题

  • ¥15 如何用Labview在myRIO上做LCD显示？(语言-开发语言)
  • ¥15 Vue3地图和异步函数使用
  • ¥15 C++ yoloV5改写遇到的问题
  • ¥20 win11修改中文用户名路径
  • ¥15 win2012磁盘空间不足,c盘正常，d盘无法写入
  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
  • ¥15 关于smbclient 库的使用