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
    },

最后

以上就是苹果柠檬为你收集整理的vue显示性别0、1为男、女。filter过滤器方法的全部内容，希望文章能够帮你解决vue显示性别0、1为男、女。filter过滤器方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。