Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui

<Vorlage>
 <div id="app">
  <!-- Voraussetzung: Zeichentabelle der Drei Königreiche, die erfordert, dass verschiedene Länder unterschiedliche Farben anzeigen (rot für Wei, schwarz für Shu, blau für Wu) -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="Tabelle" width="180"> </el-table-column>
   <el-table-column prop="nation" label="Nation" width="180"> 
    <!-- Die Idee besteht darin, die entsprechenden Daten über den Vorlagensteckplatz abzurufen. Unterschiedliche Daten werden in unterschiedlichen Farben angezeigt. Natürlich kann nur eine angezeigt werden (gesteuert durch v-if) -->
    <Vorlage Umfang="Umfang">
     <div v-if="scope.row.nation == 'Skala'" style="color:red;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == 'Skala'" style="color:black;font-weight:bold;">{{scope.row.nation}}</div>
     <div v-if="scope.row.nation == 'Sicht'" style="color:blue;font-weight:bold;">{{scope.row.nation}}</div>
    </Vorlage>
   </el-Tabellenspalte>
   <el-table-column prop="bornPlace" label="Geburtsort"> </el-table-column>
  </el-Tabelle>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
  zurückkehren {
   Tabellendaten: [
    {
     Name: "Liu Bei",
     Nation: "Königreich Shu",
     Geburtsort: „Kreis Zhuo, Kreis Zhuo (Stadt Zhuozhou, Provinz Hebei)“,
    },
    {
     Name: "Cao Cao",
     Nation: "Wei-Staat",
     Geburtsort: „Kreis Qiao, Staat Pei (Stadt Bozhou, Provinz Anhui)“,
    },
    {
     Name: "Sun Quan",
     Nation: "Staat Wu",
     Geburtsort: „Kreis Wujun Fuchun (Bezirk Fuyang, Stadt Hangzhou, Provinz Zhejiang)“,
    },
    {
     Name: "Guan Yu",
     Nation: "Königreich Shu",
     Geburtsort: „Kreis Hedong, Kreis Jie (Stadt Jiezhou, Bezirk Yanhu, Stadt Yuncheng, Provinz Shanxi)“,
    },
   ],
  };
 },
};
</Skript>

<Vorlage>
 <div id="app">
  <!-- Voraussetzung: Zeichentabelle der Drei Königreiche, die erfordert, dass verschiedene Länder unterschiedliche Farben anzeigen (rot für Wei, schwarz für Shu, blau für Wu) -->
  <el-table :data="tableData" style="width: 100%">
   <el-table-column prop="name" label="Tabelle" width="180"> </el-table-column>
   <el-table-column prop="nation" label="Nation" width="180"> 
    <!-- Die Idee besteht darin, die entsprechenden Daten über den Vorlagensteckplatz abzurufen und mithilfe der Methode „Vue Dynamic Style“ dynamisch verschiedene Farben anzuzeigen. Diese Methode ist flexibler-->
    <Vorlage Umfang="Umfang">
     <!-- bedeutet: Binden Sie einen dynamischen Stil an dieses Div. Der Wert des Farbattributs ist der Rückgabewert der Methode getColorByNation (), sodass Sie den Rückgabewert der Methode nur über den übergebenen Bereich dynamisch festlegen müssen ->
     <div :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.nation}}</div>
    </Vorlage>
   </el-Tabellenspalte>
   <el-table-column prop="bornPlace" label="Geburtsort"> </el-table-column>
  </el-Tabelle>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "App",
 Daten() {
  zurückkehren {
   Tabellendaten: [
    {
     Name: "Liu Bei",
     Nation: "Königreich Shu",
     Geburtsort: „Kreis Zhuo, Kreis Zhuo (Stadt Zhuozhou, Provinz Hebei)“,
    },
    {
     Name: "Cao Cao",
     Nation: "Wei-Staat",
     Geburtsort: „Kreis Qiao, Staat Pei (Stadt Bozhou, Provinz Anhui)“,
    },
    {
     Name: "Sun Quan",
     Nation: "Staat Wu",
     Geburtsort: „Kreis Wujun Fuchun (Bezirk Fuyang, Stadt Hangzhou, Provinz Zhejiang)“,
    },
    {
     Name: "Guan Yu",
     Nation: "Königreich Shu",
     Geburtsort: „Kreis Hedong, Kreis Jie (Stadt Jiezhou, Bezirk Yanhu, Stadt Yuncheng, Provinz Shanxi)“,
    },
   ],
  };
 },
 Methoden: {
  // Farbe dynamisch festlegen getColorByNation(scope){
   console.log(scope); // Drucke den übergebenen Bereich, damit er der gesamten Datenzeile in verschiedenen Zeilen der Tabelle entspricht, wie in der folgenden Abbildung gezeigt: 
   wenn(scope.row.nation == "Nation"){
    Rückkehr "rot"
   }sonst wenn(scope.row.nation == "Shu"){
    Rückkehr "schwarz"
   }sonst wenn(scope.row.nation == "Wu"){
    Rückkehr "blau"
   }
  },
  // Schriftgröße dynamisch festlegen getSizeByNation(scope){
   wenn(scope.row.nation == "Nation"){
    gebe "14px" zurück
   }sonst wenn(scope.row.nation == "Shu"){
    gebe "18px" zurück
   }sonst wenn(scope.row.nation == "Wu"){
    gebe "24px" zurück
   }
  }
 },
};
</Skript>