引入资源

首先引入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. C# 禁用窗口激活

    如果界面点击时,不想让窗口激活,可以按如下操作: 1 public MainWindow() 2 { 3 InitializeComponent(); 4 SourceInitialized += O ...

  2. Linux xfs文件系统stat命令Birth字段为空的原因探究

    在Linux平台找出某个目录下创建时间最早的文件,测试验证脚本结果是否准确的过程中发现一个很有意思的现象,stat命令在一些平台下Birth字段有值,而在一些平台则为空值,如下所示: RHEL 8.7 ...

  3. STL------sort三种比较算子定义

    sort的三种比较算子的定义方式 例:一道细碎的细节模拟题: http://newoj.acmclub.cn/contests/1258/problem/3 1932: 2018蓝桥杯培训-STL应用 ...

  4. 2022-08-08：给定一个数组arr，表示从早到晚，依次会出现的导弹的高度。 大炮打导弹的时候，如果一旦大炮定了某个高度去打，那么这个大炮每次打的高度都必须下降一点。 1) 如果只有一个大炮，返回

    2022-08-08:给定一个数组arr,表示从早到晚,依次会出现的导弹的高度. 大炮打导弹的时候,如果一旦大炮定了某个高度去打,那么这个大炮每次打的高度都必须下降一点. (1) 如果只有一个大炮,返 ...

  5. 2022-03-05：不相交的线。 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数。 现在，可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线，这些直

    2022-03-05:不相交的线. 在两条独立的水平线上按给定的顺序写下 nums1 和 nums2 中的整数. 现在,可以绘制一些连接两个数字 nums1[i] 和 nums2[j] 的直线,这些直 ...

  6. 2021-05-29：最常使用的K个单词II。在实时数据流中找到最常使用的k个单词，实现TopK类中的三个方法: Top

    2021-05-29:最常使用的K个单词II.在实时数据流中找到最常使用的k个单词,实现TopK类中的三个方法: TopK(k), 构造方法.add(word),增加一个新单词.topk(),得到当前 ...

  7. 避坑版-OpenSSH 用户名枚举漏洞（CVE-2018-15473）

    介绍: OpenSSH 7.7前存在一个用户名枚举漏洞,通过该漏洞,攻击者可以判断某个用户名是否存在于目标主机中,在复现过程中遇到了很多坑,这里我就把遇到坑和解决方法告诉大家!!! 漏洞环境: 靶机: ...

  8. 基于机器人自主移动实现SLAM建图

    博客地址:https://www.cnblogs.com/zylyehuo/ 基于[移动机器人运动规划及运动仿真],详见之前的博客 移动机器人运动规划及运动仿真 - zylyehuo - 博客园 参考 ...

  9. AIGC持续火爆大模型争相推出，庞大市场造就算力供应模式演变

    本图由AI生成 黄仁勋说的AI发展迎来iPhone时刻,对NVIDIA有什么影响? 文/王吉伟 近期的AIGC领域仍旧火爆异常. 但火的不只是AIGC应用,还有巨头之间的AI竞赛,以及接连不断上新的A ...

  10. 2014年蓝桥杯C／C++大学B组省赛真题（六角填数）

    题目描述: 如图[1.png]所示六角形中,填入1~12的数字. 使得每条直线上的数字之和都相同. 图中,已经替你填好了3个数字,请你计算星号位置所代表的数字是多少? 分析:先将a数组初始化为1-12 ...