An example of dynamically implementing different styles of data in a column of el-table of element ui

<template>
 <div id="app">
  <!-- Requirement: Three Kingdoms character table, requiring different countries to display different colors (red for Wei, black for Shu, blue for Wu) -->
  <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"> 
    <!-- The idea is to get the corresponding data through the template slot, and different data will be displayed in different colors. Of course, only one can be displayed (controlled by 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="Birthplace"> </el-table-column>
  </el-table>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   tableData: [
    {
     name: "Liu Bei",
     nation: "Shu Kingdom",
     bornPlace: "Zhuo County, Zhuo County (Zhuozhou City, Hebei Province)",
    },
    {
     name: "Cao Cao",
     nation: "Wei State",
     bornPlace: "Qiao County, Pei State (Bozhou City, Anhui Province)",
    },
    {
     name: "Sun Quan",
     nation: "Wu State",
     bornPlace: "Wujun Fuchun County (Fuyang District, Hangzhou City, Zhejiang Province)",
    },
    {
     name: "Guan Yu",
     nation: "Shu Kingdom",
     bornPlace: "Hedong County Jie County (Jiezhou Town, Yanhu District, Yuncheng City, Shanxi Province)",
    },
   ],
  };
 },
};
</script>

<template>
 <div id="app">
  <!-- Requirement: Three Kingdoms character table, requiring different countries to display different colors (red for Wei, black for Shu, blue for Wu) -->
  <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"> 
    <!-- The idea is to obtain the corresponding data through the template slot, and dynamically display different colors through the vue dynamic style method. This method is more flexible-->
    <template scope="scope">
     <!-- means: bind a dynamic style to this div, the color attribute value is the return value of the getColorByNation() method, so you only need to dynamically set the return value of the method through the passed 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="Birthplace"> </el-table-column>
  </el-table>
 </div>
</template>

<script>
export default {
 name: "app",
 data() {
  return {
   tableData: [
    {
     name: "Liu Bei",
     nation: "Shu Kingdom",
     bornPlace: "Zhuo County, Zhuo County (Zhuozhou City, Hebei Province)",
    },
    {
     name: "Cao Cao",
     nation: "Wei State",
     bornPlace: "Qiao County, Pei State (Bozhou City, Anhui Province)",
    },
    {
     name: "Sun Quan",
     nation: "Wu State",
     bornPlace: "Wujun Fuchun County (Fuyang District, Hangzhou City, Zhejiang Province)",
    },
    {
     name: "Guan Yu",
     nation: "Shu Kingdom",
     bornPlace: "Hedong County Jie County (Jiezhou Town, Yanhu District, Yuncheng City, Shanxi Province)",
    },
   ],
  };
 },
 methods: {
  // Dynamically set the color getColorByNation(scope){
   console.log(scope); // Print the passed scope to correspond to the entire row of data in different rows of the table, as shown in the following picture: 
   if(scope.row.nation == "魏国"){
    return "red"
   }else if(scope.row.nation == "Shu"){
    return "black"
   }else if(scope.row.nation == "Wu"){
    return "blue"
   }
  },
  // Dynamically set the font size getSizeByNation(scope){
   if(scope.row.nation == "魏国"){
    return "14px"
   }else if(scope.row.nation == "Shu"){
    return "18px"
   }else if(scope.row.nation == "Wu"){
    return "24px"
   }
  }
 },
};
</script>