elementUI table 表格 column 样式

前言

好长时间没更新了，最近这段时间状态不佳，感觉整个人的精神状态不太好，总是回想起以前的某个人。。。

好了，废话不多说了；今天我遇到一个有趣的 如题 table 表格的样式显示问题，然后我 google 了半天，发现别人写的都是 table 表头等这些不着边际的问题，与我的目的相差甚远，然后只好自己思考着怎么写了，下面看具体要求吧

功能

截图如下：

要达到的要求：根据状态那一列的数据（未到账，已取消，已到账）显示相应的颜色标识，并且只有在 状态那一列是 未到账 状态时，操作才会显示 到账，最终显示呢，如上图所示。

实现

其实，实现相对来说很简单，亮点在于 elementui 对于 table 每一行数据的处理上

实现代码如下：

<!-- table 数据 start -->
    <el-table ref="multipleTable" :data="orderList" v-loading="listLoading" element-loading-text="拼命加载中" border
              style="width:100%;" height="536" highlight-current-row @selection-change="chooseSelectionChange" :default-sort = "{prop: 'order_time', order: 'descending'}">
      <el-table-column fixed type="selection" align="center" width="50"></el-table-column>
      <el-table-column prop="order_time" align="center" label="下单时间" show-overflow-tooltip min-width="140" sortable></el-table-column>
      <el-table-column prop="type_name" align="center" label="状态" show-overflow-tooltip min-width="140">
        <template slot-scope="scope">
          <span  v-if="scope.row.type_name == '未到账'" style="color:black;">未到账</span>
          <span  v-if="scope.row.type_name == '已到账'" style="color:rgb(84, 195, 29);">已到账</span>
          <span  v-if="scope.row.type_name == '已取消'" style="color:red;">已取消</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" show-overflow-tooltip min-width="140">
        <template slot-scope="scope">
          <span class="option-item option-edit" @click.stop="tableOption('到账', scope.$index, scope.row)" style="color: #54c31d;"
                v-show="getButtonPermit('sys:user:operate')" v-if="scope.row.type_name == '未到账'">到账</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- table 数据 end -->

解释：

在 elementui 的 table 中，如果我们想对每一行数据作相应的渲染时，我们可以在 目标列（即 el-table-column）中加入 <template slot-scope="scope">...</template> 这一部分代码即可，这样，我们就可取到该 table 的该行数据项，然后根据该行就可以拿到你想要的目标列（即，此处的 scope.row.type_name），这样你就可以添加你自己的逻辑处理了。所以我们只需要记住，之后你想要拿某一列，某一行的数据，只需要通过 该种方法即可拿到喽。

声明

原创手敲不易，转载请注明出处，谢谢。我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以邮我哦([e-mail])