elementui el-table选择checkbox,最多选择N条解决办法
生活随笔
收集整理的這篇文章主要介紹了
elementui el-table选择checkbox,最多选择N条解决办法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用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条解决办法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【小家Java】Java环境变量(Env
- 下一篇: DeepLab-v3简易思维导图