要素テーブルコンポーネントは展開項目を動的に設定し、同時に 1 つの項目のみを展開します

シナリオ 1 : テーブル内に展開された項目が多すぎて、インターフェイス データが複雑すぎて表示できません。

シナリオ 2 : 要素テーブルによってロードされたデータが変更されると、インターフェイスが再レンダリングされ、以前の拡張項目は自動的に閉じられます。ユーザーは拡張項目を手動で開く必要があります。頻繁な手動操作は顧客エクスペリエンスに大きな影響を与えます。

1. 要素展開関連パラメータ

Element TableはElement UIをベースにしたテーブルコンポーネントです。要素テーブルのデフォルトの展開項目を設定するには、default-expand-all属性を使用してすべての行を展開するか、expand-row-keys 属性を使用してデフォルトで展開される行のキーを設定します。

たとえば、デフォルトですべての行を展開するには、default-expand-allを次のように設定しますtrue。

<el-table :data="tableData" default-expand-all>
  <!-- 表格列定义 -->
</el-table>

デフォルトで展開する行を設定するには、expand-row-keys を行キーを含む配列に設定します。

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" :expand-row-keys="[1, 3]">
  <!-- 表格列定义 -->
</el-table>

上記の例では、row-key属性は row のキーを指定するように設定され、expand-row-keys はと をid含む配列に設定されているため、テーブルがロードされるときにこれら 2 つの行が自動的に展開されます。13

要素テーブルのパラメーターについてさらに詳しく知りたい場合は、公式ドキュメントを参照してください:要素の公式ドキュメント

2. シナリオ 1 問題解決

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" 
:expand-row-keys="expandRows" @expand-change="handleExpandChange">
  <!-- 表格列定义 -->
</el-table>

export default {
    data() {
        return {
            // 展开数组
            expandRows: [],
        };
    },
    methods: {
        // 展开改变触发函数,只展开一行
        handleExpandChange(row, expandedRows) {
            if (expandedRows.length > 1) {
                this.$refs.tableList.toggleRowExpansion(expandedRows[0])
            }
        },
    }
}
</script>

上の例では、expand-change トリガー イベントを通じて 1 つの項目だけを展開しました。Expand-Change コールバック関数の 1 つのパラメーターは現在の展開された行で、2 番目のパラメーターは展開された項目の行配列です。展開された項目の数が 1 より大きい場合、前の項目は toggleRowExpansion メソッドを通じて動的に閉じられます。

$refs.tableList.toggleRowExpansionこのメソッドを使用するには、ref上記の例のように、フォームにプロパティを追加する必要があることに注意してくださいref="tableList"。

3. シナリオ 2 問題解決

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" 
:expand-row-keys="expandRows" @expand-change="handleExpandChange">
  <!-- 表格列定义 -->
</el-table>

export default {
    data() {
        return {
            // 展开项数组
            expandRows: [],
            // 展开行key
            expandKey: null,
        };
    },
    methods: {
        /** 查询table列表数据 */
        getList() {
            this.loading = true;
            listDeliveryOrder(this.queryParams).then(response => {
                this.deliveryOrderList = response.rows;
                this.total = response.total;
                this.loading = false;
                this.resumeTable();
            });
        },
        /*恢复table展开项*/
        resumeTable() {
            if (this.expandKey) {
                this.expandRows = []
                this.expandRows.push(this.expandKey);
            }
        },
    }
}
</script>

上記の例では、ユーザーの以前の展開項目キーを事前に記録し、データを再レンダリングするときに記録された展開キーをexpand-row-keysパラメータ配列にプッシュして、テーブル項目のデフォルトの展開を実現できます。