Author Gitee address https://gitee.com/thciweicloud
Author project Bread blog , a front-end and back-end separation blog system of microservice architecture.

element-ui

Is element UI a UI component library developed by the team

Tips

When we use some components, we often need v-model binding values to select or display them. When we encounter Boolean types, we need to use ':' for attribute binding

1. Button assembly

1.1. Button entry

#1.1. Default button style
 <el-row>
      <el-button>Default button</el-button>
      <el-button type="empty/primary/success/info/warning/danger">main-success/information/warning/DANGER/Button</el-button>
    </el-row>
#1.2. Simple buttons will be displayed only when the mouse is placed
 <el-row>
   <el-button type="empty/primary" plain>simple-success/information/warning/Danger button</el-button>
    </el-row>
#1.3. Fillet button
 <el-row>
  <el-button type="empty/primary" round>fillet-success/information/warning/DANGER/Button</el-button>
</el-row>
#1.4. Icon button
<el-row>
  <el-button  type="empty/primary" icon="el-icon-search" circle></el-button>

1.2. Detailed use of buttons

Summary: when using related components of element UI in the future, it should be noted that all components begin with e1- component names

2.1 create button (attribute / button group)

When reading the document, you can look at Attributes to get familiar with the Attributes of button. The default value is true when building or writing Attributes (plain < plain = "true" >)

#1 <el-button type="success" round circle icon="el-icon-loading"></el-button>
   //Generally, the circle does not put text, pictures or effects 

#2<el-button-group></el-button-group>

2.Link text link component

2.1. Creation of text link component

It defaults to true when creating. When de underlining is set, the underline needs to be written as

<el-link target=" _blank" href="http://www.baidu.com"type="success" :underline="false"></el-link>

Because underline wants us to pass a boolean value. If you do not add: (binding), it will be considered that we passed a string from js, resulting in the function not taking effect.

Target = "_blank" open link in new window

3. Use of layout components

Through the basic 24 columns, the layout can be created quickly and easily. In the element ui, the layout component divides the page into multiple rows, and each row can be divided into 24 columns (columns) at most

Row: row Columns: column

The number of Layout columns is twice that of bootstrap. Why 24?

Whether it is 24 or 12, it is for the convenience of future mathematical calculation, and the common multiple of 3 / 4 / 6 is selected

3.1 use of rows

  <el-row :gutter="50" tag="span">
      <el-col :span="6"><div style="border: 1px solid red">Occupancy 6</div></el-col>
      <el-col :span="4"><div style="border: 1px solid red">Occupancy 2</div></el-col>
      <el-col :span="4"><div style="border: 1px solid red">Occupancy 4</div></el-col>
      <el-col :span="10"><div style="border: 1px solid red">Occupancy 4</div></el-col>
    </el-row>

Tag = "span" tag can render lines into some notes

3.2 use of columns

 <el-row>
      <el-col :span="12" :offset="6"><div style="border: 1px solid red">Occupation 12</div></el-col>
 </el-row>

Column offset

: offset = "" offset several copies (left space)

: push = "" move right ""

offset is equivalent to a margin, and push is equivalent to right floating

4.Container container layout components

4.1 creating containers

<el-container>

</el-container>

4.2 container child elements

<el-header>: Top bar container.
<el-aside>: Sidebar container.
<el-main>: Main area containers.
<el-footer>: Bottom bar container.

4.3 nesting of containers

vertical horizontal

vertical when there is an EL header or El footer in the child element, otherwise horizontal

<el-container direction="vertical"></el-container>

5. Use of radio button components

5.1 creation of radio buttons

<el-radio v-model="label" label="male">male</el-radio>
<el-radio v-model="label" label="female">female</el-radio>

<script>
export default {
  data() {
    return {
      label: "male",
    };
  },
};
</script>

radio adds at least two attributes: v-model and label

v-model binds data, and label determines the value value. In the above case, the radio button defaults to male

5.2 use of radio events

• Listening events provided by element UI for radio

• When using events, you must use vue to bind time, such as @ click

 <el-radio v-model="label" @change="aa" :border="true" size="mini" label="male" >male</el-radio>

export default {
  data() {
    return {
      label: "male",
    };
  },
  methods: {
    aa() {//Event handler
      //   alert("Mr. Ma");
      console.log(this.label);
    },
  },
};

When the button is selected, get the label value "male"

5.3 button group

 <el-radio-group v-model="radio">
      <el-radio label="3">Alternative 3</el-radio>
      <el-radio label="6">Option 6</el-radio>
      <el-radio label="9">Option 9</el-radio>
    </el-radio-group>
    
    export default {
  data() {
    return {
      radio: "3",
    };
  },
  methods: {
  },
};
</script>

Note that text color / fill is an attribute of El radio button

6.checkbox component

6.1 creating components

  <el-checkbox v-model="checked" true-label="Beijing">Beijing</el-checkbox>
    <el-checkbox v-model="checked" true-label="Shanghai">Shanghai</el-checkbox>
    <el-checkbox v-model="checked" true-label="Tianjin">Tianjin</el-checkbox>

6.2 attribute usage

The properties are roughly the same as the previous components,

When checking checked, match the checked value through true label

export default {
  data() {
    return {
      checked: "Shanghai",
    };
  },
};

6.3 event use

@change=""

6.4 the check box group also exists

min is the minimum number that can be checked

<el-checkbox-group v-model="checkList"
:min="1">
</el-checkbox-group>

7.input component

7.1 creating

input is the bound value of the controlled component

<el-input ></el-input>
<el-input v-model="name"></el-input>
export default {
  data() {
    return {
      name: "",
    };
  },
};

7.2 properties

type="textarea"//Build text field
v-model="name" 
v-model="name1"

v-model binds different instances to ensure that the input box does not update data synchronously

Display input word count

show-word-limit
 Only in type="text"and type="textarea"Time effective
 Word count needs to limit the number of words to display
:maxlength=""  :minlength=""

7.3 events

@Clear clear clear

@change

7.4 component method

The method is the last big knowledge point of element UI. The method is used to change the state of the component itself

Name by ref (component alias). This. $Ref. component alias. Element UI has its own method in the method

 <el-input v-model="name3"ref="inputs"></el-input>
  <el-button @click="focusInputs">focus method</el-button>
    <el-button @click="blurInputs">blur method</el-button>
export default {
  data() {
    return {
      name3: "",
    };
  },
  methods: {
//Call the focus method
    focusInputs() {
      this.$refs.inputs.focus();
    },
//Call the out of focus method
    blurInputs() {
      this.$refs.inputs.blur();
    },
  },
};

Note: all components in elements have attribute events and methods
Attribute: written directly on the corresponding component label. Usage: attribute name = attribute value
Event: directly use vue to bind the event Party and write it on the corresponding component label. Usage: @ event name = event handling function in vue
Methods: 1. Use ref = component alias on the corresponding component label

2. Call by using this. $refs. Component alias. Method name ()

8.Select components

8.1 write dead on the page

<el-select>
      <el-option>Beijing</el-option>
      <el-option>Shanghai</el-option>
 </el-select>

There should also be v-model data binding in the case of write dead

8.2 loading lists using remote data

<template>
  <div>
    <el-select>
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: "1", name: "Canteen" },
        { id: "2", name: "Millet Department" },
        { id: "3", name: "Xiaohua Department" },
      ],
    };
  },
};

8.3 obtain the selected data in the following list

There is also the use of attributes (multiple clear = "")

<template>
  <div>
    <el-select v-model="cityId" multiple clearable="">
      <el-option
        v-for="option in options"
        :label="option.name"
        :value="option.id"
        :key="option.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: "1", name: "Canteen" },
        { id: "2", name: "Small mi Department" },
        { id: "3", name: "Small hua Department" },
      ],
      cityId: "",
    };
  },
};

8.4 event use

  <el-select v-model="cityId" multiple clearable="" @change="aaa">
   </el-select>
   
    methods: {
    aaa(value) {
      console.log(value);
    },
  },

8.5 use of methods

ref="alias"

bbb(){
this.$ref.alias.method();
}

9.Switch components

9.1 creating components

<el-switch v-model="value">
</el-switch>
export default {
  data() {
    return {
      value: "",
    };
  },
};

width to add:

9.2 use of attributes

 <el-switch
      v-model="value"
      :width="200"
      active-text="open"
      inactive-text="close"
      active-value="true"
      inactive-value="false"
    ></el-switch>
    <!-- Need to bind a bool value -->

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};

9.3 use of events

@change indicates status

9.4 use of methods

  aaa() {
      this.$refs.switchs.focus();
    },

The way components call methods is basically the same

10.DataPicker component

10.1 creating components

<el-date-picker v-model="value">
</el-date-picker>

10.2 unique attributes

Pick options attribute to bind ':'

• picker Options is used to customize the date control
• shortcuts is a shortcut panel used to add date components

10.2.1 use of shortcuts

 <el-date-picker
        v-model="value2"
        :editable="false"
        type="date"
        placeholder="Please enter the time"
        :picker-options="pickerOptions"
      ></el-date-picker>


<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            //Defined shortcuts
            text: "Last week",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "Last month",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "Last three months",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
    };
  },
};
</script>

10.2.2 use of picker options

When we want users to select dates only forward or backward, we need to customize the configuration

Time before today is not available

 <el-date-picker
      v-model="createDate"
      :editable="false"
      type="date"
      placeholder="Please enter the time"
      :picker-options="pickerOptions"
    ></el-date-picker>
    
    <script>
export default {
  data() {
    return {
      createDate: "",

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      value2: "",
      value1: "",
      value: "",
    };
  },
};
</script>

Methods are rarely used and are the same as the previous components

10.3 use of events

<el-date-picker @change="aaa"></el-date-picker>

 methods: {
    aaa(value) {
      console.log(value);
      //Select time and return time in the background
    },
  },

11.Upload component

Note: when using the upload component, there is no event event, and all events are attribute events

11.1 components created

When creating, action is a necessary attribute

  <el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">Click upload</el-button>
       <div slot="tip" class="el-upload__tip">
      Upload only jpg/png Documents, and no more than 500 kb
    </div>//Be sure to put it inside
    </el-upload>

11.2 use of attributes

multiple, pay attention to the boolean type, and be sure to: use binding

<template>
  <div>
    <h1>upload</h1>
    <el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      :data="info"
      :on-remove="remove"
      :before-remove="beforemove"
      :limit="2"
      :on-exceed="exceed"
    >
      <el-button size="small" type="primary">Click upload</el-button>
      <div slot="tip" class="el-upload__tip">
        Upload only jpg/png Documents, and no more than 500 kb
      </div>
      <!-- div Text on upload in -->
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      info: { id: 21 },
    };
  },
  methods: {
    remove(file, fileList) {
      console.log(file);
      console.log(fileList);
      alert(fileList.length);
    },
    beforemove(file, fileList) {
      if (fileList.length < 3) 
      alert("The number of files cannot be less than three");
      return false;
    },
    exceed(file, fileList) {
      alert("File out of limit");
    },
  },
};
</script>

slot we use to place instructions and tips

11.3 use of methods

Still the traditional way, ref = "alias"

< El button @ Click = "method" > trigger

Method ()

12.Form component

Simple, because we just fill in the previous components; Complex because we have to complete a variety of form validation

12.1 creation of components

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="Activity name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
 ......
    <el-button type="primary" @click="onSubmit">Create now</el-button>
    <el-button>cancel</el-button>
  </el-form-item>
</el-form>

12.2 inline form

<el-form :inline="true" :model="formInline" class="demo-form-inline">
</el-form>

Use inline = "true" to change the form field into an in line form field

12.3 form validation

What is form validation? One of the biggest problems solved by the birth of javascript is form verification. We verify whether the format of the input content is consistent, the number of words is insufficient or exceeds, and the response information is quickly returned to the user. There is no need to return the data to the background server, which will not increase the load of the server

The Form component provides the function of Form verification. You only need to pass in the agreed verification rules through the rules attribute and set the prop attribute of the Form item to the field name to be verified. For verification rules, see async-validator

 <el-form>
 <el-form-item label="Activity name" prop="name">
   <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
  ......
</el-form>

export default {
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
{ required: true, message: "Please enter the activity name", trigger: "blur" },
{ min: 3, max: 5, message: "The length is between 3 and 5 characters", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};

13. Message prompt

13.1 alert component

13.1.1 create

<el-alert title="success" type="success">
</el-alert>

13.1.2 use of attributes

//For the use of slots, many components learned earlier can also use slots
<el-alert>
<div slot>I'm auxiliary information</div>
</el-alert>

//Whether to display icon and customize closing text
<el-alert
      title="Success information prompt"
      :show-icon="false"
      close-text="close"
    ></el-alert>

13.2 Message component

There is no way to create El message, but element UI is encapsulated in js

• Note that there is no need to write any label in the page to create this component. It is a js plug-in. You can directly call the provided js plug-in method where you need to display the message prompt

 <el-button type="primary" @click="open">Open message prompt
 </el-button>

export default {
  data() {
    return {};
  },
  methods: {
    open() {
      this.$message("This is a reminder");
    },
  },
};

Custom message tips

   openVn() {
      const h = this.$createElement;
      this.$message({
        message: h("p", null, [
h("span", null, "Order created successfully,Your order number is"),
 h("a", { style: "color:teal" }, "87"), //html notes can be used, such as i, a, i notes can play a tilt effect
        ]),
      });
    },

Message tips for different topics

success warning error

  <el-button :plain="true" @click="open3">warning</el-button>
  
 open3() {
      this.$message({
        message: "This is a warning",
        type: "warning",
      });
    },

13.2.1 use of attributes

  <el-button :plain="true" @click="open3">warning</el-button>
    <el-button :plain="true" @click="closeOpen3">Turn off warning</el-button>

duration:0 causes the warning not to close automatically

Create a method to close manually

 open3() {
      this.$message({
        message: "This is a warning",
        type: "warning",
        showClose: true,
        center: true,
        duration: 0,
      });
    },
    closeOpen3() {
  this.$message.closeAll();
    },

14.table component

14.1 creation

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="Student number"> </el-table-column>
      <el-table-column prop="name" label="full name"> </el-table-column>
      <el-table-column prop="age" label="Age"> </el-table-column>
      <el-table-column prop="email" label="mailbox"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 21, name: "Xiao Chen", age: 23, email: "1462106425@qq.com" },
        { id: 22, name: "Xiao Chen", age: 23, email: "1462106425@qq.com" },
      ],
    };
  },
  //   created(){
  // this.axios.get("")
  //   }The normal form data entry method can update the data in real time. We temporarily use the above false data instead
};
</script>

14.2 use of attributes

empty-text=" "

The content will be displayed when the whole form has no data

 <el-table
      :data="tableData"
      :row-class-name="showCss"
      :height="600"
      :fit="true"
      empty-text="No data"
      border
    >
 <el-table-column type="selection">
 </el-table-column>
     //checkbox
     
</el-table>


 methods: {
    sorts(a, b) {
      return a.age - b.age; //Sort > 0 ascending
    },
    showDept(row, column, cellValue, index) {
      if (cellValue) {
        return cellValue;
      } else {
        return "No department";
      }
    },
    showCss({ row, rowIndex }) {
      if (rowIndex % 2 == 0) return "warning-row";
      else return "success-row";
    },
  },

14.3 use of events

<el-table @Event name="Method name">
</el-table>

14.4 use of methods

Clear the selection. The ref name must be in the El table, not in the selection column

   <el-table
      :data="tableData"
      :row-class-name="showCss"
      :height="600"
      :fit="true"
      empty-text="No data"
      @select="aaa"
      ref="mytable"
      border
    >
  <el-table-column type="selection">
      </el-table-column>
 </el-table>
 
   <el-button @click="clearSelect">Uncheck</el-button>
 
 clearSelect() {  this.$refs.mytable.clearSelection();
    },

14.5 define the operation column in the table

 <el-table-column>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
  </template>
  </el-table-column>
  
  
    handleEdit(index, row) {
      console.log(index);
      console.log(row);
    },
    handleDelte(index, row) {
      console.log(index);
      console.log(row);
    },

14.6 definition header

  <el-table
      :data="
        tableData.filter(
          (data) =>!search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      :row-class-name="showCss"
      :height="400"
      :fit="true"
      empty-text="No data"
      @select="aaa"
      ref="mytable"
      border
    >
    ......
    
    <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="Enter keyword search" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
 <el-button size="mini" type="danger"
     @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
 </el-table>
 
 
   handleEdit(index, row) {
      console.log(index);
      console.log(row);
    },
    handleDelte(index, row) {
      console.log(index);
      console.log(row);
    },

element small project case

(1) NavMenu navigation menu

App.vue
<template>
  <div id="app">
<el-container>
      <el-header>
        <!-- navigation bar -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
<el-menu-item index="/index">homepage</el-menu-item>
<el-menu-item index="/users">user management </el-menu-item>
<el-menu-item index="/msgs">Message center</el-menu-item>
<el-menu-item index="/order"> Order management</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>Main</el-main>
</el-container>
    <router-view></router-view>
</div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      //Switch route
      this.$router.push(key);
    },
  },
};
</script>
<style >
</style>

List.vue
<template>
  <div>
    <h1>show user</h1>
  </div>
</template>

<script>
export default {
  name: "List",
};
</script>

<style>
</style>

report errors:

Uncaught(in promise)NavigationDuplicated: Avoided redundant navigation to current location: "/index".

The solution is added under Vuerouter introduced in main.js

const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

(2) Home page rotation chart and user management form

Carousel map - walking lantern

View the lantern, Image and Image documents

Here are some problems:

fill and other styles / binding of pictures

It is generally appropriate to change height to 600px

V-for = "picture data in item in data"

<template>
  <div>
    <el-carousel indicator-position="outside">
 <el-carousel-item v-for="item in imgs" :key="item">
 <el-image style="height: 600px" :src="item" fit="fill"></el-image>
 <!-- Because the picture style is written dead, there is no need to bind fit(:fit) -->
 </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import homePng1 from "../assets/homepng/1.jpg";
import homePng2 from "../assets/homepng/2.jpg";
import homePng3 from "../assets/homepng/3.jpg";
import homePng4 from "../assets/homepng/4.jpg";
export default {
  name: "Index",
  data() {
    return {
imgs: [homePng1, homePng2, homePng3, homePng4],
    };
  },
};
</script>

form

Find the Table document and select the custom column template section

subject

List.vue
<template>
  <div>
<el-table
 :data="tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="date" 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="number" prop="id"> </el-table-column>
      <el-table-column label="full name" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>full name: {{ scope.row.name }}</p>
            <p>address: {{ 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="Gender" prop="sex"> </el-table-column>
      <el-table-column label="operation">
      
 <template slot="header" slot-scope="scope">
<el-input v-model="search"
placeholder="Please enter a name keyword to search"></el-input>
 </template>
 
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-button type="success">add to</el-button>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      search: "",
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "Wang Xiaohu",
          address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai",
          sex: "male",
        },
        {
          id: 2,
          date: "2017-01-02",
          name: "Power pig",
          address: "Jinshajiang Road, Beijing ",
          sex: "male",
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

search

The search box is in the same column as the operation section

<template slot="header" slot-scope="scope">
 <el-input v-model="search" placeholder="Please enter a name keyword to search"></el-input>
</template>

By setting Scoped slot Custom header.

We need a slot solt. For the solt attribute, we temporarily use the form of slot="header/footer", but it has been changed to v-solt:header in the new version of vue

 <template v-slot:header>
     
 </template>

filter

Find the custom header section and view the filtering example

At the beginning, the search cannot be used because the entire table is not filtered. Here we will filter the name as an example

 el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"

add to

<el-button style="margin-top: 10px" type="success">add to</el-button>

 <el-container>
      <el-aside width="300px" >
           
  <el-col :span="12">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router="true">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>home page</span>
        </template>
     
      </el-submenu>
      <el-menu-item index="/echarts2">
        <i class="el-icon-menu"></i>
        <span slot="title">image</span>
      </el-menu-item>
      <el-menu-item index="/personMan" >
        <i class="el-icon-document"></i>
        <span slot="title">Personnel management</span>
      </el-menu-item>
      <el-menu-item index="/actRecord">
        <i class="el-icon-setting"></i>
        <span slot="title">Activity record</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
      </el-aside>
    </el-container>