vue中处理列格式化方法

  刚开始学习vue，项目里避免不了表单、表格，但是有时候我们想让一个格子里展示两个后台字段的值，或者想对展示的值处理一下，比如下边这样：

  也或者是，后台给你传的是0 、1 ，你要变成女、男一样，VUE的写法不想以前jquery我们可以处理完数据扔回去，现在的这种数据双向绑定的方式，对于我这个java猪来说，拐过这个弯来，还需要点时间。

方法我学习到了两个，如下：

1、:formatter的方式

  如下第五行设备品牌/型号需要将后台传入的两个字段合并在一起，需要在该column上加一个:formatter="getsbpp" 。

<el-table-column type="selection"></el-table-column>
      <el-table-column type="index" :index="indexMethod" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="gmpc" label="购买批次" min-width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sblx" label="设备类型" min-width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sbpp" label="设备品牌/型号" min-width="160" show-overflow-tooltip align="center" :formatter="getsbpp">
        <!-- <template slot-scope="scope">
            {{scope.row.sbpp+'/'+scope.row.sbxh}}
        </template> -->
      </el-table-column>
      <el-table-column prop="gmsj" label="购买时间" min-width="80" align="center"></el-table-column>
      <el-table-column prop="gmsl" label="购买数量" min-width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="userIp" label="操作" min-width="200" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-button @click="viewMessage(scope.row)" type="primary" size="small">查看</el-button>
          <el-button  @click="updateMessage(scope.row)"  type="warning" size="small">修改</el-button>
           <el-button   @click="deleteMessage(scope.row.id)" type="danger" size="small">删除</el-button>
      </template>
      </el-table-column>

  其中getsbpp即是一个方法名，对应着methods里的一个方法，如下：

methods: {
 	getsbpp(row){
      return  row.sbpp+"/"+row.sbxh;
    }
}

  row表示当前行的数据，怎么拿到的，我也不知道，who tm cares ...
  这样就能实现上边的功能。

2、:template的方式

  我只知道怎么用，写法如下第五行设备品牌/型号的下边，加了一个<template >标签，即可实现两个字段的拼接。

<el-table-column type="selection"></el-table-column>
      <el-table-column type="index" :index="indexMethod" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="gmpc" label="购买批次" min-width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sblx" label="设备类型" min-width="100" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sbpp" label="设备品牌/型号" min-width="160" show-overflow-tooltip align="center" >
        <template slot-scope="scope">
            {{scope.row.sbpp+'/'+scope.row.sbxh}}
        </template>
      </el-table-column>
      <el-table-column prop="gmsj" label="购买时间" min-width="80" align="center"></el-table-column>
      <el-table-column prop="gmsl" label="购买数量" min-width="80" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="userIp" label="操作" min-width="200" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <el-button @click="viewMessage(scope.row)" type="primary" size="small">查看</el-button>
          <el-button  @click="updateMessage(scope.row)"  type="warning" size="small">修改</el-button>
           <el-button   @click="deleteMessage(scope.row.id)" type="danger" size="small">删除</el-button>
      </template>
      </el-table-column>