ElementUI 의 실제 항목 사용 절차 에 대한 상세 한 설명
목표:입사 시간 뒤의 상하 화살 표를 클릭 하면 현재 페이지 의 데 이 터 를 입사 시간 에 따라 오름차 또는 내림차 순 으로 배열 할 수 있 습 니 다.
사고방식:el-table-column 에 sortable 추가
정렬 은 되 찾 은 데 이 터 를 정렬 하 는 것 으로 전단 에 만 있 습 니 다.
참고:https://element.eleme.io/#/zh-CN/component/table#pai-xu
코드 구현(참조):
<!-- 1. -->
<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>
<!-- 2. prop sortable -->
<el-table-column label=" " sortable prop="timeOfEntry">
</el-table-column>
2.페이지 기능대상(효과):페이지 별로 데이터 논리 가 져 오기
사고방식:페이지 구성 요소 의 속성 요구 에 따라 설정 하면 됩 니 다.
단계:
STEP 1:데이터 항목 추가
el-pagination 구성 요소 의 요구 에 따라 페이지 에 페이지 와 관련 된 데이터 항목 을 추가 합 니 다.
data() {
return {
//
total: 0,
page: 1, //
size: 5, //
total: 0 //
}
}
STEP 2:페이지 구조
<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>
STEP 3:페이지 별 논리 구현
//
hCurrentChange(curPage) {
// alert(curPage)
// 1.
this.page = curPage
// 2.
this.loadEmployee()
},
//
hSizeChange(curSize) {
// alert(size)
// 1.
this.size = curSize
// 2.
this.loadEmployee()
},
3.el-checkbox-group 다 중 선택 상자역할
사용 주의사항:
다 중 선택 을 표시 하 는 el-checkbox-group 에 있어 서:
v-model 의 값 은 배열 입 니 다.
하위 요소 el-checkbox 의 label 속성 이 선택 한 다음 값 을 결정 합 니 다.
템 플 릿
<el-checkbox-group v-model="roleIds">
<el-checkbox label="110"> </el-checkbox>
<el-checkbox label="113"> </el-checkbox>
<el-checkbox label="115"> </el-checkbox>
</el-checkbox-group>
데이터
data () {
return {
roleIds: [] //
}
}
4.달력 구성 요소 패키지효과:
사고방식:이 구성 요 소 는 비교적 크다(홈 페이지 의 코드 도 비교적 많다).그래서 우 리 는 단독으로 하나의 구성 요소 로 제시 할 것 이다
STEP 1:구성 요소 패키지(등록 도입 3 부작 사용)
STEP 2:홈 페이지 에서 달력 구성 요소 사용
<el-card class="box-card">
<div slot="header" class="header">
<span> </span>
</div>
<!-- -->
<calender />
</el-card>
STEP 3:달력 내용 을 슬롯 으로 사용자 정의 하기
<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 로 레이더 맵 구현효과:
이 그림 은 echarts 에 도 있 습 니 다.여기 개미 데이터 로 시각 화 된 부서 의 제품 antv-G2 입 니 다.
https://antv.vision/zh
https://g2.antv.vision/zh/examples/radar/radar#basic
STEP 1:설치 필요 의존
npm install @antv/data-set @antv/g2
STEP 2:레이더 그림 을 실현 하기 위해 구성 요 소 를 만 듭 니 다.아래 코드 는 홈 페이지 에서 참고 한 것 입 니 다.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: ' ', 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 프로젝트 의 다 중 언어 지원 은
vue-i18n
참고:https://kazupon.github.io/vue-i18n/zh/started.html대상:element UI 의 영어 전환 기능 을 실현 하고 중국어 전환 효 과 를 느 낄 수 있 습 니 다.
STEP 1:글로벌 패키지 설치
npm i [email protected]
STEP 2:ElementUI 다 중 언어 설정요소 언어 패키지 파일 도입
src/lang/index.js
//
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) //
//
const i18n = new VueI18n({
// zh en
locale: 'zh',
// elementUI
messages: {
//
en: {
...elementEN
},
//
zh: {
...elementZH
}
}
})
// elementUI
locale.i18n((key, value) => i18n.t(key, value))
export default i18n
여기 서 ElementUI 가 실제 프로젝트 에서 사용 하 는 기능 에 대한 정 리 를 소개 합 니 다.더 많은 관련 ElementUI 프로젝트 의 사용 총화 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【초보자용】Vue3와 ElementPlus를 사용해Todo List를 만들어 보았다문계대학생으로 장기엔지니어 인턴중의 평원입니다. Vue를 1주일 정도 학습한 가운데 TodoList를 작성했으므로 아웃풋으로서 기재합니다. 간단한 Tot 목록입니다. Vue Vue CLI ElementPlus (El...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.