From vue to elementUI project

Detailed explanation of common components of Element

install element

Go to the folder and execute the following command to install

yarn add element-ui -S // -S indicates the dependencies used by both the production environment and the development environment

Introduce element in main.js, you can use it in the page

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// mount element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

Vue.config.productionTip = false

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

Detailed explanation of layout components of common components of Element

layout component

  • el-row,el-col
  • el-container,el-header,el-aside,el-main,el-footer

First build a framework, create a new folder element subfolder under views, and store layout.vue in it. The content is the content that will be filled in later.

Add the route mapping of layout.vue in router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/layout',
    component: () => import('../views/element/Layout.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

For the examples of el-row and el-col, fill in the following content in layout.vue

<template>
    <div>
        <h3>4 equal parts layout gutter interval</h3>
        <el-row :gutter="20">
            <el-col :span="6"><div class="content">1</div></el-col>
            <el-col :span="6"><div class="content">2</div></el-col>
            <el-col :span="6"><div class="content">3</div></el-col>
            <el-col :span="6"><div class="content">4</div></el-col>
        </el-row>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>

For examples of el-container, el-header, el-aside, el-main, and el-footer, fill in the following content in layout.vue

<template>
    <div>
        <h3>container Easy to use layout</h3>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>

Common properties

  • span: Groups inline elements in the document
  • gutter: interval size

Detailed explanation of pop-up type components of common components of Element

Common popup components

  • el-dialog
  • el-popover

The sync modifier is a kind of syntactic sugar. It mainly accomplishes two things. The first is to bind an attribute, and the second is to monitor the update event of this attribute.

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

Example: el-dialog in ElementUI

// first spelling
<el-dialog :visible.sync="dialogVisible">
// The second way of writing
<el-dialog :visible="dialogVisible" :before-close="beforeClose">
// The first way of writing is to close or click on the blank space without special treatment. The el-dialog component will modify the current value state and pass it to the parent component through the .sync modifier;
// The second way of writing requires manual processing of this.dialogVisible = false in the beforeClose method.

Sample code, you need to configure routing according to Layout.vue

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">Click to open Dialog</el-button>
        <el-dialog
            title="hint"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>This is a piece of information</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">Sure</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('Confirm to close?')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

Add a jump button to app.vue and jump to Pop.vue

<template>
  <div id="app">
    <div id="nav">
    </div>
    <router-link to='/home'>Home</router-link>
    |
    <router-link to='/pop'>Pop</router-link>
    <router-view/>
  </div>
</template>
<style>
</style>

The effect of clicking is as follows

If there is no sync in :visible.sync="dialogVisible", then you need to close the dialog box after clicking close, that is, the handleClose at this time is modified to the following content

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">Click to open Dialog</el-button>
        <el-dialog
            title="hint"
            :visible="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>This is a piece of information</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">Sure</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<style scoped>
    .content {
        background-color: #000;
        color: #fff;
    }
</style>
<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('Confirm to close 222?')
          .then(_ => {
            this.dialogVisible = false
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

slot in dialog component

  • title
  • footer
<el-button type="text" @click="dialogVisible = true">Click to open Dialog</el-button>
<el-dialog
    title="hint"
    :visible="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <span>This is a piece of information</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Sure</el-button>
    </span>
</el-dialog>

Detailed explanation of table components of common components of Element

basic form

  • In the Table component, each table consists of a Table-Column component, which is the column of the table

Introduction to common properties of tables

property name effect
height Set the height of the table and fix the header at the same time
show-header Set whether to display the header
row-class-name Set a function or fixed name as the row's class name
border Whether to display the vertical border of the table. After setting, you can set the column width by changing the border

Introduction to common properties of columns

property name effect
label the header name of the current column
prop The key value of the incoming form json data
show-overflow-tooltip Whether to set the text to display the full content when the text exceeds the width of the column

An example of a table, tableData is the data of json

<template>
  <div>
    <!-- basic form -->
    <el-table :data="tableData" style="width: 100%" height="200px" border>
      <el-table-column prop="date" label="date" width="180">
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
      </el-table-column>
      <el-table-column prop="address" label="address" show-overflow-tooltip>
      </el-table-column> 
      <el-table-column label="operate">
        <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>
  </div>
</template>
<script>
export default {
  props: {
    isShowOperate: {
      type: Boolean,
      default: true
    }
  },
  // data part
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'Wang Xiaohu',
        address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-04',
        name: 'Wang Xiaohu',
        address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-03',
        name: 'Wang Xiaohu',
        address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
      }],
      tableLabel: {
        date: 'date',
        name: 'Name',
        address: 'address'
      }
    }
  },
  // table manipulation functions
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
      // this.$emit('edit', row)
    },
    handleDelete (index, row) {
      console.log(index, row);
    }
  }
} 
</script>
<style lang="scss" scoped>
</style>

Forms with better applicability encapsulated by v-for

<template>
  <div>
    <!-- v-for encapsulated form -->
    <el-table :data="tableData">
      <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val" width="180">
      </el-table-column>
      <el-table-column label="operate" v-if="isShowOperate">
        <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>
  </div>
</template>
<script>
export default {
  props: {
    isShowOperate: {
      type: Boolean,
      default: true // show operation
    }
  },
  // data part
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'Wang Xiaohu',
        address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-04',
        name: 'Wang Xiaohu',
        address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-01',
        name: 'Wang Xiaohu',
        address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
      }, {
        date: '2016-05-03',
        name: 'Wang Xiaohu',
        address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
      }],
      tableLabel: { // label for table information
        date: 'date',
        name: 'Name',
        address: 'address'
      }
    }
  },
  // table manipulation functions
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
      // this.$emit('edit', row)
    },
    handleDelete (index, row) {
      console.log(index, row);
    }
  }
} 
</script>
<style lang="scss" scoped>
</style>

Detailed explanation of form components of common components of Element

  • basic form
    • In the Form component, each form field is composed of a Form-item component, which can be a drop-down box, an input box, a date picker and other form components
  • Add form validation
  • Encapsulate form components
    • Observe the basic form
      • Summarize the dynamic parameters of a form component
        • most basic
          • label´╝îmodel,type
        • expand
          • rule, placeholder, other configurations (autocomplete, clearable, etc.)
    • Define the data structure of the loop
      • array object

Create a Form.vue under views/ with the content that the example needs to fill; then add a route with path /form under router/index.js

Basic form example, the form is mainly composed of model and label

<template>
  <div style="margin-top:20px">
    <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 label="activity area">
        <el-select v-model="form.region" placeholder="Please select an event area">
          <el-option label="area one" value="shanghai"></el-option>
          <el-option label="area two" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="select date" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="selection period" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="instant delivery">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="nature of activity">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="delicacy/restaurant online event" name="type"></el-checkbox>
          <el-checkbox label="ground push activity" name="type"></el-checkbox>
          <el-checkbox label="Offline theme activities" name="type"></el-checkbox>
          <el-checkbox label="Pure brand exposure" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="special resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="online brand sponsorship"></el-radio>
          <el-radio label="Offline venue is free"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Create now</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

Add the verification of the form, please refer to the official website for the omitted part: https://element.eleme.cn/#/zh-CN/component/form

<template>
  <div style="margin-top:20px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 
    ...
    </el-form>
  </div>
</template>
<script>
export default {
    data() {
      ...
        },
        rules: {
          name: [
            { required: true, message: 'Please enter event name', trigger: 'blur' },
            { min: 3, max: 5, message: '3 to 5 characters long', trigger: 'blur' }
          ],
          region: [
            { required: true, message: 'Please select an event area', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: 'Please select a date', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: 'Please select a time', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
          ],
          resource: [
            { required: true, message: 'Please select an event resource', trigger: 'change' }
          ],
          desc: [
            { required: true, message: 'Please fill in the activity form', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      ...
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

Encapsulate the form, use it after encapsulation, or use v-for to encapsulate it

<template>
  <el-form :model="form" :ref="form" label-width="80px" style="width: 750px">
    <el-form-item :label="item.label" v-for="(item, index) in formLabel" :key="index">
      <el-input v-model="form[item.key]" v-if="item.type == 'input'"></el-input>
      <el-select v-model="form[item.key]" placeholder="Please select an event area" v-if="item.type === 'select'">
        <el-option v-for="(subitem, index) in item.options" :key="index" :label="subitem.label" :value="subitem.value"></el-option>
      </el-select>
      <el-date-picker v-if="item.type === 'date-picker'" type="date" placeholder="select date" v-model="form[item.key]" style="width: 100%;"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create now</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
    data() {
      return{ // Define the fields for for
        form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabel: [
        {
          label: 'Event name',
          key: 'name',
          type: 'input'
        },
        {
          label: 'activity area',
          key: 'region',
          type: 'select',
          options: [
            {
              label: 'Area 1',
              value: 'shanghai'
            },
            {
              label: 'Zone 2',
              value: 'beijing'
            }
          ]
        },
        {
          label: 'Activity time',
          key: 'date1',
          type: 'date-picker'
        },
      ],
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!');
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>

Reference link

Tags: Javascript TypeScript Vue Vue.js elementUI

Posted by Birdmansplace on Wed, 18 May 2022 08:39:48 +0300