I. Element-UI preparation

  1. Install: NPM I element-uI-s

  2. The introduction of

  • The introduction of the style
  • Importing component libraries
  1. Write the following in 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)
});
Copy the code

Table, Pagination, FROM, Tree, dialog

table

  1. throughScoped slotRow,column,$index, and Store (state management within the table) are available
  • : data: data source
  • Prop: Determine which properties the data is – for a table, its data is an array, and each element is an object
  • Lable: Determines the title to display for the current column
  • Width: Sets the width of the column. If not set, it ADAPTS.

pagination

  • Layout layout
  • Total How many pieces of data there are
  • @current-change Indicates a paging event

from

Check:

1. Define rules in data ()

Rules: {field name: [{// rule 1},
     {// rule 2},
     {validator: function(rule, value, callback) {
         // Check: callback()
         // Callback (new Error(' Error '))}}}]Copy the code

2. Apply rules to the template

el-form

  1. Model: v – model
  2. Ref:refTo refer toel-formComponents.
  3. Rules: Set the formrulesProperty is passed into the validation gauge

el-form-item

  1. Prop:
  • Direct use ofpropCan only render text throughpropWe need to customize content rendering when we can’t render directly
  • Customize this two keywords:labelandchildren, you need to usepropsattribute
  • propProperty to specify the name of the data in the form object

3. Manual pocket check

this.$refs. Form component.validate (valid= > {
  valid   ==> true.false
})
Copy the code

Note:

The following three places should have the same properties!Clear verification:

this.$refs. form component. resetFields()Copy the code

tree

Tree structure: There are some business scenarios that must use tree data to describe the relationship between principals, such as the common family member relationship diagram, the organizational structure of the company, etc The sample code

<template>
  <el-tree :data="data"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: 'level 1'.children: [{
          label: 'secondary 1-1'.children: [{
            label: 'triple the 1-1-1'}}]]}, {label: 'level 2'.children: [{
          label: 'secondary 2-1'.children: [{
            label: 'triple the 2-1-1'}]}, {label: 'secondary 2-2'.children: [{
            label: 'triple the 2-2-1'}}]]}, {label: 'level 3'.children: [{
          label: 'secondary 3-1'.children: [{
            label: 'triple the 3-1-1'}]}, {label: 'secondary 3-2'.children: [{
            label: 'triple the 3-2-1'}]}]}}}</script>
Copy the code

Dialog box component

  • Customize content using default slots
  • There are two states,Open theandShut downIf you want to do something for yourself while it’s on or off, you can listen for two events
  • @close Popbox close:DialogVisible changed from True to False
  • @open Popbox opens:DialogVisible changed from False to True
  1. The frame component has two states: open and closedVisible. The sync = "Boolean value"
  2. openandcloseTwo custom events to focus on