element-ui快速使用（使用element-ui做一个表格）

seven_ • 2023年2月22日下午7:26 • 技术随笔 • 阅读 416

一、什么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>