zoukankan      html  css  js  c++  java
  • element-ui:table循环列表时怎么匹配后台给的字段

    在使用element-ui的table的时候,后台返回的字段比如性别,返回sex:0,需要前端展示的时候自己匹配为汉字,展示方法有2种:

    方法一:

    <el-table-column prop="sex" :formatter="formatter" align="left" show-overflow-tooltip label="性别" width="150"></el-table-column>
     methods: {
      formatter(row, column) {
          return row.sex === 1? "男" "女";
        }
    },

    方法二:

    <el-table-column prop="sex" :formatter="getPartnerName" align="left" show-overflow-tooltip label="性别" width="150">
      <template slot-scope="scope">
        <span>{{ formatter(scope.row.sex)}}</span>
      </template>
    </el-table-column>

     methods: {
      formatter(row, column) {
          return row.sex === 1? "男" "女";
      }

      

    如果是有很多数据,之后想要在循环中使用匹配,该怎么使用呢?可以搭配v-if 搭配方法二进行

    <el-table-column
        v-for="item in columns"
        v-bind:label="item.text"
        v-bind:key="item.id"
        :prop="item.prop"
        :width="item.width"
     >
        <template slot-scope="scope">
           <span v-if="scope.column.property === 'isMenu'">{{ sexFormatter(scope.row.isMenu)}}</span>
           <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
    </el-table-column>

     methods: {
      sexFormatter(row, column) {
          return row.sex === 1? "男" "女";
      }

    通过判断当前行的 property ,来进行匹配,如果是则匹配,否则则输出原值。

  • 相关阅读:
    从0移植uboot (一) _配置分析
    一段美好的记忆,一份真挚的感情,已经远去......
    搭建SSH服务
    Ubuntu16.04中搭建TFTP 和 NFS 服务器
    关于x210开发板和主机、虚拟机ping通问题
    SPI总线的特点、工作方式及常见错误解答
    u-boot全面分析
    C语言类型的隐式转换问题
    uboot-jiuding 下主Makefile详解
    异常处理
  • 原文地址:https://www.cnblogs.com/liumcb/p/13094151.html
Copyright © 2011-2022 走看看