vue+element-ui+vuexベースのメモリマルチ選択テーブルフレーム

一、シーンを適用する
一般的にバックグラウンド管理のxx編集ページは弾枠選択リストデータをクリックし、自然にelement-uiの多選表を選択する必要があるが、el-tableの多選はページ番号を切り替えたり、データをリフレッシュしてから選択したデータがなくなったりするため、element政府はこの問題を考慮した後、公式ドキュメントにこの属性reserve-selectionを追加し、このプロパティは、テーブルのrow-keyとともに使用する必要があります.これにより、テーブルのページ間選択データを実現できます.よし=>>データを選択して弾枠の保存ボタンをクリックし、編集ページの配列フィールドにデータを入力して表示します.保存ボタンをクリックしてフォームデータを保存します.でも問題が来た???編集ページを再開したら、データがチェックされていないことに気づきました.臥槽!!.後で私はvuexを使って選択したデータを格納し、弾枠を開けたとき、判断データidがvuexにチェックされます.コードは次のとおりです.

axios.post(this.url, val, {
    headers: {
		token: this.token
	}
}).then((res) => {
	const data = res.data
	if (data.code === 0) {
	    this.tableData = data.page.list
	    this.pager.total = data.page.total
	    this.tableData.forEach(item => {
			let obj = this.rows.find(ele => {
				return ele.id === item.id
			})
			if (obj) {
				this.$refs.multipleTable.toggleRowSelection(item, true)
			}
		})
	} else {
		const message = data.message || data.msg
		this.$message.error(message)
	}
}).catch((err) => {
	const msg = err.message || err.msg
	this.$message.error(msg)
})

コードは大丈夫ですが、チェックしません.その後、vueの$nextTickメソッドを使用して、2回目のレンダリング再処理ロジックに使用します.

this.$nextTick(() => {
	this.setChecked()
})

//     
setChecked () {
	this.tableData.forEach(item => {
	    let obj = this.rows.find(ele => {
		    return ele.id === item.id
	    })
	    if (obj) {
		    this.$refs.multipleTable.toggleRowSelection(item, true)
	    }
    })
}

OK完璧
最後に、element-uiのreserve-selectionを使わずに自分で選択ロジックをカスタマイズしたほうがいいと思います.自分で手を出して,衣食を豊かにする.
二、共通コンポーネントの主な論理処理

// el-table   select    @select="selectRow" 
selectRow (selection, row) {
	const temp = this.rows.find((item) => {
		return item.id === row.id
	})
	if (temp) {
		// delete
		this.deleteItem({ id: row.id })
	} else {
		// insert
		this.insertItem(row)
	}
},

// el-table   select-all    @select-all="selectAllRow"
selectAllRow (selection) {
	if (selection.length === 0) {
		this.deleteAllItem(this.tableData)
	} else {
		this.insertAllItem(this.tableData)
	}
},

//        vuex   rows  
...mapMutations({
	insertItem: 'content/insertRow',
	deleteItem: 'content/deleteRow',
	insertAllItem: 'content/insertAllRow',
	deleteAllItem: 'content/deleteAllRow'
})

const state = {
  text: '  Text---state',
	rows: []
}

const getters = {
  getText: state => state.text,
  getRows: state => state.rows
}
const mutations = {
  updateText: (state, text) => {
    state.text = text
  },
  insertRow: (state, row) => {
		const index = state.rows.findIndex(item => {
			return item.id === row.id
		})
		if (index === -1) {
			state.rows.push(row)
		}
	},
	deleteRow: (state, { id }) => {
		const index = state.rows.findIndex(item => {
			return item.id === id
		})
		if (index !== -1) {
			state.rows.splice(index, 1)
		}
	},
	insertAllRow: (state, rows) => {
		rows.forEach(item => {
			let index = state.rows.findIndex(ele => {
				return ele.id === item.id
			})
			if (index === -1) {
				state.rows.push(item)
			}
		})
	},
	deleteAllRow: (state, rows) => {
		rows.forEach(item => {
			let index = state.rows.findIndex(ele => {
				return ele.id === item.id
			})
			if (index !== -1) {
				state.rows.splice(index, 1)
			}
		})
	},
	setRows: (state, list) => {
		// state.rows = list || []
		state.rows = JSON.parse(JSON.stringify(list))
	}
}

パーフェクト
共通コンポーネントである以上、カスタマイズ可能なものが必要です.の
三、コンポーネントAPI
MemoryTable  Attributes
パラメータ
説明
を選択します.
デフォルト
keys
ページを編集するには、バックグラウンドの配列に保存するオブジェクトのフィールド属性名が必要です.
Array
['id']
message
クリックしてチェックされていないデータのヒントを保存
String
データをチェックしてください
top
El-dialogのtopプロパティ
String
12vh
height
el-tableのheightプロパティ
String
400px
border
el-tableのborderプロパティ
Boolean
false
stripe
el-tableのstripeプロパティ
Boolean
false
visible
フレームの表示プロパティ
Boolean
false
width
El-dialogのwidthプロパティ
String
800px
title
弾枠のtitle
String
データの追加
cols
弾枠の表の列配置配列は、次の表を参照してください.
Array
[]
params
表データの検索フォームオブジェクト
Object
{}
url
クエリー・テーブルのインタフェース・アドレス(インタフェースは自分のニーズに応じてコンポーネント・コードを変更します)
String
--
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cols列構成
パラメータ
説明
を選択します.
デフォルト
label
el-table-columnのlabelプロパティ
String
--
prop
el-table-columnのpropプロパティ
String
--
format
表の列の書式設定関数
Function(row)、rowはこの行のデータです
--
align
el-table-columnのalignプロパティ
String
left
cell
cellスロットかどうか、slot=「cell」
Boolean
false
 
 
 
 
 
 
 
MemoryTable  Events
イベント名
説明
パラメータ
close
フレームを閉じるイベント
--
confirm
バウンド保存ボタンによってトリガーされるイベント
selection
 
 
 
 
MemoryTable  Slot
name
説明
search
テーブル検索フォームの内容に挿入し、テーブルの内容を検索する必要がある場合は、このslotを使用する必要があります.
selection
表示スロットをカスタマイズし、チェックしたデータをカスタマイズする必要がある場合は、このslotを使用する必要があります.slot-scope=「{rows}」受信パラメータrowsは選択されたデータです.
cell
表のセルのカスタム表示に使用する特殊なセルスロット.slot-scope=「{row}」は、パラメータrowがこの行のデータを受信する.
 
 
 
 
 
OKはここまでで使い方が終わり、次は楽しみにしていた干物です!!!demo
四、用法Demo
私のリソースリンクを参照して、GitHubアドレスを提供します.
 
前端シロちゃん、応援ありがとう!!!