吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 964|回复: 9
收起左侧

[求助] Element Plus CDN引入组件异常的问题

[复制链接]
cqwcns 发表于 2022-9-30 08:34
我想开发一个本地web应用,为了简单部署,选择使用CDN方式引入Element Plus。

官网的table组件样式是这样的,nice:
1.png
问题,我的table样式是这样的,只能显示1列,不知道什么原因:
2.png
完整代码:

[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <!-- style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

<body>
  <div id="app">
    <el-table :data="tableData">
      <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>

  <script type="text/javascript">
    const App = {
      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',
            }
          ]
        }
      },
      mounted() { },
      methods: {}
    }
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
  </script>

</body>

</html>


不知道什么问题,如何解决,请各位大佬指教,谢谢。

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Js_Aaron 发表于 2022-9-30 08:42
你最好  npm install这样安装依赖在生产环境上面
 楼主| cqwcns 发表于 2022-9-30 08:58
Js_Aaron 发表于 2022-9-30 08:42
你最好  npm install这样安装依赖在生产环境上面

cil引入我知道是没有问题的,但我现在的情况,希望使用cdn。

所以cdn有办法吗?
meng234885 发表于 2022-9-30 09:11
 楼主| cqwcns 发表于 2022-9-30 09:13
meng234885 发表于 2022-9-30 09:11
Vue is not defined  我运行显示这个

我在vscode本地服务器运行的。
http://127.0.0.1:5500
爱吃鹅肉饭 发表于 2022-9-30 09:16
建议还是配套是vue脚手架吧,支持更好。如果plus加了很多新语法,更多的支持Typescript,可以考虑降低版本使用element ui
 楼主| cqwcns 发表于 2022-9-30 09:31
meng234885 发表于 2022-9-30 09:11
Vue is not defined  我运行显示这个

改一下cdn引入地址就行。
  <!-- Import style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
  <!-- Import component library -->
  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
Nonchalant 发表于 2022-9-30 09:53
改成这种写法
[HTML] 纯文本查看 复制代码
<el-table-column prop="date" label="Date" width="180" ></el-table-column>
https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
cqwcns + 1 + 1 我很赞同!

查看全部评分

三岁就会写BUG 发表于 2022-9-30 10:08
与楼上一致,换闭合标签写法就行了
[JavaScript] 纯文本查看 复制代码
  <div id="app">
      <el-table :data="tableData">
        <el-table-column prop="date" label="Date" width="180"></el-table-column>
        <el-table-column prop="name" label="Name" width="180"></el-table-column>
        <el-table-column prop="address" label="Address"></el-table-column>
      </el-table>
    </div>

免费评分

参与人数 1吾爱币 +1 热心值 +1 收起 理由
cqwcns + 1 + 1 谢谢@Thanks!

查看全部评分

zpy2 发表于 2022-9-30 11:47
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 07:57

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表