1.以性别为例
性别:<el-select v-model="listQuery.xb" placeholder="性别" clearable class="filter-item ">
<el-option v-for="item in xbTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
</el-select>
const xbTypeOptions = [
{ key: '男', display_name: '男' },
{ key: '女', display_name: '女' }]
const xbTypeKeyValue = xbTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name
return acc
}, {})
data(){
return{
listQuery: {
page: 1,
limit: 20,
xb: undefined
},
xbTypeOptions,
}
}
4.filters过滤器
filters: {
statusFilter (status) {
const statusMap = {
published: 'success',
draft: 'info',
deleted: 'danger'
}
return statusMap[status]
},
typeFilter (type) {
return xbTypeKeyValue[type]
},
},