動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例

更新時(shí)間：2021年01月22日 09:06:47 作者：水冗水孚

這篇文章主要介紹了動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題描述

在餓了么ui的框架中，輸入數(shù)據(jù)el-form，輸出數(shù)據(jù)el-table。有時(shí)候產(chǎn)品想讓枯燥的表格來點(diǎn)動(dòng)態(tài)的樣式，比如不同的內(nèi)容展示不同的樣式，對(duì)于這個(gè)需求，其實(shí)方式有很多種，本文列舉兩種，以供參考。

實(shí)現(xiàn)方式一

效果圖如下

代碼如下

<template>
 <div id="app">
  <!-- 需求：三國(guó)人物表格，要求不同的國(guó)別展示不同的顏色（魏國(guó)紅色、蜀國(guó)黑色、吳國(guó)藍(lán)色） -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="國(guó)別" width="180"> 
    <!-- 思路通過模板插槽，獲取對(duì)應(yīng)的數(shù)據(jù)，不同的數(shù)據(jù)展示不同的顏色，當(dāng)然只能讓顯示一個(gè)（通過v-if控制） -->
    <template scope="scope">
     <div v-if="scope.row.nation == '魏國(guó)'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '蜀國(guó)'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '吳國(guó)'" 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: "蜀國(guó)",
     bornPlace: "涿郡涿縣（河北省涿州市）",
    },
    {
     name: "曹操",
     nation: "魏國(guó)",
     bornPlace: "沛國(guó)譙縣（安徽省亳州市）",
    },
    {
     name: "孫權(quán)",
     nation: "吳國(guó)",
     bornPlace: "吳郡富春縣（浙江省杭州市富陽區(qū)）",
    },
    {
     name: "關(guān)羽",
     nation: "蜀國(guó)",
     bornPlace: "河?xùn)|郡解縣（山西省運(yùn)城市鹽湖區(qū)解州鎮(zhèn)）",
    },
   ],
  };
 },
};
</script>

方式一總結(jié)
這個(gè)第一種方式，雖然能實(shí)現(xiàn)效果，但是代碼都寫在el-table里面了，看起來比較臃腫，如果只要求動(dòng)態(tài)展示兩三種樣式的話，還可以寫，但是如果有七八種甚至更多樣式動(dòng)態(tài)展示，這種寫法就會(huì)十分臃腫，且后期不太好維護(hù)。我個(gè)人推薦第二種方式，就是使用vue自帶的 :style 動(dòng)態(tài)綁定樣式來實(shí)現(xiàn)，不僅可以簡(jiǎn)潔代碼，而且可以實(shí)現(xiàn)更加豐富的效果。如下：

實(shí)現(xiàn)方式二

效果圖如下

代碼如下

<template>
 <div id="app">
  <!-- 需求：三國(guó)人物表格，要求不同的國(guó)別展示不同的顏色（魏國(guó)紅色、蜀國(guó)黑色、吳國(guó)藍(lán)色） -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="國(guó)別" width="180"> 
    <!-- 思路通過模板插槽，獲取對(duì)應(yīng)的數(shù)據(jù)，通過vue動(dòng)態(tài)style的方法，動(dòng)態(tài)顯示不同的顏色，這種方式更加靈活 -->
    <template scope="scope">
     <!-- 意思是：給這個(gè)div綁定動(dòng)態(tài)樣式，顏色color的屬性值為getColorByNation()這個(gè)方法的返回值，所以只需要通過傳過去的scope 對(duì)方法的返回值做動(dòng)態(tài)設(shè)置即可 -->
     <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: "蜀國(guó)",
     bornPlace: "涿郡涿縣（河北省涿州市）",
    },
    {
     name: "曹操",
     nation: "魏國(guó)",
     bornPlace: "沛國(guó)譙縣（安徽省亳州市）",
    },
    {
     name: "孫權(quán)",
     nation: "吳國(guó)",
     bornPlace: "吳郡富春縣（浙江省杭州市富陽區(qū)）",
    },
    {
     name: "關(guān)羽",
     nation: "蜀國(guó)",
     bornPlace: "河?xùn)|郡解縣（山西省運(yùn)城市鹽湖區(qū)解州鎮(zhèn)）",
    },
   ],
  };
 },
 methods: {
  // 動(dòng)態(tài)設(shè)置顏色
  getColorByNation(scope){
   console.log(scope); // 打印一下傳過來的scope是對(duì)應(yīng)表格不同行的整行的數(shù)據(jù)，如下有圖片： 
   if(scope.row.nation == "魏國(guó)"){
    return "red"
   }else if(scope.row.nation == "蜀國(guó)"){
    return "black"
   }else if(scope.row.nation == "吳國(guó)"){
    return "blue"
   }
  },
  // 動(dòng)態(tài)設(shè)置字體大小
  getSizeByNation(scope){
   if(scope.row.nation == "魏國(guó)"){
    return "14px"
   }else if(scope.row.nation == "蜀國(guó)"){
    return "18px"
   }else if(scope.row.nation == "吳國(guó)"){
    return "24px"
   }
  }
 },
};
</script>

打印傳過去的scope

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

到此這篇關(guān)于動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例的文章就介紹到這了,更多相關(guān)動(dòng)態(tài)實(shí)現(xiàn)element ui的el-table某列數(shù)據(jù)不同樣式的示例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: