記事ディレクトリ
序文
多くの動的 Web アプリケーションでは、ユーザー インターフェイスの対話性がユーザー エクスペリエンスを向上させる鍵となります。 Vue.js では、Element UI と sortablejs を組み合わせることで、テーブルの行ドラッグ機能を簡単に実装できます。この記事では、Vue プロジェクトでこれらのツールを使用し、ドラッグ アンド ドロップ後にバックエンド サービス システムにデータを更新する方法を説明します。
準備
Element UI と sortablejs がプロジェクトにインストールされていることを確認してください。まだインストールされていない場合は、次のコマンドを使用してインストールできます。
npm install element-ui sortablejs
メイン エントリ ファイル (main.js や app.js など) に Element UI とそのスタイルを導入します。
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
サンプルコード
以下は、テーブル行のドラッグ機能を含む Vue コンポーネントの例です。
<template>
<div>
<el-table :data="planTableData"
row-key="id">
<el-table-column prop="createTime"
label="日期"
width="180"></el-table-column>
<el-table-column prop="event"
label="事件"
width="180"></el-table-column>
<!-- 其他列 -->
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs'
import axios from 'axios' // 引入axios进行HTTP请求
export default {
name: 'PlanTableDraggable',
data () {
return {
planTableData: []
}
},
created () {
this.planTableData = [
{
id: 1, createTime: '2023-01-01', event: '事件1' },
{
id: 2, createTime: '2023-01-02', event: '事件2' },
{
id: 3, createTime: '2023-01-03', event: '事件3' }
// ...更多测试数据
]
},
mounted () {
this.$nextTick(() => {
const el = this.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(el, {
onEnd: (event) => {
const {
oldIndex, newIndex } = event
this.updateRowOrder(oldIndex, newIndex)
}
})
})
},
methods: {
updateRowOrder (oldIndex, newIndex) {
const movedItem = this.planTableData.splice(oldIndex, 1)[0]
this.planTableData.splice(newIndex, 0, movedItem)
this.updateOrderOnServer()
},
updateOrderOnServer () {
axios.post('/api/update-order', {
newOrder: this.planTableData })
.then(response => {
console.log('Order updated:', response)
})
.catch(error => {
console.error('Error updating order:', error)
// 可能需要回滚操作
})
}
}
}
</script>
このコードは、Vue コンポーネントの Element UI テーブルと sortablejs を組み合わせて行ドラッグ機能を実装する方法を示しています。主な手順には、テーブル データの初期化、ドラッグ アンド ドロップを有効にするための sortablejs の構成、ドラッグ完了時のデータの更新とサーバーへの同期が含まれます。このようにして、対話型で使いやすいテーブル インターフェイスを作成できます。
コードの説明
1. 依存関係とコンポーネント構造を導入する
<template>
<div>
<el-table :data="planTableData" row-key="id">
<!-- 表格列 -->
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs'
import axios from 'axios'
export default {
// ...
}
</script>
<template>セクションでは、コンポーネントの HTML 構造を定義します。ここでは、Element UI の<el-table>コンポーネントを使用してテーブルを作成します。:data="planTableData"は、planTableData配列をテーブルのデータ ソースにバインドする動的プロパティ (Vue の v-bind の短縮形) です。row-key="id"は、データの各行に一意のキー値を指定するために使用されます。各データ項目には一意のidフィールドがあることが前提となっています。import Sortable from 'sortablejs'では、ドラッグ アンド ドロップ機能を実装するために使用されるsortablejsライブラリが導入されています。import axios from 'axios'では、HTTP リクエストを送信するためのaxiosライブラリが導入されています。
2. コンポーネントデータとライフサイクル
export default {
name: 'PlanTableDraggable',
data () {
return {
planTableData: []
}
},
created () {
this.planTableData = [/* 初始数据 */]
},
mounted () {
this.$nextTick(() => {
const el = this.$el.querySelector('.el-table__body-wrapper tbody')
Sortable.create(el, {
/* 配置项 */})
})
},
// ...
}
data()関数は、コンポーネントの応答データを返します。ここでは、テーブル データの格納に使用されるplanTableData配列を示します。created()ライフサイクル フックはplanTableDataを初期化するために使用されます。これは、サーバーからデータをロードすることで置き換えることができます。mounted()フックは、コンポーネントが DOM にマウントされた後に実行されます。ここでthis.$nextTickを使用すると、すべての子コンポーネントもレンダリングされます。mounted内では、this.$el.querySelectorを通じてテーブルの DOM 要素を取得し、Sortable.createを使用してドラッグとドロップ機能。
3. ドラッグ＆ドロップ機能の実装
Sortable.create(el, {
onEnd: (event) => {
const {
oldIndex, newIndex } = event
this.updateRowOrder(oldIndex, newIndex)
}
})
Sortable.createドラッグが適用される要素と構成オブジェクトの 2 つのパラメータを受け入れます。onEndドラッグ操作が完了するとトリガーされるイベント ハンドラーです。eventパラメータは、元のインデックスoldIndexと新しいインデックスnewIndexを含むドラッグ操作の詳細を提供します。this.updateRowOrder配列内の要素の順序を更新するために使用されるカスタム メソッドです。
4. データの更新とサーバーの同期
methods: {
updateRowOrder (oldIndex, newIndex) {
const movedItem = this.planTableData.splice(oldIndex, 1)[0]
this.planTableData.splice(newIndex, 0, movedItem)
this.updateOrderOnServer()
},
updateOrderOnServer () {
axios.post('/api/update-order', {
newOrder: this.planTableData })
.then(response => {
console.log('Order updated:', response)
})
.catch(error => {
console.error('Error updating order:', error)
})
}
}
updateRowOrderは、配列のspliceメソッドを通じてplanTableData内の要素の位置を調整します。updateOrderOnServeraxiosを使用してサーバーに POST リクエストを送信し、更新されたシーケンスを同期します。ここの「/api/update-order」はサンプル API エンドポイントであり、実際のバックエンド サービスに応じて調整する必要があります。
実行結果
要約する
Vue.js、Element UI、sortablejs を組み合わせることで、ユーザーフレンドリーなドラッグ アンド ドロップ テーブル インターフェイスを効果的に実装し、バックエンドを通じてデータの一貫性を確保できます。サービスのインタラクティブなメンテナンス。これにより、アプリケーションの対話性が向上するだけでなく、ユーザー エクスペリエンスも向上します。