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

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

<el-table ref="regTable" :data="tableData" @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange" @row-click="rowClick"> ... </el-table> data() {return {tableData: [], // 表格數據checkTableList: [], // 選中的list checkNumber: 10 // 設置選中的條數} } methods: {handleSelectionChange(val, row) {// 選中賦值this.checkTableList = val},handleSelectionAllChange(data) {// 過濾當前表格數據this.tableData.forEach((v, index) => {if (index >= this.checkNumber) {// 大于設置的條數，取消選擇this.$refs['regTable'].toggleRowSelection(v, false)}})},rowClick(row) {// 單擊行，設置選中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) {// 設置checkbox，選中狀態，是否可選const check = this.checkTableList.find((v) => {return v.id == row.id})if (!check && this.checkTableList.length == this.checkNumber) {return 0} else {return 1}} }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。