引入资源

首先引入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. rfc7234之http缓存

    声明:本人原创文章,详细内容已发布在我的微信个人技术公众号---网络技术修炼,公众号总结普及网络基础知识,包括基础原理.网络方案.开发经验和问题定位案例等,欢迎关注. 缓存概念 缓存处理请求步骤 缓存 ...

  2. Spring源码：Bean生命周期（三）

    前言 在之前的文章中,我们已经对 bean 的准备工作进行了讲解,包括 bean 定义和 FactoryBean 判断等.在这个基础上,我们可以更加深入地理解 getBean 方法的实现逻辑,并在后续 ...

  3. 虚拟机中Docker下部署gitlab

    一.安装Gitlab 1.拉取镜像并启动 由于服务器的80端口可能被占用,所以这里我们改成了其他端口来启动 docker run -d -p 2443:443 -p 5678:80 -p 2222:2 ...

  4. pandas 常用操作记录

    apply函数 一个非常灵活的函数,能够对整个DataFrame或者Series执行给定函数的操作. 函数可以是自定义的,也可以是python或者pandas内置的函数,还可以是匿名函数. 作用: 用 ...

  5. 2021-12-30：分裂问题。 一个数n，可以分裂成一个数组[n/2, n%2, n/2]， 这个数组中哪个数不是1或者0，就继续分裂下去。 比如 n = 5，一开始分裂成[2, 1, 2]， [2

    2021-12-30:分裂问题. 一个数n,可以分裂成一个数组[n/2, n%2, n/2], 这个数组中哪个数不是1或者0,就继续分裂下去. 比如 n = 5,一开始分裂成[2, 1, 2], [2 ...

  6. Python忽略NoData计算多张遥感影像的像元平均值：whitebox库

      本文介绍基于Python中whitebox模块,对大量长时间序列栅格遥感影像的每一个像元进行忽略NoData值的多时序平均值求取.   在文章Python ArcPy批量计算多时相遥感影像的各像元 ...

  7. Jenkins - 更改插件镜像源地址

    Jenkins - 更改插件镜像源地址 进入 系统管理 > 插件管理 > 高级 在升级站点输入框,输入清华的Jenkins镜像源地址:点击提交保存即可: jenkins插件清华大学镜像地址 ...

  8. Linux之从进程角度来理解文件描述符

    文件描述符是一个非负整数,而内核需要通过这个文件描述符才可以访问文件.当我们在系统中打开已有的文件或新建文件时,内核每次都会给特定的进程返回一个文件描述符,当进程需要对文件进行读或写操作时,都要依赖这 ...

  9. C#/VB.NET：如何从 PowerPoint 演示文稿中提取文本

    在学习或者日常工作中,有时我们需要把幻灯片的东西整理成文字,而从 PowerPoint 演示文稿中一张一张的整理手动复制粘贴,整个过程会非常费精力且耗时.那么怎么样才能比较轻松且快速地提取PowerP ...

  10. Java工具类Result＜T＞

    枚举类:ResultCodeEnum /** * 统一返回结果状态信息类 * */ @Getter public enum ResultCodeEnum { SUCCESS(200,"成功& ...