Vueはdivホイールのズームインとズームアウトを実装します

'vue' から Vue をインポートします
'./App' から App をインポートします
'./router' からルーターをインポートします
Vue.config.productionTip = false

// iview
'view-design' から ViewUI をインポートします。
'view-design/dist/styles/iview.css' をインポートします。
Vue.use(ビューUI)

// ドラッグ、ズーム、キャンバス プラグイン import VueDraggableResizable from 'vue-draggable-resizable'
'vue-draggable-resizable/dist/VueDraggableResizable.css' をインポートします。
Vue.component('vue-draggable-resizable', VueDraggableResizable)

新しいVue({
  el: '#app',
  ルーター、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

<テンプレート>
    <div class="is">
        <div
            style="高さ: 800px; 幅: 100%; 境界線: 1px solid #000; 位置: relative; オーバーフロー: hidden;"
        >
            <!-- コンポーネントをインポートします。 :lock-aspect-ratio="true": アスペクト比をロックします:resizable="false": スケーラブルではありません -->
            <vue-ドラッグ可能-サイズ変更可能
                w="自動"
                h="自動"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :サイズ変更可能="false"
            >
                <div class="table" ref="table" @wheel.prevent="handleTableWheel($event)">
                 <-- iview テーブル、何でも構いません、どの div でも構いません -->
                    <表
                        :columns="列1"
                        :data="データ1"
                        サイズ="小"
                        :disabled-hover="true"
                        国境
                    >
                        <テンプレート スロット スコープ="{ 行, インデックス }" スロット="名前">
                            <ツールチップ:content="row.name" placement="top" 転送>
                                <span class="name" @click="handleCellClick(row)">{{ row.name }}</span>
                            </ツールチップ>
                        </テンプレート>
                    </表>
                </div>
            </vue-ドラッグ可能-サイズ変更可能>
        </div>
    </div>
</テンプレート>

<スクリプト>
「vue-draggable-resizable」から VueDraggableResizable をインポートします。
エクスポートデフォルト{
    名前: "は",
    データ（） {
        戻る {
            列1: [
                {
                    タイトル:「名前」、
                    スロット: "名前",
                    幅: 120
                },
                {
                    タイトル: 「年齢」、
                    キー: "年齢",
                    幅: 120
                },
                {
                    タイトル:「住所」、
                    キー: "アドレス"、
                    幅: 120
                },
                {
                    タイトル:「名前」、
                    キー: "名前",
                    幅: 120
                },
                {
                    タイトル: 「年齢」、
                    キー: "年齢",
                    幅: 120
                },
                {
                    タイトル:「住所」、
                    キー: "アドレス"、
                    幅: 120
                },
                {
                    タイトル:「名前」、
                    キー: "名前"、
                    幅: 120
                },
                {
                    タイトル: 「年齢」、
                    キー: "年齢",
                    幅: 120
                },
                {
                    タイトル:「住所」、
                    キー: "アドレス"、
                    幅: 120
                }
            ]、
            データ1: [
                {
                    名前: 「ジョン・ブラウン」
                    年齢: 18歳
                    住所：「ニューヨークNo.1レイクパーク」
                },
                {
                    名前: 「ジム・グリーン」
                    年齢: 25歳
                    住所：「ロンドンNo.1レイクパーク」
                    セルクラス名: {
                        年齢: "デモテーブル情報セルの年齢",
                        アドレス: "デモ テーブル情報セル アドレス"
                    }
                },
                {
                    名前:「ジョー・ブラック」
                    年齢: 30,
                    住所：「シドニーNo.1レイクパーク」
                },
                {
                    名前:「ジョン・スノウ」
                    年齢: 26歳
                    住所:「オタワNo.2レイクパーク」
                    セルクラス名: {
                        名前: "デモ テーブル情報セル名"
                    }
                },
                {
                    名前: 「ジョン・ブラウン」
                    年齢: 18歳
                    住所：「ニューヨークNo.1レイクパーク」
                },
                {
                    名前: 「ジム・グリーン」
                    年齢: 25歳
                    住所：「ロンドンNo.1レイクパーク」
                    セルクラス名: {
                        年齢: "デモテーブル情報セルの年齢",
                        アドレス: "デモ テーブル情報セル アドレス"
                    }
                },
                {
                    名前:「ジョー・ブラック」
                    年齢: 30,
                    住所：「シドニーNo.1レイクパーク」
                },
                {
                    名前:「ジョン・スノウ」
                    年齢: 26歳
                    住所:「オタワNo.2レイクパーク」
                    セルクラス名: {
                        名前: "デモ テーブル情報セル名"
                    }
                }
            ]
        };
    },
    マウント() {},
    メソッド: {
        handleTableWheel(イベント) {
            obj = this.$refs.table; とします。
            this.tableZoom(obj, event) を返します。
        },
        テーブルズーム(オブジェクト、イベント) {
            // デフォルトでは最初は100%です
            zoom = parseInt(obj.style.zoom, 10) || 100 とします。
            //ホイールを1回回転すると、wheelDeltaの値が120増加または減少します
            ズーム += event.wheelDelta / 12;
            （ズーム＞0）の場合{
                obj.style.zoom = ズーム + "%";
            }
            false を返します。
        },
        // セルのクリック イベント (ドラッグによってテーブルのデフォルト イベントがブロックされるかどうかをテストするために使用されますが、これは無関係です)
        ハンドルセルクリック(行) {
            this.$Message.info("クリックしました" + row.name);
        }
    }
};
</スクリプト>

<style スコープ lang="less">
。は {
    。テーブル {
        。名前 {
            カーソル: ポインタ;
        }
    }
}
// iview テーブル スタイル: iview の公式 Web サイトからコピーするだけです。問題ありません/deep/ .ivu-table {
    .demo-table-info-row td {
        背景色: #2db7f5;
        色: #fff;
    }
    td.demo-table-info-column {
        背景色: #2db7f5;
        色: #fff;
    }
    .demo-table-error-row td {
        背景色: #ff6600;
        色: #fff;
    }
    .demo-table-info-cell-name {
        背景色: #2db7f5;
        色: #fff;
    }
    .demo-table-info-cell-age {
        背景色: #ff6600;
        色: #fff;
    }
    .demo-table-info-cell-address {
        背景色: #187;
        色: #fff;
    }
}
// canvas.vdr 内の div 境界を削除します {
    境界線: なし;
}
</スタイル>