動態實現element ui的el-table某列數據不同樣式的示例

問題描述

在餓瞭麼ui的框架中,輸入數據el-form,輸出數據el-table。有時候產品想讓枯燥的表格來點動態的樣式,比如不同的內容展示不同的樣式,對於這個需求,其實方式有很多種,本文列舉兩種,以供參考。

實現方式一

效果圖如下

代碼如下

<template>
 <div id="app">
  <!-- 需求:三國人物表格,要求不同的國別展示不同的顏色(魏國紅色、蜀國黑色、吳國藍色) -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="國別" width="180"> 
    <!-- 思路通過模板插槽,獲取對應的數據,不同的數據展示不同的顏色,當然隻能讓顯示一個(通過v-if控制) -->
    <template scope="scope">
     <div v-if="scope.row.nation == '魏國'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '蜀國'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '吳國'" style="color:blue;font-weight:bold;">{{scope.row.nation}}</div>
    </template>
   </el-table-column>
   <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
  </el-table>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   tableData: [
    {
     name: "劉備",
     nation: "蜀國",
     bornPlace: "涿郡涿縣(河北省涿州市)",
    },
    {
     name: "曹操",
     nation: "魏國",
     bornPlace: "沛國譙縣(安徽省亳州市)",
    },
    {
     name: "孫權",
     nation: "吳國",
     bornPlace: "吳郡富春縣(浙江省杭州市富陽區)",
    },
    {
     name: "關羽",
     nation: "蜀國",
     bornPlace: "河東郡解縣(山西省運城市鹽湖區解州鎮)",
    },
   ],
  };
 },
};
</script>

方式一總結
這個第一種方式,雖然能實現效果,但是代碼都寫在el-table裡面瞭,看起來比較臃腫,如果隻要求動態展示兩三種樣式的話,還可以寫,但是如果有七八種甚至更多樣式動態展示,這種寫法就會十分臃腫,且後期不太好維護。我個人推薦第二種方式,就是使用vue自帶的 :style 動態綁定樣式來實現,不僅可以簡潔代碼,而且可以實現更加豐富的效果。如下:

實現方式二

效果圖如下

代碼如下

<template>
 <div id="app">
  <!-- 需求:三國人物表格,要求不同的國別展示不同的顏色(魏國紅色、蜀國黑色、吳國藍色) -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="國別" width="180"> 
    <!-- 思路通過模板插槽,獲取對應的數據,通過vue動態style的方法,動態顯示不同的顏色,這種方式更加靈活 -->
    <template scope="scope">
     <!-- 意思是:給這個div綁定動態樣式,顏色color的屬性值為getColorByNation()這個方法的返回值,所以隻需要通過傳過去的scope 對方法的返回值做動態設置即可 -->
     <div :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.nation}}</div>
    </template>
   </el-table-column>
   <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
  </el-table>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   tableData: [
    {
     name: "劉備",
     nation: "蜀國",
     bornPlace: "涿郡涿縣(河北省涿州市)",
    },
    {
     name: "曹操",
     nation: "魏國",
     bornPlace: "沛國譙縣(安徽省亳州市)",
    },
    {
     name: "孫權",
     nation: "吳國",
     bornPlace: "吳郡富春縣(浙江省杭州市富陽區)",
    },
    {
     name: "關羽",
     nation: "蜀國",
     bornPlace: "河東郡解縣(山西省運城市鹽湖區解州鎮)",
    },
   ],
  };
 },
 methods: {
  // 動態設置顏色
  getColorByNation(scope){
   console.log(scope); // 打印一下傳過來的scope是對應表格不同行的整行的數據,如下有圖片: 
   if(scope.row.nation == "魏國"){
    return "red"
   }else if(scope.row.nation == "蜀國"){
    return "black"
   }else if(scope.row.nation == "吳國"){
    return "blue"
   }
  },
  // 動態設置字體大小
  getSizeByNation(scope){
   if(scope.row.nation == "魏國"){
    return "14px"
   }else if(scope.row.nation == "蜀國"){
    return "18px"
   }else if(scope.row.nation == "吳國"){
    return "24px"
   }
  }
 },
};
</script> 

打印傳過去的scope

方式二總結
這種通過vue綁定樣式來控制,比第一種方式,靈活很多。畢竟第一種方式是寫在el-table裡面,第二種方式是寫在methods方法裡面。具體用那種,看場景需求。

到此這篇關於動態實現element ui的el-table某列數據不同樣式的示例的文章就介紹到這瞭,更多相關動態實現element ui的el-table某列數據不同樣式的示例內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: