Element UI

1. The Element introductions to the UI

Liverpoolfc.tv: element. The eleme. IO / # / useful – CN

1.1 Official Definitions

Site rapid prototyping tools and desktop component libraries

1.2 define

The Element UI is a UI framework based on VUE, which develops many related components based on VUE to facilitate rapid page development.

1.3 origin

The Ele. me front end team developed on vue and made the open source Element UI all packaged components.

2. Install the Element UI

2.1 Creating a project using vUE scaffolding

Vue Init Webpack ElementCopy the code

2.2 Installing ElementUI in a VUE scaffolding project

# 1. Download the elementUI dependencies
	npm i element-ui -S

# 2. Specify the use of ElementUI in the current project
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';// Use elementUI in vue scaffolding	Vue.use(ElementUI);
Copy the code

3. Button Component (example)

3.1 Default Style buttons

<el-row>
  <el-button>The default button</el-button>
  <el-button type="primary">The main button</el-button>
  <el-button type="success">Successful button</el-button>
  <el-button type="info">Information button</el-button>
  <el-button type="warning">The warning button</el-button>
  <el-button type="danger">Dangerous button</el-button>
</el-row>
Copy the code

3.2 Simple Button

<el-row>
  <el-button plain>A simple button</el-button>
  <el-button type="primary" plain>The main button</el-button>
  <el-button type="success" plain>Successful button</el-button>
  <el-button type="info" plain>Information button</el-button>
  <el-button type="warning" plain>The warning button</el-button>
  <el-button type="danger" plain>Dangerous button</el-button>
</el-row>
Copy the code

3.3 Rounded Buttons

<el-row>
  <el-button round>The rounded button</el-button>
  <el-button type="primary" round>The main button</el-button>
  <el-button type="success" round>Successful button</el-button>
  <el-button type="info" round>Information button</el-button>
  <el-button type="warning" round>The warning button</el-button>
  <el-button type="danger" round>Dangerous button</el-button>
</el-row>
Copy the code

3.4 ICONS

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
Copy the code

4. Detailed use of button components

Bottom line: One thing to note when using related components of the Element UI in the future is that all components begin with an EL-component name

4.1 Create Button

<el-button>The default button</el-button>
Copy the code

4.2 Button Properties

<el-button type="primary"The attribute name =Attribute values>The default button</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>
Copy the code

Summary: Attributes for all components in the ElementUI are written on the component label

4.3 Button Group Usage

<el-button-group>
  <el-button type="primary" icon="el-icon-back">The previous page</el-button>
  <el-button type="primary" icon="el-icon-right">The next page</el-button>
</el-button-group>
Copy the code

Note:

  • All components in the Element UI areEl - Indicates the name of a componentMethod of naming
  • Component properties in the Element UIAttribute name = attribute value is directly written on the corresponding component label

5.Link Text Link component

5.1 Creating text link components

<el-link>The default link</el-link>
Copy the code

5.2 Use of properties of text link components

<el-link  target="_blank" href="http://www.baidu.com" >The default link</el-link>
<el-link type="primary":underline="false">The default link</el-link>
<el-link type="success" disabled>The default link</el-link>
<el-link type="info" icon="el-icon-platform-eleme">The default link</el-link>
<el-link type="warning">The default link</el-link>
<el-link type="danger">The default link</el-link>
Copy the code

The use of Layout components

Create a layout quickly and easily with a basic 24 columns

The layout component in the Element UI divides the page into rows, with up to 24 columns per row

6.1 Using the Layout component

<el-row>
	<el-col :span="8">Take up eight</el-col>
  <el-col :span="8">Take up eight</el-col>
  <el-col :span="8">Take up eight</el-col>
</el-row>
Copy the code

Note:

  • In a layout component is made byrow 和 colcombination
  • Differentiate when usingThe row attribute 和 Col attributes

6.2 Use of attributes

  • Row property use

    <el-row :gutter="50" tag="span">
  <el-col :span="4"><div style="border: 1px red solid;">Occupy four</div></el-col>
  <el-col :span="8"><div style="border: 1px red solid;">Take up eight</div></el-col>
  <el-col :span="3"><div style="border: 1px red solid;">Takes 3 copies</div></el-col>
  <el-col :span="9"><div style="border: 1px red solid;">Take up 9</div></el-col>
</el-row>
Copy the code

  • The use of column properties

    <el-row>
  <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">I'm taking 12 points</div></el-col>
  <el-col :span="6"><div style="border: 1px blue solid;">I'm taking 6 points</div></el-col>
</el-row>
Copy the code

7.Container Lays out Container components

7.1 Creating a layout container

<el-container>
	
</el-container>
Copy the code

7.2 Child elements contained in a container

<el-header>: top bar container.<el-aside>: Sidebar container.<el-main>: Main area container.<el-footer>: Bottom column container.Copy the code

7.3 Nesting of containers

<! Create a container -->
<el-container>
  <! --header-->
  <el-header><div><h1>I am heading</h1></div></el-header>
  <! Use nested containers -->
  <el-container>
    <! --aside-->
    <el-aside><div><h1>I am a menu</h1></div></el-aside>
    <! --main-->
    <el-main><div><h1>I'm the centerpiece</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>I am a footer</h1></div></el-footer>
</el-container>
Copy the code

7.4 Horizontal Containers

<el-container direction="horizontal">
  <! --header-->
  <el-header><div><h1>I am heading</h1></div></el-header>
  <el-container>
    <! --aside-->
    <el-aside><div><h1>I am a menu</h1></div></el-aside>
    <! --main-->
    <el-main><div><h1>I'm the centerpiece</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>I am a footer</h1></div></el-footer>
</el-container>
Copy the code

Note: Containers are arranged horizontally when there is no el-header or el-footer in the child element

7.5 Vertical Containers

<el-container direction="vertical">
  <! --header-->
  <el-header><div><h1>I am heading</h1></div></el-header>
  <el-container>
    <! --aside-->
    <el-aside><div><h1>I am a menu</h1></div></el-aside>
    <! --main-->
    <el-main><div><h1>I'm the centerpiece</h1></div></el-main>
  </el-container>
  <! --footer-->
  <el-footer><div><h1>I am a footer</h1></div></el-footer>
</el-container>
Copy the code

8.Form related components

8.1 Radio Radio button

1. Create Radio button

<! -- Component creation -->
<el-radio v-model="label" label="Male">male</el-radio>
<el-radio v-model="label" label="Female">female</el-radio>
<script>
    export default {
        name: "Radio",
        data(){
            return{
                label:'male'}}}</script>
Copy the code

Note: When using the radio radio button, add at least two properties: V-Model and Label

2. Use of the Radio button property

<el-radio v-model="label" name="sex" disabled label="Male">male</el-radio>
<el-radio v-model="label" name="sex" border size="small" label="Female">female</el-radio>
<el-radio v-model="label" border size="mini" label="Female">female</el-radio>
<el-radio v-model="label" border size="medium" label="Female">female</el-radio>
Copy the code

Summary: Attribute use or directly uninstall the corresponding component label to use the attribute name = attribute value mode

3. Use of Radio events

<el-radio v-model="label" @change="aa" name="sex" label="Male">male</el-radio>
<el-radio v-model="label" @change="aa" name="sex" border size="small" label="Female">female</el-radio>



<script>
    export default {
        name: "Radio",
        data(){
            return{
                label:'male'}},methods:{
            aa(){ // The event handler defined
                console.log(this.label); }}}</script>
Copy the code

Conclusion:

  • The use of events is the same as the use of attributes, which are written directly on the corresponding component label
  • Events must be used in the Vue bound time mode such as @event name = event handler (bound in the Vue component corresponding function)

4. The radio button group

<el-radio-group v-model="radio">
  <el-radio :label="3">Alternative 3</el-radio>
  <el-radio :label="6">Optional item 6</el-radio>
  <el-radio :label="9">Alternatives to the 9</el-radio>
</el-radio-group>
<script>
  export default {
    name: "Radio",
    data() {
      return {
        radio: 6}}}</script>
Copy the code

8.2 the checkbox component

1. Create the CheckBox component

<el-checkbox v-model="checked">Beijing</el-checkbox>
<el-checkbox v-model="checked">Shanghai</el-checkbox>
<el-checkbox v-model="checked">tianjin</el-checkbox>
Copy the code

2. Use of attributes

<el-checkbox v-model="checked"  disabled true-label="Beijing">Beijing</el-checkbox>
<el-checkbox checked border true-label="Shanghai">Shanghai</el-checkbox>
<el-checkbox v-model="checked" true-label="Tianjin">tianjin</el-checkbox>
Copy the code

3. Event usage

<el-checkbox @change="aa"v-model="checked"  true-label="Shanghai">Shanghai</el-checkbox>
<el-checkbox v-model="checked" @change="aa" true-label="Tianjin">tianjin</el-checkbox>
<script>
    export default {
        name: "Checkbox",
        data(){
            return{
                checked:true}},methods:{
            aa(){
                console.log(this.checked); }}}</script>
Copy the code

4. Use of checkbox groups

<el-checkbox-group @change="bb" :min="1" v-model="checkList">
  <el-checkbox label="Check box A"></el-checkbox>
  <el-checkbox label="Check box B"></el-checkbox>
  <el-checkbox label="Check box C"></el-checkbox>
  <el-checkbox label="Disabled" disabled></el-checkbox>
  <el-checkbox label="Selected and disabled" disabled></el-checkbox>
</el-checkbox-group>
<script>
    export default {
        name: "Checkbox",
        data(){
            return{
                checked:true.checkList: [].}},methods:{
            aa(){
                console.log(this.checked);
            },
            bb(){
                console.log(this.checkList); }}}</script>
Copy the code

8.3 Input Input box components

1. Create the Input component

<el-input v-model="name"></el-input>
<script>
    export default {
        name: "Input",
        data(){
            return {
                name:'xiaochen'}}}</script>
Copy the code

2. Common attributes

<el-input v-model="name" disabled type="textarea"></el-input>
<el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input>
<el-input prefix-icon="el-icon-user-solid" placeholder="Please enter your user name." clearable v-model="username"></el-input>
<el-input suffix-icon="el-icon-star-off" placeholder="Please enter your password" show-password type="password" clearable v-model="password"></el-input>
<script>
    export default {
        name: "Input",
        data() {
            return {
                restaurants: [].state1: ' '.state2: ' '.name:'xiaochen'.price:0.0.username:"".password:""}; }},</script>
Copy the code

3. Event usage

<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input>
<script>
    export default {
        name: "Input",
        data() {
            return {
                restaurants: [].state1: ' '.state2: ' '.name:'xiaochen'.price:0.0.username:"".password:""}; },methods:{
            aaa(){
                console.log('Out of focus');
                ;
            },
            bbb(){
                console.log("Get the spotlight.");
            },
            ccc(value){
                console.log("Change."+value);
            },
            clears(){
                console.log("Clear"); }}}</script>
Copy the code

4. Use of methods

<h1>Use of methods</h1>
<el-input v-model="username" ref="inputs"></el-input>

<el-button @click="focusInputs">Focus method</el-button>
<el-button @click="blurInputs">The blur method</el-button>

<script>
    export default {
        name: "Input",
        data() {
            return{}},methods: {// Call the focus method
            focusInputs(){
                this.$refs.inputs.focus();
            },
           // Call the out-of-focus method
            blurInputs(){
                this.$refs.inputs.blur(); }}}</script>
Copy the code

conclusion

  • When using a component’s method, you need to add it to the corresponding componentRef =" component alias"
  • Used directly when a method is calledThis.$refs. Component alias. The method name ()

Note: Attribute events and methods exist for all components in elementUI

Attribute: Directly write on the corresponding component label. Usage: Attribute name = attribute value

Event: Directly use the vUE binding event mode to write on the corresponding component label using: @event name = event handler in VUE

Methods: 1. Use ref= component alias on the corresponding component label. 2. Component alias. Method name () is called

8.4 Use of the Select Selector component

1. Create a component

# 1. Data is written dead on the page
<el-select v-model="cityName">
  <el-option value="Beijing">Beijing</el-option>
  <el-option value="Tianjin">tianjin</el-option>
</el-select>
Note :1. The drop-down list must contain the value 2 of option value. Requires that select must use V-Model for data binding

# 2. How to get data dynamically
 <el-select>
 		<el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id">
 		</el-option>
 </el-select>

  <script>
      export default {
          name: "Select",
          data(){
              return{
                  options:[
{id:'1',name: '1'},
{id:' 1 ',name: '2'},
{id:'3',name: '3'},
                  ]
              }
          },
      }
  </script>
  
# 3. Get the drop-down list of selected data
 <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>
<script>
    export default {
        name: "Select",
        data(){
            return{
                options:[
{id:'1',name: '1'},
{id:' 1 ',name: '2'},
{id:'3',name: '3'},
].
                cityId:''
            }
        },
    }
</script>
Copy the code

2. Use of attributes

<el-select v-model="cityId" multiple clearable>.</el-select>
Copy the code

3. Use of events

<el-select v-model="cityId" @change="aaa" multiple clearable>
  <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id">
  </el-option>
</el-select>
<script>
    export default {
        name: "Select",
        data(){
            return{
                options:[
                    {id:'1'.name:"Research and Development"},
                    {id:'2'.name:"The concession stand"},
                    {id:'3'.name:"The Millet division"},].cityId:' '.cityName:' '}},methods:{
            aaa(value){
                console.log(value); }}}</script>
Copy the code

4. Use of methods

1. Alias the component through the REF and bind it to the VUE instance<el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable>.</el-select>2. Call this.$refs.selects.focus(); // Method callCopy the code

8.5 Switch Switch component

1. Create the Switch component

<el-switch v-model="value"></el-switch>
<script>
  export default {
    name: "Switchs",
    data(){
      return{
        value:true}}}</script>
Copy the code

2. Use of attributes

<el-switch v-model="value" active-text="Open" active-color="#13ce66" inactive-color="#ff4949" :active-
           value="true" :inactive-value="false" inactive-text="Closed" :width="200">
</el-switch>
Copy the code

3. Event usage

<el-switch v-model="value" @change="aaa"></el-switch>
<script>
    export default {
        name: "Switchs",
        data(){
            return{
                value:true}},methods:{
            aaa(value){
                console.log(value); }}}</script>
Copy the code

4. Method use

<el-switch ref="sw" v-model="value" @change="aaa" active-text="Open" active-color="#13ce66" inactive-color="#ff4949" :active-value="true" :inactive-value="false" inactive-text="Closed" :width="200"></el-switch>
<el-button @click="bbb">A method is called</el-button>

<script>
    export default {
        name: "Switchs",
        data(){
            return{
                value:true}},methods:{
            aaa(value){
                console.log(value);
            },
            bbb(){
                alert();
                this.$refs.sw.focus();// Method call}}}</script>
Copy the code

8.6 DatePicker component

1. Create

<el-date-picker v-model="createDate" ></el-date-picker>
Copy the code

2. Use of attributes

<el-date-picker
        v-model="createDate"
        :editable="false"
        :clearable="false"
        placeholder="Please enter the creation time"
        type="daterange"
        start-placeholder="Production time"
        end-placeholder="Expiration time"
        format="yyyy/MM/dd"
      >
</el-date-picker>
Copy the code

3. Use Picker Options and Shortcuts

  • Shortcuts: A shortcut panel for adding date components
  • Picker Options: Used to customize the date control
3.1 use Shortcuts
</el-date-picker>
<h1>The date the configuration</h1>
<el-date-picker
                v-model="createDate"
                type="date"
                placeholder="Please enter the time"
                :picker-options="pickerOptions"
                >
</el-date-picker>
<script>
    export default {
        name: "DatePrickers",
        data(){
            return{
                createDate:"".pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{  // Defined shortucts
                        text: 'today',
                        onClick(picker) {
                            picker.$emit('pick'.new Date()); }}, {text: 'yesterday',
                        onClick(picker) {
                            const date = new Date(a); date.setTime(date.getTime() -3600 * 1000 * 24);
                            picker.$emit('pick', date); }}, {text: 'A week ago',
                        onClick(picker) {
                            const date = new Date(a); date.setTime(date.getTime() -3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date); }}]},}}}</script>
Copy the code

3.2 Picker Options
<el-date-picker
                v-model="createDate"
                type="date"
                placeholder="Please enter the time"
                :picker-options="pickerOptions"
                >
</el-date-picker>

<script>
    export default {
        name: "DatePrickers",
        data(){
            return{
                createDate:"".pickerOptions: {
                    disabledDate(time) { // Use to control the date
                        return time.getTime() < Date.now(); }},}}}</script>
Copy the code

4. Event usage

<el-date-picker
                .
                :picker-options="pickerOptions"
                @change="aaa"
                >
</el-date-picker>

<script>
    export default {
        name: "DatePrickers",
        data(){
            return{
                createDate:"",}},methods:{
            aaa(value){  // The function where the change event occurs
                console.log(value); }}}</script>
Copy the code

8.7 the Upload component

1. Create a component

<el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList">
  <el-button size="small" type="primary">Click on the upload</el-button>
  <div slot="tip" class="el-upload__tip">Only JPG/PNG files with a maximum size of 500KB can be uploaded</div>
</el-upload>
Copy the code

Note: When using the Upload component, you must set the Action attribute. The action attribute is required and cannot be omitted

2. Use of properties and events

<el-upload :limit="3" :on-exceed="exceed" :multiple="false" :before-remove="beforeRemove" :on-remove="remove" :on-preview="show" :drag="true" accept=".txt,.png" :show-file-list="true" name="aaa" :data="info" action="https://jsonplaceholder.typicode.com/posts/"
               :file-list="fileList">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">Drag the file here, or<em>Click on the upload</em></div>
  <div class="el-upload__tip" slot="tip">Only JPG/PNG files with a maximum size of 500KB can be uploaded</div>
</el-upload>

<script>
    export default {
        name: "Uploads",
        data() {
            return {
                fileList: [{
                    name: 'food.jpeg'.url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/qualit y/100'
                }, {
                    name: 'food2.jpeg'.url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/qualit y/100'}].info: {id:"21"}}},methods:{
            show(file){
                console.log(file);
            },
            remove(file,fileList){
                console.log(file);
                console.log(fileList);
                //alert(fileList.length)
            },
            beforeRemove(file,fileList){
                if(fileList.length<3){
                    alert("Upload no less than 3 files")
                    return false;
                }
            },
            exceed(file,fileList){
                alert("Number of files exceeded upload limit")}}}</script>
Copy the code
  • Note: There is no event event when using the Upload component. All events are property events

3. Use of methods

<el-upload ref="uploads" .>.</el-upload>Method call: this.$refs.uploads.clearFiles(); this.$refs.uploads.abort(); this.$refs.uploads.submit();Copy the code

8.8 the Form component

1. Create a component

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="Event Name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>.<el-form-item>
    <el-button type="primary" @click="onSubmit">Immediately create</el-button>
    <el-button>cancel</el-button>
  </el-form-item>
</el-form>
<script>
    export default {
        name: "Form",
        data() {
            return {
                form: {
                    name: ' '.region: ' '.date1: ' '.date2: ' '.delivery: false.type: [].resource: ' '.desc: ' '}}},methods: {
            onSubmit() {
                console.log('submit! '); }}}</script>
Copy the code

2. Inline forms

<el-form :inline="true" :model="formInline" class="demo-form-inline">.</el-form>
Copy the code

The form is treated as an inline form by setting Inline =true

3. Form validation

  • Instructions:

The Form component provides Form validation by passing in the convention validation rules via the Rules property and setting the form-item prop property to the name of the field to verify. For the verification rule, see async-Validator

3.1 Automatic verification of lost focus
<el-form :rules="rules" .>
  <el-form-item label="Event Name" prop="name">
      <el-input v-model="form.name"></el-input>
  </el-form-item>.</el-form>
<script>
    export default {
        name: "Form",
        data() {
            return {
                form: {
                    name: ' '.region: ' '.date1: ' '.date2: ' '.delivery: false.type: [].resource: ' '.desc: ' '
                },
                rules: {
                    name: [{required: true.message: 'Please enter an activity name'.trigger: 'blur'},
                        {min: 3.max: 5.message: '3 to 5 characters long'.trigger: 'blur'}],}}},methods: {
            onSubmit() {
                console.log('submit! '); }}}</script>
Copy the code
3.2 Form submission calls the validation method validation of the form component
<el-form :rules="rules". ref="form" >
    <el-form-item label="Event Name" prop="name">
      <el-input v-model="form.name"></el-input>
  	</el-form-item>
  	<el-form-item>
      <el-button type="primary" @click="onSubmit('form')">Immediately create</el-button>
      <el-button>cancel</el-button>
  	</el-form-item>
</el-form>. methods: { onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit! '); // Send asynchronous request to springBoot project} else {console.log('error submit!! '); return false; }}); }}Copy the code

4. Customize the form validation rules

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  <el-form-item label="Cell phone number" prop="phone">
    <el-input type="password" v-model="ruleForm.phone" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">submit</el-button>
    <el-button @click="resetForm('ruleForm')">reset</el-button>
  </el-form-item>
</el-form>

<script>
    export default {
        name: "Form",
        data() {
            let validatePhone = (rule,value,callback) = >{ // Define custom validation rules
                console.log(rule);
                console.log(value);
                console.log(callback);
                if(! value){ callback(new Error("The phone number cannot be empty!"));
                }
                if(!/^1[3456789]\d{9}$/.test(value)){
                    callback(new Error("The phone number is not correct!!"))}}return {
                form: {
                    name: ' '.region: ' '.date1: ' '.date2: ' '.delivery: false.type: [].resource: ' '.desc: ' '
                },
                rules: { // Validation rules
                    name: [ // Use the default rules
                        {required: true.message: 'Please enter an activity name'.trigger: 'blur'},
                        {min: 3.max: 5.message: '3 to 5 characters long'.trigger: 'blur'}].phone: [// Use custom rules
                        {validator:validatePhone,trigger: 'blur'}},ruleForm: {phone:' ',}}},methods: {}}</script>
Copy the code

9. Message prompt

9.1 Warning

1.1 Creating a warning

<el-alert title="Success Message" :closable="false" type="success">
  <div slot>I'm auxiliary information</div>
</el-alert>
<el-alert title="Success Message" type="info"></el-alert>
<el-alert title="Success Message" type="warning"></el-alert>
<el-alert title="Success Message" type="error"></el-alert>
Copy the code

1.2 Use of attributes

<el-alert title="Success Message" effect="dark" :show-icon="true" center :closable="false" type="success">
  <div slot>I'm auxiliary information</div>
</el-alert>
Copy the code

9.2 Message Message prompt

2.1 Creating Components

  • Note: this component is created without writing any tags on the page. It is a JS plug-in. You can simply call the provided JS plug-in method where you want to display the message prompt
$message(' this is a message prompt!! $message({message: h('p', null, [h('span', null, 'order created successfully '), h(' I ', {style: 'color: ') teal' }, '87') ]) }); This.$message({message:' this is a message ', type:"success",}) $message({message:' This is the message ', type:"success", showClose:true, center:true, iconClass:'el-icon-user-solid', duration:0 }) # 5. This.$message.closeAll();Copy the code

10. Table component

1. Create a component

<el-table :data="tableData">
  <el-table-column prop="id" label="Number"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="email" label="Email"></el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data(){
            return {
                tableData:[
                    {id:21.name:"Chen".age:23.email:"[email protected]"},
                    {id:22.name:"Zhang".age:25.email:"[email protected]"},]}}}</script>
Copy the code

2. Column attributes in the table

  • El – table – the column properties
<el-table-column prop="id" :resizable="false" header-align="left" align="center" fixed="left" width="200px;" label="Number"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" :sort-method="sorts" sortable label="Age"></el-table-column>
<el-table-column prop="email" label="Email"></el-table-column>
<el-table-column prop="dept.name" :formatter="showDept" label="Department"></el-table-column>
<script>
    export default {
        name: "Tables",
        data() {
            return {
                tableData: [{id: 21.name: "Chen".age: 23.email: "[email protected]".dept: {id: 1.name: "Research and Development"}}, {id: 22.name: "Zhang".age: 25.email: "[email protected]".dept: {id: 1.name: "The concession stand"}}, {id: 23.name: "Xiao li".age: 25.email: "[email protected]".dept:{}},]}},methods: {
            sorts(a, b) {
                return a.age - b.age;
            },
            showDept(row, column, cellValue, index){
                console.log(row);
                console.log(column);
                console.log(cellValue);
                console.log(index);
                if(cellValue){
                    return cellValue
                }
                return "No department yet"; }}}</script>
Copy the code

3. Table properties

<el-table :data="tableData" empty-text="No data yet." :row-class-name="showCss" highlight-current-row :show-header="true" :fit="true"
              size="mini" :height="600" border>

</el-table>
<script>. methods: { showCss({row, rowIndex}) {if (rowIndex % 2= =0) {
                    return "warning-row";
                }
                return "success-row"; }}</script>
Copy the code

4. Component event usage

<el-table@ Event name ="Event handler name"><el-table>

<script>
    export default {
        name: "Tables",
        data() {
            //....
        },
        methods: {
            / /... Event handler
            selectRow(selection, row){
                console.log(selection);
                console.log(row); }}}</script>
Copy the code

5. Use of component methods

<el-table  ref="mytable">.</el-table>// Call method this.$refs.myTableCopy the code

6. Define operation columns in the table

<el-table>.<el-table-column label="Operation">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">The editor</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">delete</el-button>
      </template>
    </el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data() {
            .....
        },
        methods: {
						// Event functions to handle editing and deletion
            handleEdit(index,row){
                console.log(index);
                console.log(row);
            },
            handleDelete(index,row){
                console.log(index);
                console.log(row); }}}</script>
Copy the code

7. Customize table headers

 <el-table :data="tableData.filter(data => ! search || data.name.toLowerCase().includes(search.toLowerCase()))" >.<! -- Show search and operations -->
   <el-table-column>
        <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)">The editor</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">delete</el-button>
        </template>
      </el-table-column>
</el-table>
<script>
    export default {
        name: "Tables",
        data() {
            return {
                tableData: [{id: 21.name: "Chen".age: 23.email: "[email protected]".dept: {id: 1.name: "Research and Development"}}, {id: 22.name: "Zhang".age: 25.email: "[email protected]".dept: {id: 1.name: "The concession stand"}}, {id: 23.name: "Xiao li".age: 25.email: "[email protected]".dept: {}}, {id: 24.name: "Small four.".age: 25.email: "[email protected]".dept: {}},].search: ' '}},methods: {
            sorts(a, b) {
                return a.age - b.age;
            },
            showDept(row, column, cellValue, index) {
                if (cellValue) {
                    return cellValue
                }
                return "No department yet";
            },
            showCss({row, rowIndex}) {
                if (rowIndex % 2= =0) {
                    return "warning-row";
                }
                return "success-row";
            },
            selectRow(selection, row){
                console.log(selection);
                console.log(row);
            },
            clearSelect(){
                this.$refs.mytable.clearSelection();
            },
            handleEdit(index,row){
                console.log(index);
                console.log(row);
            },
            handleDelete(index,row){
                console.log(index);
                console.log(row); }}}</script>

Copy the code