Common VUE technology stack component library

  • Mobile (Vant, Cube-UI, NutUI)

  • PC (Element-UI, Ant Design of Vue, iView)

  • Small program: Uniapp

Element component library

Elementui is the first choice for PC projects

Element, a Vue 2.0-based desktop component library for developers, designers, and product managers

Official address: element.eleme.cn/#/zh-CN

ElementPlus(version for Vue3.0) official address: element-plus.org/#/zh-CN

In the projectInstall elementUI

npm i element-ui -S

  • -s: is short for –save, indicating that the package is a production dependency, indicating that the package will be used when the project goes live.

  • -s: Can be omitted.

  • If you want to install development dependencies, add -d.

Import and register in main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Copy the code

Basic use of the Table component

See the official demo on the official website

<template>
    <el-table :data="tableData" style="width: 100%">
      <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"> </el-table-column>
    </el-table>
</template>
<script>
export default {
  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}}}}]</script>
Copy the code

The data source is specified by the data property of the table component (no need to loop through the V-for directive ourselves)

  1. Rows (data) that determine the table’s data. It’s an array, and each element in the array is an object representing a row.
  • Use the data attribute in el-Table
  1. Columns that determine the table structure. The column is determined by el-table-column, and there are three attributes to master

  • Use prop property on el-table-item

    • Label: Determines the title to display for the current column

    • Prop: Determine the source of the current column data. For a table, its data is an array, each element is an object, and the prop value here is the property name in that object

    • Width: Sets the width of the column. If not set, it ADAPTS

    Prop = “date”. The prop here is used to extract the value of the property named Date from each object

Table component – Custom column – Slot

In table cells, you don’t just want to render text, you might render some custom content: images, action buttons

Using the Template tag to wrap the content of our custom rendering is actually using the slot mechanism

<el-table-column label="Operation" width="100">
    <template>
      <el-button size="small" type="danger">delete</el-button>
    </template>
</el-table-column>
Copy the code

Table component – Custom column – Scope slot

If there is only one gender code in the data returned by the back end, we need to convert 1 to male and 0 to female for the convenience of users

The scope slot gets the data and then uses the function to convert the output

<el-table-column label="Gender">
    <template slot-scope="scope">
      {{scope.row.companyLogo}}
    </template>
</el-table-column>

<script>
  export default {
      methods: {
        transGender(genderCode) {
          console.log(genderCode)
          const genderList = {
            1: 'male'.0: 'woman'
          }
          return genderList[genderCode]
        }
      }
  }
</script>
Copy the code

  1. Using prop directly can only render text, we need to customize content rendering when prop cannot render directly

  2. Scoped Slot retrieves row, column, $index, and Store (state management within the table) data

  3. Scope. row gets the full object data for the current row

Pagination – Basic use of page turning components

<el-pagination 
  layout="prev, pager, next" 
  :total="1000">
</el-pagination>
Copy the code

  • Keywords in layout have their own meanings;

  • Total Sets the total number of data items (default: 10 data items per page)

<template>
  <div>
    <h1>Pagination</h1>
    <el-pagination
      layout="prev, pager, next"
      :total="1000"
      @current-change="pageChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    // Pass in the page number currently clicked
    pageChange(page) {
      console.log(page)
    }
  }
}
</script>
Copy the code

The current-change event is triggered when a page is clicked to turn the page

  1. Instead of camel name, the event name is kebab-case.
  2. It automatically accepts the page number
  3. Layout is rendered in the order we passed in the structure
  4. Paging logic: Total pages = Total pages (: total)/number of pages per page (:page-size)
  5. Events: @ current – change
  6. The page-turning component is typically used with tables, but it does not determine the data source for the table.