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），这样你就能够添加你本身的逻辑处理了。因此咱们只须要记住，以后你想要拿某一列，某一行的数据，只须要经过 该种方法便可拿到喽。

声明

原创手敲不易，转载请注明出处，谢谢。我是 拉丁小毛，欢迎你们关注我哦，一块儿交流，共同进步。有问题能够 邮我哦(util.you.com@gmail.com)