要素 ui の el-table の列にさまざまなスタイルのデータを動的に実装する例

<テンプレート>
 <div id="アプリ">
  <!-- 要件: 三国志のキャラクター テーブル。異なる国には異なる色で表示する必要があります (魏は赤、蜀は黒、呉は青) -->
  <el-table :data="テーブルデータ" スタイル="幅: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="国别" width="180"> 
    <!-- テンプレート スロットを通じて対応するデータを取得し、異なるデータを異なる色で表示します。もちろん、表示できるのは 1 つだけです (v-if によって制御されます) -->
    <テンプレートスコープ="スコープ">
     <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>
    </テンプレート>
   </el-table-column>
   <el-table-column prop="bornPlace" label="出生地"> </el-table-column>
  </el-table>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 データ（） {
  戻る {
   テーブルデータ: [
    {
     名前:「劉備」、
     国：「蜀王国」、
     出身地: "涛県、涛県（河北省涛州市）",
    },
    {
     名前:「曹操」
     国家：「魏国」、
     出身地: "沛州橋県 (安徽省亳州市)",
    },
    {
     名前: 「孫権」、
     国:「呉州」、
     出身地: 「浙江省杭州市阜陽区武君富春県」
    },
    {
     名前：「関羽」
     国：「蜀王国」、
     出身地: "河東県（山西省運城市塩湖区杰州鎮）",
    },
   ]、
  };
 },
};
</スクリプト>

<テンプレート>
 <div id="アプリ">
  <!-- 要件: 三国志のキャラクター テーブル。異なる国には異なる色 (魏は赤、蜀は黒、呉は青) を表示する必要があります -->
  <el-table :data="テーブルデータ" スタイル="幅: 100%">
   <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
   <el-table-column prop="nation" label="国别" width="180"> 
    <!-- テンプレート スロットを通じて対応するデータを取得し、vue の動的スタイル メソッドを通じてさまざまな色を動的に表示するというアイデアです。このメソッドはより柔軟です -->
    <テンプレートスコープ="スコープ">
     <!-- 意味: この div に動的なスタイルをバインドします。カラー属性値は getColorByNation() メソッドの戻り値なので、渡されたスコープを通じてメソッドの戻り値を動的に設定するだけで済みます -->
     <div :style="{color:getColorByNation(scope),fontSize:getSizeByNation(scope),fontWeight:'bold'}">{{scope.row.nation}}</div>
    </テンプレート>
   </el-table-column>
   <el-table-column prop="bornPlace" label="出生地"> </el-table-column>
  </el-table>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:「アプリ」、
 データ（） {
  戻る {
   テーブルデータ: [
    {
     名前:「劉備」、
     国：「蜀王国」、
     出身地: "涛県、涛県（河北省涛州市）",
    },
    {
     名前:「曹操」
     国家：「魏国」、
     出身地: "沛州橋県 (安徽省亳州市)",
    },
    {
     名前: 「孫権」、
     国:「呉州」、
     出身地: 「浙江省杭州市阜陽区武君富春県」
    },
    {
     名前：「関羽」
     国：「蜀王国」、
     出身地: "河東県斌県 (山西省運城市塩湖区斌州鎮)",
    },
   ]、
  };
 },
 メソッド: {
  // 動的に色を設定する getColorByNation(scope){
   console.log(scope); // 次の図に示すように、渡されたスコープを、テーブルの異なる行のデータ行全体に対応するように出力します。 
   if(scope.row.nation == "魏国"){
    「赤」を返す
   }else if(scope.row.nation == "Shu"){
    「黒」を返す
   }そうでない場合、scope.row.nation == "Wu"){
    「青」を返す
   }
  },
  // フォントサイズを動的に設定する getSizeByNation(scope){
   if(scope.row.nation == "魏国"){
    「14px」を返す
   }else if(scope.row.nation == "Shu"){
    「18px」を返す
   }そうでない場合、scope.row.nation == "Wu"){
    「24px」を返す
   }
  }
 },
};
</スクリプト>