Vue filter 필터 및 table에서의 사용 설명
//
{{ isActive | isActiveFitlter}}
// v-bind
<div v-bind:id=" isActive | isActiveFitlter"></div>
filters:{
isActiveFitlter : (value)=>{
return value===1?' ':' '
}
}
Vue.filter('isActiveFitlter', (value)=>{
return value === 1?' ':' '
})
new Vue({
// ...
})1. js 파일을 사용자 정의하여common 폴더에 넣을 수 있습니다
//filters.js
let isActiveFitlter = value => {
return value===1?' ':' '
}
export { isActiveFitlter }
import * as filters from './assets/common/filters'
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
}){{ isActive | isActiveFitlter }}
참고:
table에서 슬롯 사용
<el-table-column prop="isActive" label=" ">
<template slot-scope="scope">
{{scope.row.isActive | isActiveFitlter}}
</template>
</el-table-column>장면: 처음 찾은 데이터는list로 수신합니다.그리고 두 번째로list에 있는 데이터를 사용하려고 합니다. 하지만 선택한 사용자의 정보를 필터하고 싶습니다. 이때 filter 함수로list를 필터합니다.간단합니다. 필기를 하세요.
<el-dialog title=" " :visible.sync="cloneDialogVisible" width="600px">
<el-table
v-loading="listLoading"
:data="list2" // list2
element-loading-text="Loading"
empty-text=" "
border
fit
stripe
:row-key="getRowKey"
@selection-change="handleSelectionChange"
>
//
showCloneRuleslView(user_id) {
this.SourceUserId = parseInt(user_id)
//filter
this.list2 = this.list.filter((data) => {
// SourceUserId
return data.user_id !== this.SourceUserId
})
this.cloneDialogVisible = true
console.log(this.SourceUserId)
},이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
