element-ui快速使用（使用element-ui做一个表格）_elementui绘制基本信息表格-程序员宅基地

技术标签： ui ┉┇前端小知识前端 vue.js

一、什么element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，可以快速布局和构建页面

二、快速使用

官网： http://element-cn.eleme.io/#/zh-CN

element-ui的使用主要分三步：①引入脚本库；②引入css；③引入js

1、引入脚本库

先去官网下载element-ui的库【lib】，然后在项目中新建一个文件夹【element-ui】，把lib放在该文件夹下

2、引入css

一般放在head

<!-- import CSS -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

3、引入js

<script src="element-ui/lib/index.js"></script>

为了和vue配合使用，一般还需要引入vue

<!-- 引入vue -->
<script src="vue.min.js"></script>

4、根据需要查阅官方API

其实还应该有第四步，查询官方API，在官网中我们能够找到我们想要的所有的element-ui的组件，通过官网的例子，能很快在项目中使用。

官网： http://element-cn.eleme.io/#/zh-CN

同时，因为element-ui是基于vue.js的，所有我们在使用的过程中，要注意两者的版本问题。

三、示例（使用element-ui做一个表格）

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>helloworld</title>
        <!-- 引入css -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	</head>
	<body>
        
        
        <!-- id标识vue作用的范围 -->
        <div id="test">
            
            <el-table
                :data="testList"
                border
                style="width: 100%">
                <el-table-column
              type="selection"
              width="55"></el-table-column>
            <el-table-column
                prop="name"
                width="200">
            </el-table-column>
            <el-table-column
                prop="address"
                width="200">
            </el-table-column>
                
            </el-table>
        </div>
        <!-- 引入vue -->
        <script src="vue.min.js"></script>
        <!-- 引入js -->
        <script src="element-ui/lib/index.js"></script>
        <script>
            // 创建一个vue对象
            new Vue({
                //绑定vue作用的范围
                el: '#test',
                
                data(){
                    return {
                        testList:[
                           {
                            name :'吕布',
                            address: '对抗路'
                           },
                           {
                            name :'诸葛亮',
                            address: '中路'
                           },
                           {
                            name :'鲁班',
                            address: '发育路'
                           } 
                        ]
                    }
                }
            })
        </script>
    </body>
</html>

很多时候我们会通过别人的心得快速对element-ui的大致使用有所了解，但是通过查阅官方文档，永远是最好最全面的学习方法。

本文链接：https://blog.csdn.net/weixin_45764765/article/details/122487067

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5mm方格本打印模板_聪明人的方格笔记术-程序员宅基地

文章浏览阅读2.8k次。我在学生时代，几乎所有的笔记本都是横线本，也是这两年先后发现了不同的笔记方式。上次去图书馆发现了《聪明人用方格笔记本》，顺手带回家放置了很久，终于决定不能再拖下去了，昨天用1个半小时看完了。很多人在学生阶段、工作阶段，都少不了记笔记的经历，那么你有没有想过，记笔记的目的是什么呢？笔记的生命线是“再现性”，这是记笔记的最终目的。 --by《聪明人用方格笔记本》做笔记的过程也是信息整理的过程，我们做笔..._5mm小格子怎么用

【C语言】拼接字符串_用vc6.0进行字符串的拼接代码-程序员宅基地

文章浏览阅读5.7k次，点赞6次，收藏28次。C语言之字符的拼接_用vc6.0进行字符串的拼接代码

数据如何埋点？Mob统计分析电商类APP埋点需求_软件埋点如何报价-程序员宅基地

文章浏览阅读4.5k次，点赞2次，收藏8次。1、明确核心业务主流程首次接入数据埋点，建议选择与产品核心业务最关联的业务流程进行分析例如：电商类APP的“购买流程”、“售后流程”金融类APP的“投资流程”、“新用户活动流程”咨询类APP的“文章阅读”、“分享&回流”2、确定用户执行主流程时各个关键行为点例如电商APP“购买流程”可分解如下几个关键行为点搜索商品查看商品详情选择收货人创建订单支付订单_软件埋点如何报价

offSetWidth与Width的区别_html offsetwidth width区别-程序员宅基地

文章浏览阅读1.1k次。转载自：offsetwidth与width的区别，js获取html元素的实际高度1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。2.offsetWidth属性仅是可读属性，而style.width是可读写的。3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并..._html offsetwidth width区别

Android 获取assets下文件的绝对路径_获得assets绝对路径-程序员宅基地

文章浏览阅读1.1w次。https://blog.csdn.net/liaowenfeng/article/details/17717289/_获得assets绝对路径

管家婆分销安装完成后报错（网络访问失败，请重试）_软件网络访问失败，请重试-程序员宅基地

文章浏览阅读4k次。管家婆分销ERP V3 安装后打开报错报错信息：网络访问失败请重试解决方法：方法一取消选择方法二链接： https://share.weiyun.com/5p7DYqJ （密码：6SNw）将文件替换到根目录付费技术支持QQ：204814945..._软件网络访问失败，请重试