問題描述
在餓了么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某列數據不同樣式的示例內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000039056139
