Vue中Element的table多選表格如何實現單選
Element的table多選表格實現單選
效果圖
1.在多選表格的基礎上進行處理, 呈現單選表格的作用
2.主要使用的是ElementUI多選表格中的方法 鏈接
- 2.1 select 事件 當用戶手動勾選數據行的 Checkbox 時觸發的事件 參數selection, row
- 2.2 row-click 事件 當某一行被點擊時會觸發該事件 參數 row, column, event
- 2.3 selection-change 事件 當選擇項發生變化時會觸發該事件 參數 selection
- 2.4 clearSelection 方法 用於多選表格,清空用戶的選擇
- 2.5 toggleRowSelection 方法 用於多選表格,切換某一行的選中狀態,如果使用瞭第二個參數,則是設置這一行選中與否(selected 為 true 則選中) 參數row, selected
3.html代碼
<el-table ref="multipleTable" :data="inputRemoteTable" :header-cell-style="{background:'#eef1f6',color:'#909399'}" border style="width: 100%" fixed v-loading="InputDialogLoading" @select="select" @row-click="rowClick" @selection-change="selectionChange" stripe> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="label" label="中文名" > </el-table-column> <el-table-column prop="value" label="代碼" > </el-table-column> </el-table>
4.js 代碼
select方法主要用於當用戶勾選時, 清除掉之前的勾選項
select(selection, row) { // 清除 所有勾選項 this.$refs.multipleTable.clearSelection() // 當表格數據都沒有被勾選的時候 就返回 // 主要用於將當前勾選的表格狀態清除 if(selection.length == 0) return this.$refs.multipleTable.toggleRowSelection(row, true); }, // 表格的選中 可以獲得當前選中的數據 selectionChange(val) { // 將選中的數據存儲起來 this.selectData = val }, // 表格某一行的單擊事件 rowClick(row, column) { const selectData = this.selectData this.$refs.multipleTable.clearSelection() if( selectData.length == 1 ) { selectData.forEach(item => { // 判斷 如果當前的一行被勾選, 再次點擊的時候就會取消選中 if (item == row) { this.$refs.multipleTable.toggleRowSelection(row, false); } // 不然就讓當前的一行勾選 else { this.$refs.multipleTable.toggleRowSelection(row, true); } }) } else { this.$refs.multipleTable.toggleRowSelection(row, true); } },
vue table單選邏輯
table表格有時需要在每行前面添加一列實現可勾選對應行的狀態,table默認是多選的邏輯,如果需要實現單選,需要結合table封裝好的一些方法和事件
html部分:
<el-table ref="multipleTable" :data="tableData" highlight-current-row @select-all="onSelectAll" @selection-change="selectItem" @row-click="onSelectOp" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label="序號" type="index" align="center" /> <el-table-column label="姓名" prop="name" align="center" /> <el-table-column label="手機號碼" prop="telephone" align="center" /> </el-table>
js部分:
methods: { onSelectAll() { this.$refs.multipleTable.clearSelection(); }, selectItem(rows) { if (rows.length > 1) { const newRows = rows.filter((it, index) => { if (index == rows.length - 1) { this.$refs.multipleTable.toggleRowSelection(it, true); return true; } else { this.$refs.multipleTable.toggleRowSelection(it, false); return false; } }); this.multipleSelection = newRows; } else { this.multipleSelection = rows; } this.userId = this.multipleSelection.length ? this.multipleSelection[0].guid : ""; }, onSelectOp(row) { this.$refs.multipleTable.clearSelection(); this.$refs.multipleTable.toggleRowSelection(row, true); this.multipleSelection = []; this.multipleSelection.push(row); }, handleCheckChange(data, checked, indeterminate) { if (checked) { this.$refs.dataTree.setCheckedKeys([data.lobbyCode]); } }, }
multipleSelection變量用於保存用戶當前勾選的選項
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 關於Element-ui中table默認選中toggleRowSelection問題
- 關於element-ui中@selection-change執行兩次的問題
- vue+elementUI實現內嵌table的方法示例
- 基於ElementUI中Table嵌套實現多選的示例代碼
- vue+element table表格實現動態列篩選的示例代碼