vue显示性别0、1为男、女。filter过滤器方法
<el-table-column prop="salarySex" label="性别" align="center"><template slot-scope="scope"><!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据用|分割,前面获取传给后面,然后通过filters
·
//表格
<el-table-column prop="salarySex" label="性别" align="center">
<template slot-scope="scope">
<!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据
用|分割,前面获取传给后面,然后通过filters获取 -->
<span>{{scope.row.salarySex | sexTypeFilter}}</span>
</template>
</el-table-column>
//下拉框
<el-form-item prop="salarySex">
性别
<el-select
v-model="searchMap.salarySex"
placeholder="选择员工性别"
>
<!-- 通过循环的形式展示出下拉菜单
key必须添加,否则可能会出错,相当于唯一性标识
-->
<el-option v-for="sextype in sexType"
:key="sextype.type"
:label="sextype.name"
:value="sextype.type">
</el-option>
</el-select>
</el-form-item>
<script>
// 过滤器的数据写在data外面,因为过滤器不能调用this.
const sexType = [
{type:"0",name:'男'},
{type:"1",name:'女'}
]
const statusType = [
{type:"0",name:'在职'},
{type:"1",name:'离职'}
]
export default {
data(){
return{ sexType,
statusType,},
//过滤器,数字类型和汉字的转换
//两种写法都可以,type是传入的数字,与过滤器数据对比
// sexType.find(obj=>{
// return obj.type === type})
filters:{
sexTypeFilter(type){
const sexTy = sexType.find(obj => obj.type === type)
return sexTy ? sexTy.name : null
},
更多推荐
已为社区贡献5条内容
所有评论(0)