這期內(nèi)容當中小編將會給大家?guī)碛嘘P利用element ui怎么實現(xiàn)在el-table顯示不同樣式的數(shù)據(jù)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

專注于為中小企業(yè)提供網(wǎng)站設計制作、成都網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)尉犁免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

實現(xiàn)方式一

效果圖如下

代碼如下

<template>
 <div id="app">
  <!-- 需求：三國人物表格，要求不同的國別展示不同的顏色（魏國紅色、蜀國黑色、吳國藍色） -->
  <el-table :data="tableData" >
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="國別" width="180"> 
    <!-- 思路通過模板插槽，獲取對應的數(shù)據(jù)，不同的數(shù)據(jù)展示不同的顏色，當然只能讓顯示一個（通過v-if控制） -->
    <template scope="scope">
     <div v-if="scope.row.nation == '魏國'" >{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '蜀國'" >{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == '吳國'" >{{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: "吳郡富春縣（浙江省杭州市富陽區(qū)）",
    },
    {
     name: "關羽",
     nation: "蜀國",
     bornPlace: "河東郡解縣（山西省運城市鹽湖區(qū)解州鎮(zhèn)）",
    },
   ],
  };
 },
};
</script>

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

實現(xiàn)方式二

效果圖如下

代碼如下

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

打印傳過去的scope

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

上述就是小編為大家分享的利用element ui怎么實現(xiàn)在el-table顯示不同樣式的數(shù)據(jù)了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前題目：利用elementui怎么實現(xiàn)在el-table顯示不同樣式的數(shù)據(jù)-創(chuàng)新互聯(lián)
文章URL：http://jinyejixie.com/article36/dijgsg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、定制開發(fā)、用戶體驗、關鍵詞優(yōu)化、虛擬主機、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)