Element-UI项目使用总结

1. Element-UI介绍

Element是一套基于vue.js的组件库。组件库主要是为了规范开发而把一些常用的模块设立规范代码。

官方链接： https://element.eleme.cn/#/zh-CN/component/installation

相关链接：https://www.zcool.com.cn/article/ZODAzNjM2.html

1.1 怎么用

可以安装之后引用，也可以通过CDN方式引用

安装引用

首先通过npm安装element-ui

npm i element-ui -S

然后在代码中引用

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

CDN引用

2. 在我的项目中应用了哪些组件

2.1 el-row & el-col

基本布局有24栏，可以通过指定col逐渐中的span属性来确定布局栏的宽度。

row的中文意思是行，col是英文column的简称，代表列。也就是说，element将屏幕宽度划分为24个小块。

可以在vue组件中的

.el-row{ ...}

2.2 e-tabs & el-tab-pane

定义标签页

基本格式

<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿el-tab-pane>
  el-tabs>

在el-tabs标签下分别通过el-tab-pane定义标签。

2.3 el-table & el-table-column

表格。el-table包含表格。在el-table-column中添加表格项目。

最基本格式：

  <template>
    <el-table
      :data="tableData"
      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>
  template>

通过tabledata填充数据。prop规定键名，label定义表格的列名。

  <script>
    export default {
      data() {
        return {
          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>

显示如上。

在我的项目中出现了show summary。

2.4 el-button

定义button按钮

通过 type plain round circle属性定义button样式。

type属性通过 primary（蓝色bg、白色font）、success（绿色bg 白色font）、info（灰色bg、白色font）、warning（土黄色bg、白font）、danger（红bg、白font）定义按钮颜色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BNNJlaSh-1581404564679)(C:\Users\Liu YaXin\AppData\Roaming\Typora\typora-user-images\1581395030205.png)]

只有type属性定义的按钮，border和bg颜色一致。

将type设为“text”，是单纯的文字按钮，没有边框和背景色。

代码如下

<el-button type="text">文字按钮el-button>
<el-button type="text" disabled>文字按钮el-button>

表现如下：

加入plain属性可以改变border和bg颜色的差别。

代码规范如下：

<el-row>
  <el-button plain>朴素按钮el-button>
  <el-button type="primary" plain>主要按钮el-button>
  <el-button type="success" plain>成功按钮el-button>
  <el-button type="info" plain>信息按钮el-button>
  <el-button type="warning" plain>警告按钮el-button>
  <el-button type="danger" plain>危险按钮el-button>
el-row>

表现如下：

round为加入圆角。

还可以插入icon

<el-row>
  <el-button icon="el-icon-search" circle>el-button>
  <el-button type="primary" icon="el-icon-edit" circle>el-button>
  <el-button type="success" icon="el-icon-check" circle>el-button>
  <el-button type="info" icon="el-icon-message" circle>el-button>
  <el-button type="warning" icon="el-icon-star-off" circle>el-button>
  <el-button type="danger" icon="el-icon-delete" circle>el-button>
el-row>

表现如上。

也可以自己通过 标签引入图标。

上传