element-ui 표 열 금액 에 두 개의 소 수 를 표시 하 는 방법

금액 에 대한 표 시 는 대부분 두 개의 소 수 를 보존 해 야 한다.예 를 들 어 아래 의(표 는 element-ui 를 사용한다).

vue.js 에서 텍스트 에 대한 처 리 는 보통 일련의 필 터 를 설정 합 니 다.필 터 는 두 곳 에 사용 할 수 있 습 니 다.괄호 삽입 값 과 v-bind 표현 식(후 자 는 2.1.0+부터 지원 합 니 다).
정의 필터


filters: {
 rounding (value) {
 return value.toFixed(2)
 }
}

toFixed()방법 은 Number 를 소수 자릿수 로 반올림 할 수 있 습 니 다.문법 은 다음 과 같 습 니 다.
NumberObject.toFixed(num)
그 중에서 num 은 필수 항목 으로 소수 의 자릿수,수치 범위[0,20]를 규정 하 는 데 사용 되 며,어떤 실현 은 더 큰 수치 범 위 를 지원 할 수 있 으 며,이 매개 변 수 를 생략 하면 0 으로 대체 할 것 이다.
js 에 서 는 두 개의 소 수 를 유지 하 는 방법 이 많 습 니 다.여 기 는 자바 스 크 립 트 가 자체 적 으로 가지 고 있 는 toFixed()방법 만 사 용 했 습 니 다.
필터 사용


<el-table-column
 prop="itemPrice"
 header-align="center"
 align="center"
 label="     /  ">
 <template slot-scope="scope">
 <span>{{scope.row.itemPrice / 100 | rounding}}</span>
 </template>
</el-table-column>
......
<el-table-column
 prop="payPrice"
 header-align="center"
 align="center"
 label="     /  ">
 <template slot-scope="scope">
 <span>{{scope.row.payPrice / 100 | rounding}}</span>
 </template>
</el-table-column>
......

그 중에서 데이터 payPrice 는 분 단위 로 저장 되 어 있 으 며 표시 할 때 먼저 원 으로 변환 한 다음 rounding 필 터 를 통 해 두 개의 소 수 를 보존 합 니 다.
이 element-ui 표 열 은 두 개의 소 수 를 표시 하면 실 현 됩 니 다.관건 은 Vue 의 필터 입 니 다.상세 한 사용 참고[Vue 필터]
PS:Element-UI 표 의 과도 한 내용 줄 바 꾸 기 문제
보통 표 에는 많은 열 이 없 기 때문에 사용 할 때 편리 하지만 25+개의 열 이 있 을 때 너비 가 전혀 부족 하고 2000 만 있 으 며 내용 이 잘 놓 여 있 지 않 으 면 줄 이 바 뀔 수 있다.
이 럴 때 는 내용 이 줄 을 바 꾸 지 않 고 모두 나타 나 도록 완벽 한 해결 방법 을 찾 아야 한다.
그러나.
내 가 없 으 면 좋 은 해결 방법 을 찾 을 수 없 으 니,el-table-column 에서 고정 폭 을 주 고 먼저 사용 할 수 밖 에 없다.


el-table-column(align='center' width='130px')

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

element-ui 대화상자 기반el-dialog 초기화 검사 문제 해결

페이지를 새로 고치지 않고 el-dialog를 다시 열 때, rules나 어떤 값을 연결하려면required가 필요합니다. 자동으로 검사됩니다. 여러 개의 블로그를 살펴본 결과, 자주 사용하는 두 가지 해결 방법이 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

element-ui 표 열 금액 에 두 개의 소 수 를 표시 하 는 방법

좋은 웹페이지 즐겨찾기