Detailed explanation of the steps of using ElementUI in actual projects

<!-- 1. Define the field name that needs to be sorted by field-->
 
<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>
 
<!-- 2. Ensure that the prop attribute and sortable attribute are declared on the field column -->
 
<el-table-column label="Job Entry Time" sortable prop="timeOfEntry">
</el-table-column>

data() {
  return {
    //Omit other total: 0,
    page: 1, // current page number size: 5, // number of records per page total: 0 // total number of records }
}

<div style="height: 60px; margin-top: 10px">
<!-- Pagination -->
        <el-pagination
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
          :page-size="size"
          :page-sizes="[2,5,10]"
          @current-change="hCurrentChange"
          @size-change="hSizeChange"
        />
</div>

// Will automatically receive the currently clicked page number hCurrentChange(curPage) {
      // alert(curPage)
      // 1. Update the page number this.page = curPage
      // 2. Resend request this.loadEmployee()
    },
    // How many items per page hSizeChange(curSize) {
      // alert(size)
      // 1. Update the number of entries per page this.size = curSize
      // 2. Resend request this.loadEmployee()
    },

<el-checkbox-group v-model="roleIds">
  <el-checkbox label="110">Administrator</el-checkbox>
  <el-checkbox label="113">Developer</el-checkbox>
  <el-checkbox label="115">Personnel</el-checkbox>
</el-checkbox-group>

data () {
  return {
    roleIds: [] // Save the currently selected permission list}
}

<el-card class="box-card">
  <div slot="header" class="header">
    <span>Work Calendar</span>
  </div>
  <!-- Place the calendar component-->
  <calender />
</el-card>

<template>
  <el-calendar v-model="currentDate">
    <template slot="dateCell">
      <div class="date-content">
        <span class="text">01</span>
        <span class="rest">rest</span>
      </div>
    </template>
  </el-calendar>
</template>
 
<script>
export default {
  data() {
    return {
      curDate: new Date()
    }
  }
}
</script>

npm install @antv/data-set @antv/g2

<template>
  <div id="container" />
</template>
 
<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    const data = [
      { item: 'Work efficiency', a: 70, b: 30 },
      { item: 'Attendance', a: 60, b: 70 },
      { item: 'Positiveness', a: 50, b: 60 },
      { item: 'Helping a colleague', a: 40, b: 50 },
      { item: 'Self-directed learning', a: 60, b: 70 },
      { item: 'Accuracy', a: 70, b: 50 }
    ]
    const { DataView } = DataSet
    const dv = new DataView().source(data)
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'], // Expand field set key: 'user', // key field value: 'score' // value field })
 
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500
    })
    chart.data(dv.rows)
    chart.scale('score', {
      min: 0,
      max: 80
    })
    chart.coordinate('polar', {
      radius: 0.8
    })
    chart.tooltip({
      shared: true,
      showCrosshairs: true,
      crosshairs:
        line: {
          style: {
            lineDash: [4, 4],
            stroke: '#333'
          }
        }
      }
    })
    chart.axis('item', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null
          }
        }
      }
    })
    chart.axis('score', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null
          }
        }
      }
    })
 
    chart
      .line()
      .position('item*score')
      .color('user')
      .size(2)
    chart
      .point()
      .position('item*score')
      .color('user')
      .shape('circle')
      .size(4)
      .style({
        stroke: '#fff',
        lineWidth: 1,
        fillOpacity: 1
      })
    chart
      .area()
      .position('item*score')
      .color('user')
    chart.render()
  }
}
</script>

npm i [email protected]

//Configure multi-language support import Vue from 'vue' //Introduce Vue
import VueI18n from 'vue-i18n' // Import international plug-in package import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // Import the English package of Ele.me import elementZH from 'element-ui/lib/locale/lang/zh-CN' // Import the Chinese package of Ele.me Vue.use(VueI18n) // Globally register internationalization package // Create an instance of the internationalization plug-in const i18n = new VueI18n({
  //Specify the language type zh for Chinese en for English locale: 'zh',
  // Add the elementUI language pack to the plugin language data messages: {
    // Language data in English environment en: {
      ...elementEN
    },
    // Language data in Chinese environment zh: {
      ...elementZH
    }
  }
})
// Configure elementUI language conversion relationship locale.i18n((key, value) => i18n.t(key, value))
 
export default i18n