手把手教你学vue - 13 - 综合table(1) - 格式化el-table-column

对于一个中后台类的项目，最常见的展示形式就是Table了。而table组件也是功能最繁杂的，下面就让小编整理一个table全家桶

table数据

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<el-table :data="tableData" style="width: 100%">
    // 展示内容
</el-table>    

直接展示

  <el-table-column prop="name" label="姓名" width="180" /> 

展示图片

在单元格中展示图片，用户可以点击查看大图

后台数据如：

{
    url: http://www.juejin.com/logo.png
}

<el-table-column
prop="uri"
:label="$t('uri')"
>
<template slot-scope="scope">
  <el-image
    :src="scope.row.uri"
    :preview-src-list="[scope.row.uri]"
    fit="contain"
    class="image"
  >
    <div slot="error">
      <i class="el-icon-picture-outline" />
    </div>
  </el-image>
</template>
</el-table-column>

展示日期

<el-table-column prop="creationDate" :label="$t('creationDate')">
    <template slot-scope="scope">
      <span>{{ parseTime(scope.row.creationDate) }}</span>
    </template>
</el-table-column>

Status展示

根据不同的status，展示不同的展现形式。

此处可以与el-tag配合使用

<el-table-column prop="status" :label="$t('crash.status')">
    <template slot-scope="scope">
      <el-tag type="danger" v-if="scope.row.status == 1">{{
        $t("status_1")
      }}</el-tag>
      <el-tag type="success" v-else>{{
        $t("status_0")
      }}</el-tag>
    </template>
</el-table-column>

CSS样式

<el-table-column
    sortable
    prop="styles"
>
    <div
        :style="setStyles(scope.row)"
    ></div>
</el-table-column

setStyles (row) {
  return {
    border: row.size + 'px ' + 'solid ' + borderColor,
    background: row.bgColor,
    width: '30px',
    height: '30px'
  }
}

自定义操作

<el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button
      >
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
      >
    </template>
</el-table-column>

v-for

后端返回的数据是[]，前端for循环排列展示

后端数据 
photoUrls: [http://www.juejin.com/logo1.png,http://www.juejin.com/logo2.png]

<el-table-column
    sortable
    prop="photoUrl"
    label="图片"
>
<template slot-scope="scope">
  <span v-if="!scope.row.photoUrl"></span>
  <el-image
    v-else
    v-for="(item, index) in scope.row.photoUrls"
    :key="item.id"
    :src="item"
    :preview-src-list="[item]"
    fit="contain"
    class="icon"
    style="margin-right: 5px"
  >
    <div slot="error">
      <i class="el-icon-picture-outline" />
    </div>
  </el-image>
</template>
</el-table-column>

综合应用

后端返回的数据是多数据拼接时，前端先处理数据，再for循环排列展示

后端数据 
urls: 'http://www.juejin.com/logo1.png,http://www.juejin.com/logo2.png'

<el-table-column
    sortable
    prop="photoUrl"
    label="图片"
>
<template slot-scope="scope">
  <span v-if="!scope.row.photoUrl"></span>
  <el-image
    v-else
    v-for="(item, index) in getPhotoUrls(scope.row.photoUrl)"
    :key="item.id"
    :src="item"
    :preview-src-list="[item]"
    fit="contain"
    class="icon"
    style="margin-right: 5px"
  >
    <div slot="error">
      <i class="el-icon-picture-outline" />
    </div>
  </el-image>
</template>
</el-table-column>

getPhotoUrls (urls) {
  let photos = urls.split(',')
  return photos
}