VUE组件库Element的简单使用

部署工作

先创建个vue项目

先准备vue环境哈
环境弄好了在目标路径打开命令行

在输入vue ui，打开项目管理器

创建个vue项目

安装ElementUI组件库（在当前工程目录下）

（此流程在vscode中演示）

右键项目文件夹，在集成终端中打开

执行以下命令：

install element-ui@2.15.3npm

然后我们就会发现在项目文件夹中有个文件夹node-module,里面有个文件夹element-ui。
这个就代表已经安装成功了~

引入ElementUI的组件库

我们先看官方文档：
完整引入
在 main.js 中写入以下内容：

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)
});

反正官方文档是这么说的，但是如果我们在创建vue项目的时候勾选了一些其他的功能，比如说我选的就是route功能：

那我相较于官方文档还要多一行，所以大伙自己调整就行

然后我们可以在views文件下下面新建个element文件夹专门存储组件

然后再在这个文件夹里面新建一个vue文件

在这个vue文件里搞一个vue文件的基本结构

<template>
    <div>
        
    </div>
</template>

<script>
	export default {
    
}
</script>

<style>

</style>

这是一个使用Vue.js框架编写的简单组件结构。这个结构包含三个部分：

1. <template>：这个部分定义了组件的HTML结构。
2. <script>：这个部分包含了组件的JavaScript逻辑。export default {}表示导出一个默认的Vue组件对象。
3. <style>：这个部分定义了组件的CSS样式。

然后启动项目：

我们会发现初始界面仍然是App.vue的界面,

我们还需要作对App.vue文件做出一些更改:
原来的是:

把之前的注释掉,再在下面新建一个script标签:

再在注释的地方新建一个新的标签:
当新建这个标签的时候,下面script标签就会自己出现一堆东西

现在就已经改好啦,界面就是白白的了,因为我们还没加入任何的组件

开始使用组件

Button 按钮组件

然后就试试最简单的按钮组件
先用按钮试试
打开https://element.eleme.cn/#/zh-CN/component/button
复制官网的这一坨

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

复制到咱们之前的那个ElementView.view文件中的template标签中

完整代码如下:

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

Table 表格组件

官方文档: https://element.eleme.cn/#/zh-CN/component/table
先以这个为例:

官方文档中提供的代码如下:

<template>
  <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>
</template>

<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>

那我们就先把template标签中el-table标签中的代码(注意不包括template标签)复制下来,放进我们之前新建的ElementView.vue文件中去:

加入之后就是这样了,现在没得数据

然后我们再把下面一坨也复制过来(这个表格就需要复制script的部分,而上面的按钮那个就不需要)

数据就来了!

总代码如下:

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

    <br /><br /><br />
    <!-- 下面是表格 -->
    <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>
</template>

<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>

<style>
</style>

Pagination 分页组件

页面的插入

就长这样👇

我们以这个为例:

官方代码如下:

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

我们直接复制到vue文件里面去:
现在就长这样:

接下来我们看看官方文档中的Attributes,了解下每个属性都是干嘛的:
在这个分页组件中只涉及到了如下的属性,以及它们的功能👇

参数	说明	类型	可选值	默认值
background	是否为分页按钮添加背景色	boolean	—	false
total	总条目数	number	—	—
layout	组件布局，子组件名用逗号分隔	String	sizes, prev, pager, next, jumper, ->, total, slot	‘prev, pager, next, jumper, ->, total’

前两个非常容易看懂,那么这个layout的可选值都长啥样子呢?
我们把这些可选值都塞进layout里面去:

页面现在是这样了

说明!对应如图

如果把这些个可选值的顺序改变,那么这些小部件的顺序也会相应改变

event的触发

官方文档:

我们主要研究前两个事件
那怎么研究呢?咱看看官方文档中的"附加功能":
这个里面就有说这两个功能的使用演示

我们主要关注这两行:

这两行就相当于是事件监听,双引号中的handleSizeChange和handleCurrentChange就是事件监听所触发的函数,
我们先在el-pagination中插入这两个事件监听:

既然是事件监听,那么我们还要写所触发的函数
接下来操作script:
添加methods,里面写所触发的函数:

  methods: {
    handleSizeChange: function (val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
  },

可见这俩的参数都是数字,所以我们都设置一个val作为传入参数

测试handleSizeChange方法:

测试handleCurrentChange方法:

Dialog 对话框

就长这样,蹦出来个窗口:

官方代码:

<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</el-dialog>

再把下面这坨复制进去

      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,

完整代码如下:

<template>
  <div>

    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
     
     
    };
  },
  methods: {

  },
};
</script>

<style>
</style>

Form 表单

就长这样（官方图：典型表单）:

我们可以结合刚才写的那个对话框，就是点击之后弹出对话框，里面就是个表单。
就用典型表单做演示罢：

怎么知道复制过来的标签的各个属性都是干嘛的?

我们以表格那个为例
在对应的官方文档中,滑到最底下:

Table-column Attributes就是介绍每个属性都是干嘛用的