引入资源

首先引入Vue,之后引入element-ui。

引入组件

返回数据

全部代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body>

    <div id="app">

        <el-table

                :data="tableData"

                border

                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>

    </div>

<script>

    new Vue({

        el: '#app',

        data:{

            tableData: [{

                date: '2016-05-02',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-04',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1517 弄'

            }, {

                date: '2016-05-01',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1519 弄'

            }, {

                date: '2016-05-03',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1516 弄'

            }]

        }

    })

</script>

</body>

</html>

效果展示

vue: 在页面中单独引入elment-ui的更多相关文章

  1. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  2. element-ui中单独引入Message组件的问题

    import Message from './src/main.js'; export default Message; 由于Message组件并没有install 方法供Vue来操作的,是直接返回的 ...

  3. Vue 动态控制页面中按钮是否显示和样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue基于页面中按钮权限控制

    main.js // 权限 /** 权限指令,对按钮权限的控制 **/ Vue.directive('allow', { bind: function(el, binding) { // 通过当前按钮 ...

  5. Vue 2.6 中部分引入 TypeScript 的方法

    在 Vue 与 Cesium 联合开发的过程中,我发现很多 Cesium 代码不宜直接写在 .vue 文件中.同时由于 Cesium 库较为复杂,不借助 TypeScript 的静态类型会导致代码难维 ...

  6. 在老项目中单独引入vue.js,使用自定义指令

    传统项目,做一个表格渲染,然而数据过多,传统方式费时费力,便引入vue和elelment  ui,由于表格需要渲染的数据过多一个表格上千条,导致切换tab更新表格时缓慢,体验太差,于是做了自定义指令, ...

  7. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  8. Vue单页面中进行业务数据的上报

    为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...

  9. vue同一页面中拥有两个表单时，验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法 ...

  10. vue单页面应用中动态修改title

    https://www.jianshu.com/p/b980725b62e8 https://www.npmjs.com/package/vue-wechat-title 详细信息查看:vue-wea ...

随机推荐

  1. 2023-03-14：读取摄像头，并且显示视频。代码用go语言编写。

    2023-03-14:读取摄像头,并且显示视频.代码用go语言编写. 答案2023-03-14: 大体流程如下: 导入所需的库和包. 初始化 ffmpeg 和 SDL2 库. 打开摄像头并创建 AVF ...

  2. 2022-09-30：以下go语言代码输出什么？A: true true false true false； B: true false false true false； C: true true

    2022-09-30:以下go语言代码输出什么?A: true true false true false: B: true false false true false: C: true true ...

  3. 2020-11-17：java中，吞吐量优先和响应时间优先的回收器是哪些？

    福哥答案2020-11-17:对于吞吐量优先的场景,就只有一种选择,就是使用 PS 组合(Parallel Scavenge+Parallel Old ).对于响应时间优先的场景,在 JDK1.8 的 ...

  4. 分库分表的 21 条法则，hold 住！

    大家好,我是小富- (一)好好的系统,为什么要分库分表? 本文是<分库分表ShardingSphere5.x原理与实战>系列的第二篇文章,距离上一篇文章已经过去好久了,惭愧惭愧- 还是不着 ...

  5. Django4全栈进阶之路20 项目实战（在线报修）：项目需求分析

    为了实现一个在线报修系统,您可以按照以下步骤进行: 创建Django项目和应用 使用Django的命令行工具创建一个Django项目,并在该项目中创建一个名为"RepairApp" ...

  6. vue全家桶进阶之路25：Vue2的停维通知

    Vue 2 的技术支持会持续多久?从官方发文来看,Vue 2.7 是当前.同时也是最后一个 Vue 2.x 的次级版本更新.Vue 2.7 会以其发布日期,即 2022 年 7 月 1 日开始计算,提 ...

  7. Linux 目录 查看 压缩 编辑 命令

    目录 一.文件目录 二.查看文件 三.压缩与解压 四.vim编辑 一.文件目录结构 文件类型: /root 管理员的家目录 /home 用户家目录 /bin   命令文件目录,存放命令,管理员和用户可 ...

  8. TypeError: this.CliEngine is not a constructor

    vue cli3 项目老是提示TypeError: this.CliEngine is not a constructor这个,看着特别扭 解决方法也不难,直接点击Details 然后再点击,如下第一 ...

  9. Java中的三元运算，以后用得到！

    前言 Java 中的三元运算,平时也叫做三目运算,大家了解吗?下面就详细介绍一下,以后在项目编程中用得到. 一.Java运算符 在最底层,Java 中的数据是通过使用运算符来操作的.运算符是一种特殊的 ...

  10. ChatGPT在线体验原理课-概览：ChatGPT 与自然语言处理

    # 概览:ChatGPT 与自然语言处理 本文将介绍 ChatGPT 与自然语言处理的相关知识. ## ChatGPT 与图灵测试 图灵测试是人工智能领域的一个经典问题,它旨在检验计算机是否能够表现出 ...