引入资源

首先引入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. 可视化—gojs 超多超实用经验分享(一)

    目录 1. 设置分组模板,默认样式,统一最小宽度,展开收起状态监听 2. 分组名称显示成员个数: 分组名称+成员个数: name(children) 3. 分组成员为空时,不显示 placeholde ...

  2. Netty服务端开发及性能优化

    作者:京东物流 王奕龙 Netty是一个异步基于事件驱动的高性能网络通信框架,可以看做是对NIO和BIO的封装,并提供了简单易用的API.Handler和工具类等,用以快速开发高性能.高可靠性的网络服 ...

  3. #Powerbi 利用动态格式字符串功能，实现百分数智能缩位（powerbi4月重磅更新功能）

    以下内容(基于POWERBI 23年4月更新的最新版本) 实际业务中,日常报表一般都有一个较为规范的百分数缩位要求,如果统一要求保留一位小数,那么在有些时候,我们会面临被缩成0.0%的尴尬,例如原有的 ...

  4. #Python 利用pivot_table,数据透视表进行数据分析

    前面我们分享了,利用python进行数据合并和连接,但是工作中,我们往往需要对数据进一步的聚合或者运算,以求最后的数据结果. 今天我们就来学习一下利用pandas模块,对数据集进行数据透视分析. pi ...

  5. Python NumPy 广播(Broadcast)

    广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a.shape == ...

  6. ACM中的java的使用;

    java大法好,退C保平......开玩笑的: 1.头文件: import java.math.*; // 包含大数类的包 import java.util.*; // 包含输入头的包 2.程序主体, ...

  7. 2022-10-17：特殊的二进制序列是具有以下两个性质的二进制序列： 0 的数量与 1 的数量相等。 二进制序列的每一个前缀码中 1 的数量要大于等于 0 的数量。 给定一个特殊的二进制序列 S，以

    2022-10-17:特殊的二进制序列是具有以下两个性质的二进制序列: 0 的数量与 1 的数量相等. 二进制序列的每一个前缀码中 1 的数量要大于等于 0 的数量. 给定一个特殊的二进制序列 S,以 ...

  8. 2022-08-26：用一个大小为 m x n 的二维网格 grid 表示一个箱子 你有 n 颗球。箱子的顶部和底部都是开着的。 箱子中的每个单元格都有一个对角线挡板，跨过单元格的两个角， 可以将球导

    2022-08-26:用一个大小为 m x n 的二维网格 grid 表示一个箱子 你有 n 颗球.箱子的顶部和底部都是开着的. 箱子中的每个单元格都有一个对角线挡板,跨过单元格的两个角, 可以将球导 ...

  9. 2022-08-25：以下go语言代码输出什么？A：1 0；B：1 2；C：不能编译；D：0 0。 package main import “fmt“ func named() (n, _ int

    2022-08-25:以下go语言代码输出什么?A:1 0:B:1 2:C:不能编译:D:0 0. package main import "fmt" func named() ( ...

  10. 2022-04-25：给定一个整数数组，返回所有数对之间的第 k 个最小距离。一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值。 输入： nums = [1,3,1] k = 1 输出：

    2022-04-25:给定一个整数数组,返回所有数对之间的第 k 个最小距离.一对 (A, B) 的距离被定义为 A 和 B 之间的绝对差值. 输入: nums = [1,3,1] k = 1 输出: ...