使用el-table,多選選擇的時候，可以最多選擇N條數(shù)據(jù)

有時候使用全選的時候，不想選擇全部，而是選擇10條數(shù)據(jù)，而界面上有20條數(shù)據(jù)，這樣的話，就回全部選中，達(dá)不到要求，所以上代碼

<el-table ref="regTable" :data="tableData" @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange" @row-click="rowClick"> ... </el-table> data() {return {tableData: [], // 表格數(shù)據(jù)checkTableList: [], // 選中的list checkNumber: 10 // 設(shè)置選中的條數(shù)} } methods: {handleSelectionChange(val, row) {// 選中賦值this.checkTableList = val},handleSelectionAllChange(data) {// 過濾當(dāng)前表格數(shù)據(jù)this.tableData.forEach((v, index) => {if (index >= this.checkNumber) {// 大于設(shè)置的條數(shù)，取消選擇this.$refs['regTable'].toggleRowSelection(v, false)}})},rowClick(row) {// 單擊行，設(shè)置選中const check = this.checkTableList.find((v) => {return v.id == row.id})if (!check && this.checkTableList.length >= this.checkNumber) {this.$message.warning(`最多只能選${this.checkNumber}條！`)return}this.$refs['regTable'].toggleRowSelection(row)},checkboxInit(row) {// 設(shè)置checkbox，選中狀態(tài)，是否可選const check = this.checkTableList.find((v) => {return v.id == row.id})if (!check && this.checkTableList.length == this.checkNumber) {return 0} else {return 1}} }

總結(jié)

以上是生活随笔為你收集整理的elementui el-table选择checkbox，最多选择N条解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。