天天看点

vue显示性别0、1为男、女。filter过滤器方法

//表格
<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
    },
           

继续阅读