Vue ele table 踩坑日记1

Ele 表格样式相较于iview是好看了不少，但是用起来感觉不如iview方便， iview直接:

<Table stripe :columns="columns1" :data="data1"></Table>

简单明了， ele却是繁琐的要死

<el-table>
  <el-table-column></el-table-column>
  ....
</el-table>

展示字段多一点，重复的「el-table-column」看起来特别占地方，对于有强迫症的开发者来说特别不友好。 所以借鉴iview的直接在computed定义了column数组 如下

computed :{
  tbColumn(){
    return [
      { label: "人员名称", prop: "stName" },
      { label: "人员类型", prop: "personType", width: 80},
      { label: "人员编号", prop: "stId", width: 120 },
      { label: "手机号码", prop: "mobile", width: 120 },
      { label: "性别", prop: "sex", width: 80 },
      { label: "年龄", prop: "age" , width: 80},
      { label: "邮箱", prop: "email" },
    ]
  },
},

之后「el-table-column」直接循环遍历渲染

<el-table>
    <el-table-column
        :width="item.width||150"
        v-for="(item, index) in tbColumn"
        :label="item.label"
        :fixed="item.fixed"
        :prop="item.prop"
        :key="index">
    </el-table-column>
</el-table>

之后遇到需求，返回的代号表现在页面上为中文。如性别，返回1、2，显示为男或女。如果原始的「el-table/el-table-column」,就是直接在column下面「template」

<el-table>
  <el-table-column>
    <template slot-scope="{row}”></template>
  </el-table-column>
</el-table>

通过row之后加上处理就可以显示为男或女。之后尝试「template slot-scope="{row}”」，发现数据全部都变成了处理后的性别的数据。看了一下iview，其通过slot=“sex”的 column的属性字段控制。仿照着加上去，结果数据是正常显示，但是性别却是又回到了没处理的。
之后就想，既然slot没用，那我用if应该可以吧。然后实验几次，发现经过如下设置和处理可以达到想要的效果

<el-table>
  <el-table-column
    :width="item.width||150"
    v-for="(item, index) in tbColumn"
    :label="item.label"
    :fixed="item.fixed"
    :prop="item.prop"
    :key="index">
    <div slot-scope="{row}">
      <div class="row-sex" v-if="item.prop=='sex'">
          <span :style="row.sex|fmtSexSty">
              <i style="color:inherit" :class="row.sex|fmtSexIcon">
              </i>{{row.sex|fmtSex}}
          </span>
      </div>
      <div v-else>{{row[item.prop]}}</div>
    </div>
  </el-table-column>
</el-table>

这样整理一番之后，代码看起来简洁了不少，看着也舒服多了。