阅读 47

饿了么-Element-Ui

一、element-ui 准备

  1. 安装: npm i element-ui -S

  2. 引入

  • 引入样式
  • 引入组件库
  1. 在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)
});
复制代码

二、用到的主要组件table、pagination、from、tree、dialog

table

  1. 通过Scoped slot可以获取到row,column,$index和store(table内部的状态管理)的数据
  • :data: 数据源
  • prop: 决定数据是哪个属性 - 对于表格来说, 它的数据是一个数组,每一个元素是一个对象
  • lable: 决定当前列显示出的标题
  • width: 用来设置列的宽度。如果不设置,它会自适应。

pagination

  • layout 布局
  • total 一共有多少条数据
  • @current-change 分页事件

from

校验:

1. 在data()定义规则

rules: {
   字段名:[
     {// 规则1},
     {// 规则2},
     {validator: function(rule, value, callback) {
         // 通过校验: callback() 
         // 没有通过校验: callback(new Error('错误说明')) 
     }}
   ]
}
复制代码

2. 在模板中应用规则

el-form

  1. model: v-model
  2. ref: 添加ref来引用el-form组件。
  3. rules: 给表单设置 rules 属性传入验证规

el-form-item

  1. prop
  • 直接使用prop只能渲染文本,通过prop不能直接渲染的时,我们需自定义内容渲染
  • 自定义这个两个关键字:labelchildren,就需要用到props属性
  • prop 属性需要指定表单对象中的数据名称

3. 手动兜底校验

this.$refs.表单组件.validate(valid => {
  valid   ==> true,false
})
复制代码

注意:

下面这三个地方的属性要一致! Snipaste_2021-05-09_22-37-06.jpg 清空校验:

this.$refs.表单组件.resetFields()
复制代码

tree

树状结构: 有一些业务场景在描述主体关系的时候必须使用树形数据,比如:我们常见的家庭成员关系图,公司里的组织架构等 Snipaste_2021-05-09_22-34-36.jpg 示例代码

<template>
  <el-tree :data="data"></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'
          }]
        }]
      }]
    }
  }
}
</script>
复制代码

dialog 弹框组件

  • 使用默认插槽来自定义内容
  • 两种状态,打开关闭,若想在它打开或关闭时做一些自己的事情,就可以监听两个事件
  • @close 弹框关闭 : dialogVisible从true变成false
  • @open 弹框打开 : dialogVisible从false变成true
  1. 弹框组件一共俩种状态:打开和关闭 visible.sync=“bool值”
  2. openclose两个自定义事件要关注
文章分类
前端
文章标签