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)