Vue要素ヘッダーにスラッシュを追加するための実装コード

Vue要素ヘッダーにスラッシュを追加するための実装コード
<テンプレート>
    <div class="アプリコンテナ">
        <el-table:data="tableData3" スタイル="幅: 100%">
            <el-table-column width="120" prop="日付"></el-table-column>
            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
            <el-table-column label="住所">
                <el-table-column prop="province" label="省" width="120"></el-table-column>
                <el-table-column prop="city" label="都市" width="120"></el-table-column>
                <el-table-column prop="address" label="住所" width="300"></el-table-column>
                <el-table-column prop="zip" label="郵便番号" width="120"></el-table-column>
            </el-table-column>
        </el-table>
    </div>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        フィルター: {},
        データ() {
            戻る {
                テーブルデータ3: [{
                    日付: '2016-05-03'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-02'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-04'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-01'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-08'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-06'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }, {
                    日付: '2016-05-07'、
                    名前: 王小湖、
                    省: '上海'、
                    都市: 普陀区、
                    住所: '上海市普陀区金沙江路1518号'、
                    郵便番号: 200333
                }]
            }
        },
        作成された() {},
        メソッド: {}
    }
</スクリプト>
<スタイル lang="scss">
    .el-table thead.is-group th {
        背景: #fff;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        内容: '日付';
        テキスト配置: 中央;
        位置: 絶対;
        幅: 152ピクセル;
        高さ: 1px;
        下: 30px;
        右: 0;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type:after {
        内容: 「新着配送」
        テキスト配置: 中央;
        位置: 絶対;
        幅: 152ピクセル;
        上: 10px;
        左: 0;
    }
    
    .el-table thead.is-group tr:first-of-type th:first-of-type .cell {
        位置: 絶対;
        上: 0;
        左: 0;
        幅: 152ピクセル;
        高さ: 1px;
        背景色: #EBEEF5;
        表示: ブロック;
        テキスト配置: 中央;
        変換: 回転(38度);
        変換原点: 左上;
        -ms-transform:回転(38度);
        -ms-transform-origin: 左上;
        -webkit-transform: 回転(38度)。
        -webkit-transform-origin: 左上;
    }
</スタイル>

効果:

これで、vue 要素ヘッダーにスラッシュを追加する方法についての記事は終了です。vue 要素ヘッダーにスラッシュを追加する方法についての関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+Element カスタム垂直テーブルヘッダーチュートリアル
  • Vue+Element uiはバックグラウンドの戻りデータに応じて動的なヘッダー操作を設定します
  • Vue 要素でのテーブルの動的レンダリング (動的テーブル ヘッダー)
  • Vueは要素テーブルにヘッダー情報プロンプト機能を実装します(推奨)
  • Vue+elementuiは、複雑なヘッダーと動的に追加された列の2次元テーブル機能を実現します。
  • vue element-ui テーブルコンポーネントは、テーブルヘッダーとデータを動的に生成し、親子コンポーネントの通信のためにセルのフォーマットを変更します。
  • vue elementUI テーブルカスタムヘッダーと行のマージサンプルコード

<<:  MySQL の時間設定に関する考慮事項の詳細な要約

>>:  ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

推薦する

JavaScript で円形カルーセルを実装する

この記事では、円形カルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹介しま...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

MySQL レプリケーション テーブルの詳細とサンプル コード

MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...

Windows での MySQL 8.X インストール チュートリアル

以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...

HTMLとは何ですか?

HTML 開発の歴史: HTML は英語で Hypertext Marked Language の...

ハイパーリンクを表示して開く方法

<br />インターネット上の無数の情報は基本的に HTML ドキュメントで構成されてお...

JavaScript は、シンプルな虫眼鏡の最も完全なコード分析を実装します (ES5)

この記事では、参考までに、シンプルな虫眼鏡を実装するためのJavaScriptの具体的なコードを紹介...

1 時間で MySQL データベースを学ぶ (Zhang Guo)

目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

Hyper-V なしで Windows 10 を動作させるソリューション

Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...

ファイル操作のためのLinuxシステムコール

目次1. ファイルを開くパラメータの紹介2. ファイルの読み取り3. ファイルを書き込む4. 閉じる...

Reactイベントバインディングの詳細な説明

1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...

docker ストレージを使用して Exit を実行すると、サーバーへのファイルのアップロードが失敗する問題と解決策

1. 問題の説明Docker コンテナにインストールされているストレージが終了状態になっているため、...