vxe-table を使用して vue で編集可能なテーブルを作成するプロセス

npm をインストール xe-utils@3 vxe-table@3

'xe-utils' をインポートします。
'vxe-table' から VXETable をインポートします。
'vxe-table/lib/style.css' をインポートします。
​
Vue.use(VXETable);

<テンプレート>
    <vxe-table :align="allAlign" :data="テーブルデータ">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column フィールド="name" タイトル="名前"></vxe-table-column>
        <vxe-table-column field="desc" title="説明"></vxe-table-column>
        <vxe-table-column フィールド="link" タイトル="リンク"></vxe-table-column>
    </vxe-テーブル>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                allAlign: null、
                テーブルデータ: [
                    {
                        名前: "html",
                        説明: 'ハイパーテキスト マークアップ言語'、
                        リンク: 'https://www.runoob.com/html/html-tutorial.html'
                    },
                    {
                        名前: "css",
                        説明: 'カスケーディング スタイル シート'、
                        リンク: 'https://www.runoob.com/css/css-intro.html'
                    },
                    {
                        名前: "js",
                        説明: 'JavaScript',
                        リンク: 'https://www.runoob.com/js/js-tutorial.html'
                    }
                ]
            }
        }
    }
</スクリプト>

<テンプレート>
    <!--テーブルに edit-config 構成を追加します-->
    <vxe-table border :data="tableData" :edit-config="{トリガー: 'クリック', モード: 'セル'}">
        <!--セル vxe-table-column を再構成し、edit-render を使用して編集プロパティを構成します--->
        <vxe-table-column title="説明" width="180" fixed="left" field="desc"
                          :edit-render="{name: 'input', 属性: {type: 'text'}}">
        </vxe-テーブル列>
    </vxe-テーブル>
</テンプレート> 

<テンプレート>
    <vxe-table border :data="tableData" :edit-config="{トリガー: 'クリック', モード: 'セル'}">
        <!--edit-render と入力ボックス編集の唯一の違いは、edit-render の設定です。新しいオプション選択はデータに追加されます--->
        <vxe-table-column title="表示するかどうか" width="180" field="isShow"
                          :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}">
        </vxe-テーブル列>
    </vxe-テーブル>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            戻る {
                allAlign: null、
                テーブルデータ: [
                    {
                        名前: "html",
                        説明: 'ハイパーテキスト マークアップ言語'、
                        リンク: 'https://www.runoob.com/html/html-tutorial.html',
                        表示: 1
                    }
                    //複数のデータを省略する········
                ]、
                選択: [
                    {ステータス: 1、ラベル: 'はい'},
                    {ステータス: 0、ラベル: 'いいえ'}
                ]
            }
        }
    }
</スクリプト>

<vxe-table-column フィールド="名前" 幅="120" タイトル="名前"
                  :edit-render="{name: 'input', 属性: {type: 'text'}}">
    <!-- ヘッダーをカスタマイズするには #header を使用します -->
    <テンプレート #ヘッダー>
        <span>名前</span>
        <span style="font-size: 12px; color: #ccc">テクノロジー</span>
    </テンプレート>
    <!-- コンテンツをカスタマイズするには #default を使用します -->
    <テンプレート #default="{行}">
        <span>テクノロジー名</span>
        <span>{{行名}}</span>
    </テンプレート>
    <!-- 編集をカスタマイズするには #edit を使用します -->
    <テンプレート #edit="{行}">
        <p>テクノロジー名</p>
        <input type="text" v-model="行名" class="vxe-default-input">
    </テンプレート>
</vxe-テーブル列>

<テンプレート>
    <vxe-table border :data="tableData" :edit-config="{トリガー: 'クリック'、モード: 'セル'}"
               @edit-closed="データ更新">
        <vxe-table-column title="表示するかどうか" width="180" field="isShow"
                          :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}">
        </vxe-テーブル列>
    </vxe-テーブル>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        データ （） {
            // 省略...
        },
        メソッド: {
            updateData ({行、列}) {
                // バックグラウンド更新インターフェースは 1 つのデータを受け入れるので、行を渡すだけです console.log(row);
            }
        }
    }
</スクリプト>

editClosedEvent ({ 行, 列 }) {
    定数 $table = this.$refs.xTable
    定数フィールド = 列.プロパティ
    const cellValue = row[フィールド]
    // セルの値が変更されたかどうかを判定します if ($table.isUpdateByRow(row, field)) {
        タイムアウトを設定する(() => {
            this.$XModal.message({
                内容: `部分的な保存に成功しました! ${フィールド}=${セル値}`,
                ステータス: '成功'
            })
            // セルを保存された状態に部分的に更新します $table.reloadRow(row, null, field)
        }, 300)
    }
}