Vue中Element的table多選表格如何實(shí)現(xiàn)單選
Element的table多選表格實(shí)現(xiàn)單選
效果圖
1.在多選表格的基礎(chǔ)上進(jìn)行處理, 呈現(xiàn)單選表格的作用
2.主要使用的是ElementUI多選表格中的方法 鏈接
- 2.1 select 事件 當(dāng)用戶(hù)手動(dòng)勾選數(shù)據(jù)行的 Checkbox 時(shí)觸發(fā)的事件 參數(shù)selection, row
- 2.2 row-click 事件 當(dāng)某一行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件 參數(shù) row, column, event
- 2.3 selection-change 事件 當(dāng)選擇項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該事件 參數(shù) selection
- 2.4 clearSelection 方法 用于多選表格,清空用戶(hù)的選擇
- 2.5 toggleRowSelection 方法 用于多選表格,切換某一行的選中狀態(tài),如果使用了第二個(gè)參數(shù),則是設(shè)置這一行選中與否(selected 為 true 則選中) 參數(shù)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方法主要用于當(dāng)用戶(hù)勾選時(shí), 清除掉之前的勾選項(xiàng)
select(selection, row) { // 清除 所有勾選項(xiàng) this.$refs.multipleTable.clearSelection() // 當(dāng)表格數(shù)據(jù)都沒(méi)有被勾選的時(shí)候 就返回 // 主要用于將當(dāng)前勾選的表格狀態(tài)清除 if(selection.length == 0) return this.$refs.multipleTable.toggleRowSelection(row, true); }, // 表格的選中 可以獲得當(dāng)前選中的數(shù)據(jù) selectionChange(val) { // 將選中的數(shù)據(jù)存儲(chǔ)起來(lái) this.selectData = val }, // 表格某一行的單擊事件 rowClick(row, column) { const selectData = this.selectData this.$refs.multipleTable.clearSelection() if( selectData.length == 1 ) { selectData.forEach(item => { // 判斷 如果當(dāng)前的一行被勾選, 再次點(diǎn)擊的時(shí)候就會(huì)取消選中 if (item == row) { this.$refs.multipleTable.toggleRowSelection(row, false); } // 不然就讓當(dāng)前的一行勾選 else { this.$refs.multipleTable.toggleRowSelection(row, true); } }) } else { this.$refs.multipleTable.toggleRowSelection(row, true); } },
vue table單選邏輯
table表格有時(shí)需要在每行前面添加一列實(shí)現(xiàn)可勾選對(duì)應(yīng)行的狀態(tài),table默認(rèn)是多選的邏輯,如果需要實(shí)現(xiàn)單選,需要結(jié)合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="序號(hào)" type="index" align="center" /> ? ? ? ? ? ? <el-table-column label="姓名" prop="name" align="center" /> ? ? ? ? ? ? <el-table-column label="手機(jī)號(hào)碼" 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變量用于保存用戶(hù)當(dāng)前勾選的選項(xiàng)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
uniapp+vue3路由跳轉(zhuǎn)傳參的實(shí)現(xiàn)
本文主要介紹了uniapp+vue3路由跳轉(zhuǎn)傳參的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11vue中$refs, $emit, $on, $once, $off的使用詳解
這篇文章主要介紹了vue中$refs, $emit, $on, $once, $off的使用詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)
過(guò)渡Vue在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過(guò)渡效果這篇文章主要給大家介紹了關(guān)于如何利用vue實(shí)現(xiàn)css過(guò)渡和動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2021-11-11npm如何更新VUE package.json文件中依賴(lài)的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴(lài)的包版本問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12