vue+element-ui テーブルのカプセル化タグは、slot スロット タグを使用します

多くのシステムでは、いくつかの属性をマークするためにさまざまなタグをテーブルに追加する必要があることがわかっています。 element-ui でタグを追加するのは非常に簡単ですが、最も重要なのは vue のスロット機能を使用することです。まずスロットとは何かを理解してください。

Slot

公式の複雑な説明とコードを保存します。スロットの意味は、単にサブコンポーネントのどこかにプレースホルダーを残すことです。親コンポーネントがこの子コンポーネントを使用すると、タイトル、ボタン、さらにはテーブルやフォームなどのプレースホルダーの外観をカスタマイズできます。

なぜスロットが必要なのでしょうか?コンポーネントを抽出した理由は、再利用可能なコードが多すぎるためで、再利用可能なコンポーネントを使用すると、コピー アンド ペーストの作業が大幅に減少します。 2 つのコンポーネントがあるとします。ほとんどは同じですが、1 つの部分だけが異なります。現時点では、この場所で他の部分を繰り返す必要はありません。スロットがあれば、2つのコンポーネントの共通部分を抽出し、異なる部分をスロットに置き換えることができ、後から呼び出すときはこの部分のコードのみを書くことができます。これはコンポーネント化の考え方と一致しており、多くの作業を節約できます。

element-table は行情報を取得します

では、slot-scope を使用して現在の行情報を取得します

<template slot-scope="scope" ></template>

• scope.$index インデックスを取得します
• scope.row 現在の行 (オブジェクト) を取得します

スロットを使用します

テーブルデータ内で、ラベルを描画する属性に tag:true を追加します。<el-table-column> をループする際、設定はtag 属性を設定すると、このスロットに入ります。このコンポーネントの親コンポーネントを呼び出すことで、タグ列に表示されるコンテンツをカスタマイズできます。 table コンポーネント

<p class="table-content">
    <el-table
        :data="list"
        class="mt-10"
        fit
        stripe
        empty-text="暂无数据"
        :highlight-current-row="true"
    >
        <el-table-column
            v-for="(item, index) in table_title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width?item.width:null"
            :min-width="item.minwidth?item.minwidth:null"
            :sortable="item.sortable?item.sortable:false"
            :align="item.columnAlign"
            :header-align="item.titleAlign"
        >
            <template slot-scope="scope">
                <template v-if="item.tag">
                    <slot name="tags" :scope="scope.row"></slot>
                </template>
                <span v-else>{{scope.row[item.prop]}}</span>
            </template>
        </el-table-column>
    </el-table>
</p>

ループ方法

内容とタイトルは上記のコードの通りですテーブルコンポーネントを参照する親コンポーネント内

<table-page
    :list="listData"
    :table_title="table_title">
    <template v-slot:tags="scope">
        <el-tag
          v-if="scope.scope.tag == 1"
          size="small"
          type="primary"
          >tag1
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 2"
          size="small"
          type="warning"
          >tag2
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 3"
          size="small"
          type="success"
          >tag3
        </el-tag>
    </template>
</table-page>

テーブルは使用されていますデータ

table_title

[
  {
    prop: 'id',
    label: '编号',
    width: '100',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'date',
    label: '日期',
    width: '150',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'name',
    label: '姓名',
    width: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'province',
    label: '省份',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true,
    isEdit: true
  },
  {
    prop: 'city',
    label: '市区',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'address',
    label: '地址',
    minwidth: '300',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'auditflag',
    label: '状态',
    minwidth: '80px',
    tag: true,
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
];

listData

 [
    {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 2,
        date: '2016-05-04',
        name: '王小',
        province: '北京',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 5,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 6,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 7,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 8,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 9,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 10,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }
],复制代码

プレゼンテーション効果

これが最後のコラムです、息子よ！

推奨チュートリアル: 「

JS チュートリアル

」

以上がvue+element-ui テーブルのカプセル化タグは、slot スロット タグを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。