欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ElementUI在實(shí)際項(xiàng)目使用步驟詳解

 更新時(shí)間：2021年07月19日 10:33:03   作者：接著奏樂接著舞。  
這篇文章主要介紹了ElementUI在實(shí)際項(xiàng)目使用的功能總結(jié),本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1.表格自排序

目標(biāo)：點(diǎn)擊入職時(shí)間后面的上下箭頭可以實(shí)現(xiàn)當(dāng)前頁數(shù)據(jù)按照入職時(shí)間升序或者降序排列

思路：給el-table-column添加sortable

排序是對(duì)取回來的數(shù)據(jù)做排序，只在前端。

參考：https://element.eleme.io/#/zh-CN/component/table#pai-xu

代碼實(shí)現(xiàn)(參考)：

<!-- 1.定義需要根據(jù)字段排序的字段名稱 -->
 
<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>
 
<!-- 2.保證字段列上聲明了prop屬性 和 sortable屬性 -->
 
<el-table-column label="入職時(shí)間" sortable prop="timeOfEntry">
</el-table-column>

2.分頁功能

目標(biāo)（效果）：實(shí)現(xiàn)分頁獲取數(shù)據(jù)邏輯

思路：按分頁組件的屬性要求進(jìn)行配置即可。

步驟：

步驟1：補(bǔ)充數(shù)據(jù)項(xiàng)

按el-pagination組件的要求，在頁面中添加與分頁相關(guān)的數(shù)據(jù)項(xiàng)

data() {
  return {
    // 省略其他
    total: 0,
    page: 1, // 當(dāng)前頁碼
    size: 5, // 每頁幾條
    total: 0 // 總共數(shù)據(jù)條數(shù)
  }
}

步驟2：分頁結(jié)構(gòu)

<div style="height: 60px; margin-top: 10px">
<!-- 分頁 -->
        <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>

步驟3：分頁邏輯實(shí)現(xiàn)

// 會(huì)自動(dòng)接收當(dāng)前點(diǎn)擊的頁碼
    hCurrentChange(curPage) {
      // alert(curPage)
      // 1. 更新頁碼
      this.page = curPage
      // 2. 重發(fā)請(qǐng)求
      this.loadEmployee()
    },
    // 每頁幾條
    hSizeChange(curSize) {
      // alert(size)
      // 1. 更新每頁的條數(shù)
      this.size = curSize
      // 2. 重發(fā)請(qǐng)求
      this.loadEmployee()
    },

3.el-checkbox-group多選框

作用（效果）

使用注意事項(xiàng)：

對(duì)于用來表示多選的el-checkbox-group來說：

v-model的值是數(shù)組（表示多選）

它的子元素el-checkbox的label屬性決定了選中這一項(xiàng)之后值

模板

<el-checkbox-group v-model="roleIds">
  <el-checkbox label="110">管理員</el-checkbox>
  <el-checkbox label="113">開發(fā)者</el-checkbox>
  <el-checkbox label="115">人事</el-checkbox>
</el-checkbox-group>

數(shù)據(jù)

data () {
  return {
    roleIds: [] // 保存當(dāng)前選中的權(quán)限列表
  }
}

4.封裝日歷組件

效果：

思路：這個(gè)組件比較大(主頁中的代碼也比較多了)，所以我們會(huì)單獨(dú)提出來成一個(gè)組件

步驟1：封裝一個(gè)組件 （注冊(cè)引入使用三部曲）

步驟2：在主頁中使用日歷組件

<el-card class="box-card">
  <div slot="header" class="header">
    <span>工作日歷</span>
  </div>
  <!-- 放置日歷組件 -->
  <calender />
</el-card>

步驟3：用插槽自定義日歷內(nèi)容顯示

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

5.用antv-G2實(shí)現(xiàn)雷達(dá)圖

效果：

這種圖在echarts中也有，這里我們用螞蟻數(shù)據(jù)可視化部門的產(chǎn)品antv-G2

https://antv.vision/zh

https://g2.antv.vision/zh/examples/radar/radar#basic

步驟1：安裝必要依賴

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

步驟2：創(chuàng)建一個(gè)組件來實(shí)現(xiàn)雷達(dá)圖

下面的代碼在官網(wǎng)中參考過來的：https://g2.antv.vision/zh/examples/radar/radar#basic

<template>
  <div id="container" />
</template>
 
<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    const data = [
      { item: '工作效率', a: 70, b: 30 },
      { item: '考勤', a: 60, b: 70 },
      { item: '積極性', a: 50, b: 60 },
      { item: '幫助同事', a: 40, b: 50 },
      { item: '自主學(xué)習(xí)', a: 60, b: 70 },
      { item: '正確率', a: 70, b: 50 }
    ]
    const { DataView } = DataSet
    const dv = new DataView().source(data)
    dv.transform({
      type: 'fold',
      fields: ['a', 'b'], // 展開字段集
      key: 'user', // key字段
      value: 'score' // value字段
    })
 
    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>

6.多語言支持

效果：vue項(xiàng)目中的多語言支持使用的是vue-i18n

參考： https://kazupon.github.io/vue-i18n/zh/started.html

目標(biāo)：實(shí)現(xiàn)elementUI中英文切換功能，感受中文切換的效果

步驟1：安裝國際化的包

npm i vue-i18n@8.22.2

步驟2：ElementUI多語言配置

引入element語言包文件src/lang/index.js

// 進(jìn)行多語言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入國際化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入餓了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入餓了么的中文包
Vue.use(VueI18n) // 全局注冊(cè)國際化包
 
// 創(chuàng)建國際化插件的實(shí)例
const i18n = new VueI18n({
  // 指定語言類型 zh表示中文  en表示英文
  locale: 'zh',
  // 將elementUI語言包加入到插件語言數(shù)據(jù)里
  messages: {
    // 英文環(huán)境下的語言數(shù)據(jù)
    en: {
      ...elementEN
    },
    // 中文環(huán)境下的語言數(shù)據(jù)
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 語言轉(zhuǎn)換關(guān)系
locale.i18n((key, value) => i18n.t(key, value))
 
export default i18n

到此這篇關(guān)于ElementUI在實(shí)際項(xiàng)目使用的功能總結(jié)的文章就介紹到這了,更多相關(guān)ElementUI項(xiàng)目使用總結(jié)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論