关于vue2使用element样式不显示

∫護着妳佉遠方 · 发表于 2022-1-4 11:41

本帖最后由 ∫護着妳佉遠方于 2022-1-4 15:19 编辑

各位大佬，这个错误在哪

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格组件</title>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
<template>
      <el-table
            :data="tableData"
            style="width: 100%">
         <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
         </el-table-column>
         <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
         </el-table-column>
         <el-table-column
                  prop="address"
                  label="地址">
         </el-table-column>
         <el-table-column
                  label="操作"
                  width="180">
            <el-button type="warning">编辑</el-button>
            <el-button type="danger">删除</el-button>
         </el-table-column>
      </el-table>
</template>
</div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
      el: '#div',
      date: {
         tableData: [{
            date: '2016-05-02',
            name: '张三',
            address: '上海市普陀区金沙江路 15180 弄'
         }, {
            date: '2016-05-04',
            name: '李四',
            address: '上海市普陀区金沙江路 15171 弄'
         }, {
            date: '2016-05-01',
            name: '王二',
            address: '上海市普陀区金沙江路 15192 弄'
         }, {
            date: '2016-05-03',
            name: '麻子',
            address: '上海市普陀区金沙江路 15163 弄'
         }]
      }
})
</script>
</html>
问题：不能显示数据，可以显示表格，引入的vue和element应该没有错展示https://seikim.com/i/2022/01/04/p3wx4f.png

meiwan123 · 发表于 2022-1-4 12:20

现在都不用html了你用vue的话直接上npm吧一般不会你这样引用的

meiwan123 · 发表于 2022-1-4 12:29

你第一个引用路径错了，建议你参考官网的hello word，第二个网络引入 css 也没有引入你放的位置好像也有问题。这里面https://element.eleme.cn/#/zh-CN/component/installation 有一个hello word 复制粘贴一下然后再去研究吧

13599383608 · 发表于 2022-1-4 13:48

element 的 index.js 文件要在 vue的js文件引入之后再引入 element的ui是使用vue的组件进行封装的所以要先引入vue.js

Nonchalant · 发表于 2022-1-4 14:42

照着element的示例写就好了

lifeixue · 发表于 2022-1-4 14:43

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
	<!-- 切记：先引用 Vue2.js 文件 -->
	<script src="../Vue/vue2.js"></script>
	<script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>
<button>一个按钮</button>
<br>
<div id="app">
    <el-row>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>
    <br>
    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
    });
</script>
</html>

错误1：引用顺序出错，应该先引用 vue2.js，再引用 elementUI
错误2：引用 element 时，少了个符号 "

∫護着妳佉遠方 · 发表于 2022-1-4 15:14

lifeixue 发表于 2022-1-4 14:43
[mw_shl_code=html,true]

感谢你的回复，已解决

Richex · 发表于 2022-1-4 15:14

像6楼一样代码贴好看点人家会更乐意帮你，前端基本的审美还是要有的

∫護着妳佉遠方 · 发表于 2022-1-4 15:21

Richex 发表于 2022-1-4 15:14
像6楼一样代码贴好看点人家会更乐意帮你，前端基本的审美还是要有的

我刚想问，你们是怎么把代码贴的这样的，可以直接按照格式复制，还有行数

拉格朗日之都 · 发表于 2022-1-4 17:17

楼上的都说错了。

[JavaScript] 纯文本查看 复制代码

new Vue({
        el: '#div',
        date: {
            tableData: [{

这一块实例化vue的时候应该是data，而不是date，单词写错了。另外建议使用

[JavaScript] 纯文本查看 复制代码

data() {
  return {
    tableData: []
  }
}

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 关于vue2使用element样式不显示