vue-slot スロットの使用シナリオを共有する

ここに画像の説明を挿入します

再登場を要求する

ここに画像の説明を挿入します

 <el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip />

ここでステータスを三眼判定したいのですが、0なら進行中、そうでなければ完了です。

 <el-table-column align="center" label="状态" prop="mitStatus==0?'进行中':'已完成'" show-overflow-tooltip />

正しいように見えますが、関数が実装されていないのは、 Vue で<el-table-column>テーブル列をレンダリングするためにを使用するときに、prop属性を使用して表示するデータフィールドを指定できるためです。たとえば、prop="mitStatus"列にmitStatusフィールドの値を表示する必要があることを示します。ただし、propJavaScript 式はデータフィールド名を指定するためにのみ使用されるため、直接記述することはできません。

特定の条件に基づいてセルのコンテンツをレンダリングする場合は、Vue を使用する必要がありますscoped-slot。これは、カスタムテンプレートを使用してセル内のコンテンツをレンダリングできるようにする Vue テーブルコンポーネントの機能です。上記の場合、のmitStatus値に基づいて異なるテキストを表示したいため、scoped-slotこのロジックを処理するためにを使用する必要があります。

問題が解決しました

したがって、これを使用してscoped-slotテーブル列のコンテンツをカスタマイズし、さまざまなデータ値に基づいてさまざまなコンテンツを表示できます。コードをel-table-column次のように変更します。

<el-table-column align="center" label="状态" prop="mitStatus" show-overflow-tooltip>
  <template slot-scope="scope">
    {
   
   { scope.row.mitStatus === 0 ? '进行中' : '已完成' }}
  </template>
</el-table-column>

上記のコードでは、オブジェクトを使用して、slot-scope="scope"このスロットの現在の行のデータにアクセスできることを意味します。scopeを通じてscope.row.mitStatus各行の値を取得しmitStatus、さまざまな値に基づいて対応するコンテンツを表示します。がmitStatus0の場合は「進行中」、それ以外の場合は「完了」が表示されます。

知識の拡大

Vue.js で Element UI コンポーネントを使用する場合<el-table>、スロットを通じてテーブル列の内容をカスタマイズできます。スロットは、追加のコンテンツやテンプレートをコンポーネント内に埋め込むことができる Vue.js の機能であり、これらのスロットをコンポーネント内で使用してコンテンツをレンダリングできます。では<el-table>、スロットを使用して各列の表示方法をカスタマイズできます。

スロット構文を使用してテーブル列の内容をカスタマイズする方法の簡単な例を次に示します。

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="状态">
      <!-- 自定义插槽，通过 slot-scope 获取当前行数据 -->
      <template slot-scope="scope">
        <!-- 根据状态值动态显示不同文本 -->
        {
   
   { scope.row.status === 0 ? '进行中' : '已完成' }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      tableData: [
        {
      
       name: 'Alice', status: 0 },
        {
      
       name: 'Bob', status: 1 },
        {
      
       name: 'Charlie', status: 0 },
      ],
    };
  },
};
</script>

上の例では:

<el-table>コンポーネント内では2 つを使用します<el-table-column>。1 つは名前の表示用、もう 1 つはステータス列用です。
2 つ目では<el-table-column>、要素を使用して<template>スロットを作成します。slot-scope="scope"現在のスロットが現在の行のデータにアクセスできることを示します (ここでは ) scope.row。
スロットのコンテンツでは、テンプレート補間構文を使用して、{ { }}現在の行のステータス値に基づいて異なるテキストを表示します。

このスロットの使用方法により、実際のビジネスニーズに応じてテーブル列の内容を柔軟にカスタマイズできます。テキストを動的に表示したり、カスタムスタイルを追加したり、他の HTML 要素を追加したりできます。もちろん、スロットにはカスタムスロット、スコープスロット、名前付きスロットの 3 種類があり、詳しくは自分で学ぶことができます。！！