05-Element-UI学习（vue全家桶05）

01-Element-UI（vue全家桶05）

• 学习element-ui最好的方式：查看官方文档

  • vue2的element-ui官网：Element - The world's most popular Vue UI framework

  • vue3的element-ui官网：一个 Vue 3 UI 框架 | Element Plus

1.1-了解vue开发中一些常用的布局组件库

• 1.移动端（Vant, Cube-UI, NutUI ）

• 2.PC端 （ element-ui, Ant Design of Vue, iView）

• 3.微信小程序： uniapp

布局组件库使用流程一般分为以下几个步骤

1.进官网，查文档

2.根据官网流程，先下载后导包，然后CV

3.遇到问题了如何解决呢？

（1）百度搜索你遇到的问题

（2）去github的issue,面对面与组件作者本人提出问题 ： https://github.com/ElemeFE/element/issues?page=3&q=table

1.2-项目导入element-ui

• 官网参考：Element - The world's most popular Vue UI framework

• 1.下载element-ui : npm i element-ui -S

  • -S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。

  • -S: 是可以省略不写的。

  • 如果要安装开发依赖，则要加 -D。

2.main.js中导入element-ui

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//完整引入 ElementUI
//(1)导包
import ElementUI from 'element-ui'
//(2)导入css样式
import 'element-ui/lib/theme-chalk/index.css'
//(3)注册所有组件
Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

1.3-el-button按钮

• 官网文档：Element - The world's most popular Vue UI framework

  • type : 设置颜色

  • plain : 朴素按钮（只有边框颜色，背景色浅灰）

  • round : 圆角按钮

  • circle : 圆形按钮

  • icon : 字体图标按钮

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

02-表单组件el-table

1.1-el-table组件基本使用

• 官方文档：Element - The world's most popular Vue UI framework

1. 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。

2. 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握

   • label：决定当前列显示出的标题 (相当于表头)

   • prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名。

prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。

• width: 用来设置列的宽度。如果不设置，它会自适应。

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

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

1.2-el-table组件插槽实现自定义列

• 1.插槽作用：父组件传递html结构给子组件

• 2.table插槽应用：可以让我们自定义表格的列

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </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 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

1.3-el-table组件作用域插槽使用

• 1.插槽作用：父组件传递html结构给子组件

• 2.table插槽应用：可以让我们自定义表格的列

• 3.table作用域插槽作用： 让 父组件获取当前子组件 内部数据

03-分页组件el-pagination

• 官方文档;Element - The world's most popular Vue UI framework

  • layout : 设置页码布局（通过关键词排序可以控制页码布局顺序）

    • prev:上一页

    • pager:页码

    • next:下一页

  • :total : 设置数据的总数

  • :page-size: 设置一页有多少数据

    • 一般页码会和table组合使用

    • 作用

      • 分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size)

  • :pager-count : 设置页码按钮数量

    • 注意点:范围7-21之间的奇数，如果是偶数则会报错

  • @current-change : 页码改变事件

    • 这个事件有一个默认形参，就是当前改变的页码

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      :page-size="20"
      :pager-count="9"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    //页码改变就会触发这个事件
    pageChange(page) {
      console.log(page)//当前页码
    }
  }
}
</script>

04-表单组件el-form

• 官方文档：Element - The world's most popular Vue UI framework

1.1-el-form组件基本使用

• 1.表单中的数据项一般会用一个对象包起来

• 2.属性名一般和后端接口中保持一致

• 3.在元素上采用v-model双向绑定

• 4.绑定事件，通过双向绑定获取表单输入值

 

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm('myform')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: "",
        password: ""
      }
    }
  },
  methods: {
    doLogin() {
    },
    //点击确认 : 获取表单树
    submitForm() {
      console.log(this.form)
    },

  }
}
</script>

<style scoped>
.form-container {
  width: 600px;
}
</style>

1.2-el-form组件表单校验

• 表单校验分为三个步骤

• 1.在data()中定义校验规则

• 2.在模板上配置对应规则（三个配置）

  • 给表单设置 rules 属性传入验证规则

  • 给表单设置model属性传入表单数据

  • 给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名

• 3.处理最终校验结果（是否每一个表单全部校验通过）

• 1.在 data 中,补充定义规则。

  格式：

data() {
  return {
    rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          { 验证规则1 },
          { 验证规则2 },
        ],
        字段名2: [
          { 验证规则1 },
          { 验证规则2 },
        ], 
		}
  }
}

示例

 { required: true, message: '请输入验证码', trigger: 'blur' },
  { pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

data () {
    return {
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^\d{11}$/,
            message: "请输入合法的验证码",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "请输入合法的密码",
            trigger: "blur"
          },
        ]
      }
    }
  },

• 注意：

  • rules中的属性名与表单数据项中的属性名必须是一致的。

• 2.在模板上配置对应规则（三个配置）：

  • 给 el-form 组件绑定 model 为表单数据对象

  • 给 el-form 组件绑定 rules 属性配置验证规则

  • 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

• 注意点

  • 位置不要写错了

    • model和rules和ref是写在 el-form组件上的

    • prop是写在el-form-item组件上的

  • 单词不要写错（以下三个位置单词需要一致）

    • v-model绑定的属性

    • rules的属性

    • prop的属性

<template>
  <div class="form-container">
    <el-form label-width="80px" ref="myform" :model="form" :rules="rules">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm('myform')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

• 3.处理最终校验结果

  • 给el-form组件添加ref属性用于获取该组件

• 语法：

  • validate 方法是表单组件自带的，用来对表单内容进行检验。

  • 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

示例：

methods: {
    doLogin() {
      console.log(this.form)

      alert("登录成功")
    },
    //点击确认 : 获取表单树
    submitForm() {
      this.$refs.myform.validate(valid => {
        // valid 就是表单验证的结果，如果是true，表示通过了
        console.log(valid)
        if (valid) {
          // 通过了验证，你可以做后续动作了
          this.doLogin()
        }
      })
    },
}

1.3-自定义校验规则

• 例如： 密码不能是123456

• 语法：在rules中自定义validator

rules:{
    属性名1: [
      { 
        // 注意参数顺序
        validator: function (rule, value, callback) {
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}

示例

//正则校验
  rules: {
    mobile: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
        pattern: /^\d{11}$/,
        message: "请输入合法的验证码",
        trigger: "blur"
      }
    ],
    password: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
        pattern: /^\w{6,15}$/,
        message: "请输入合法的密码",
        trigger: "blur"
      },
      {
        validator: (rule, value, callback) => {
          console.log(rule, value, callback)
          if (value === "123456") {
            callback(new Error("密码不能是123456哟"))
          } else {
            callback()
          }
        },
        triggle: "blur"
      }
    ]
  }

1.4-重置表单清理校验痕迹

• 需求：校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

• 语法

this.$refs.form组件的引用.resetFields()

• 清理校验痕迹

• 恢复表单默认数据

示例：

<el-button @click="resetForm('myform')">取消</el-button>

 //点击取消
resetForm(formName) {
  //
  this.$refs[formName].resetFields()
}

1.5-完整代码

<template>
  <div class="form-container">
    <el-form label-width="80px" ref="myform" :model="form" :rules="rules">
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm('myform')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: "",
        password: ""
      },
      //正则校验
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^\d{11}$/,
            message: "请输入合法的验证码",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^\w{6,15}$/,
            message: "请输入合法的密码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) => {
              console.log(rule, value, callback)
              if (value === "123456") {
                callback(new Error("密码不能是123456哟"))
              } else {
                callback()
              }
            },
            triggle: "blur"
          }
        ]
      }
    }
  },
  methods: {
    doLogin() {
      console.log(this.form)

      alert("登录成功")
    },
    //点击确认 : 获取表单树
    submitForm() {
      this.$refs.myform.validate(valid => {
        // valid 就是表单验证的结果，如果是true，表示通过了
        console.log(valid)
        if (valid) {
          // 通过了验证，你可以做后续动作了
          this.doLogin()
        }
      })
    },
    //点击取消
    resetForm(formName) {
      //
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.form-container {
  width: 600px;
}
</style>

05-树形组件el-tree

• 官网文档：Element - The world's most popular Vue UI framework

1.1-tree树形结构介绍

• 什么是树形结构 ： 多级菜单

  • 这是PC端布局里面一个比较复杂的结构

1.2-el-tree基本使用

• 1.树形结构组件比较简单，就只有一个el-tree,难点是里面的数据data

• 2.数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容

  • 小提问：学习递归函数的时候，有没有了解过这种特殊的数据结构呢？

  • label : 用于展示菜单的本文

  • chilren : 数组，里面放子菜单

• 3.el-tree的@node-click用于给组件绑定点击事件

 // 共三个参数，
// 依次为：
//   - 传递给 data 属性的数组中该节点所对应的对象
//   - 节点对应的 Node
//   - 节点组件本身
handleNodeClick(a, b, c) {
  console.log(a, b, c)
}

<template>
  <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 共三个参数，
    // 依次为：
    //   - 传递给 data 属性的数组中该节点所对应的对象
    //   - 节点对应的 Node
    //   - 节点组件本身
    handleNodeClick(a, b, c) {
      console.log(a, b, c)
    }
  }
}
</script>

06-其他组件用法

1.1-下拉菜单el-select

 官方文档：Element - The world's most popular Vue UI framework

<template>
  <div>
    <h2>下拉选择框</h2>
    <el-select v-model="value" placeholder="请选择">
      <!-- label: 显示的内容
        value: 选中之后要保存的内容---值 -->
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "1",
          label: "黄金糕"
        },
        {
          value: "2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    }
  }
}
</script>

1.2-对话框组件Dialog

官方文档：Element - The world's most popular Vue UI framework

• 1.使用默认插槽来自定义内容

• 2.通过给el-dialog组件添加:visible.sync="dialogVisible"来控制显示隐藏

  • dialogVisible是data中的一个布尔类型属性

弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件

@close 弹框关闭 : dialogVisible从true变成false

@open 弹框打开 : dialogVisible从false变成true

• html结构

<el-button type="text" @click="dialogVisible = true"
  >点击打开 Dialog</el-button
>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  @close="dialogClose"
  @open="dialogOpen"
  width="30%"
>
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false"
      >确 定</el-button
    >
  </span>
</el-dialog>

data数据

<script>
export default {
  data() {
    return {
      //对话框数据
      dialogVisible: false,  
    }
  },
  methods: {
    dialogClose() {
      console.log('弹框要关闭了')
    },
    dialogOpen(){
      console.log('弹框打开咯')
    }
  }
}
</script>

1.3-弹框官方文档：

官方文档：Element - The world's most popular Vue UI framework

 

 <el-button type="text" @click="openMessage">提示框</el-button>
<el-button type="text" @click="open">弹框</el-button>

//提示框
openMessage() {
  this.$message({
    type: "success ",
    message: `月薪15K`
  })
},
//弹框
open() {
  this.$alert("你真的要走吗？", "系统提示", {
    confirmButtonText: "确认",
    callback: action => {
      this.$message({
        type: "info",
        message: `action: ${action}`
      })
    }
  })
}