關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問(wèn)題
更新時(shí)間：2022年08月09日 14:57:27 作者：面條請(qǐng)不要欺負(fù)漢堡
這篇文章主要介紹了關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Element-ui中table默認(rèn)選中toggleRowSelection
一.toggleRowSelection
toggleRowSelection(row, selected)接受兩個(gè)參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中
注意：調(diào)用toggleRowSelection這個(gè)方法 需要獲取真實(shí)dom 所以需要注冊(cè) ref 來(lái)引用它
二.操作
(一).默認(rèn)選中
1.當(dāng)數(shù)據(jù)源固定在table的
<script>
export default {
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);
}
}
</script>
(二).點(diǎn)擊tr選中
1.在table中設(shè)置 @row-click="handleCurrentChange"
row-click 點(diǎn)擊行事件
<template> <el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange"> </el-table> </template>
<script>
export default {
methods: {
handleCurrentChange(row, event, column){
this.$refs.multipleTable.toggleRowSelection(row,true);//點(diǎn)擊選中
}
}
}
</script>(三).獲取選中的值
1.設(shè)置table 中@selection-change="selsChange"
2.data 中設(shè)置sels:[]
<template> <el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange"> </el-table> </template>
<script>
export default {
methods: {
selsChange( val){
this.sels=val;
console.log(this.sels)
}
}
}
</script>三.案例
1.table tr 點(diǎn)擊 復(fù)選框選中 再次點(diǎn)擊 復(fù)選框取消選中
①設(shè)置一個(gè)全局函數(shù)
exports.install = function (Vue, options) {
//刪除數(shù)組 指定的元素
Vue.prototype.removeByValue=function(arr, val){
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
};
};②table.vue
<template> <el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange"> <el-table-column type="selection" width="55" ></el-table-column> <el-table-column type="index" label="序號(hào)" width="60"></el-table-column> <el-table-column prop="sex" label="性別" width="100" :formatter="formatSex"></el-table-column> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template>
<script>
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '嘎哈和',
address: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '莫默模',
address: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'-1'
}],
arrID:[],
}
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
// 點(diǎn)擊事情
handleCurrentChange(row, event, column){
var same=false;
if(this.arrID.length > 0){
for(var i=0; i<this.arrID.length ;i++){
if(this.arrID[i]==row.id){
same=true;
this.removeByValue(this.arrID, row.id);
break;
}
}
if(same==true){
this.$refs.multipleTable.toggleRowSelection(row,false);
}else{
this.$refs.multipleTable.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
}else{
this.$refs.multipleTable.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
},
selsChange(val){
var valId=[];
for(var i=0;i<val.length;i++){
var arrIDsame=false;
valId.push(val[i].id);
}
this.arrID=valId;
}
},
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);//默認(rèn)選中
}
}
</script>
<style>
</style>
Element-ui踩坑之表格選中toggleRowSelection問(wèn)題
今天遇到一個(gè)表格選擇默認(rèn)的問(wèn)題，表格當(dāng)前頁(yè)沒(méi)有值，但是默認(rèn)還是選中的，這個(gè)時(shí)候想要?jiǎng)h除表格選擇：
this.$nextTick(()=>{
? ?this.$refs.multipleTable.selection.forEach((select,index)=>{
? ? ? if(select.id === this.selectedTableData[data].id){
? ? ? ? ? ?this.$refs.multipleTable.toggleRowSelection(select,false);
? ? ? }
? ?})
})- 要點(diǎn)1，加this.$nextTick（()=>{}）；
- 要點(diǎn)2，選擇的值要從table的selection中取，應(yīng)該key的變化問(wèn)題。
由于篇幅較短，再加一點(diǎn)之前踩的坑記錄：
僅對(duì) type=selection 的列有效，類型為 Boolean，為 true 則會(huì)在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key）
:row-key="getRowKeys"
//多選時(shí)需要
getRowKeys(row) {
? return row.id;
},這種翻頁(yè)之類的多選就會(huì)保留數(shù)據(jù)。
再說(shuō)一個(gè)想要清空表格的所有選擇：
this.$refs.multipleTable.clearSelection(）
還有全選表格行：
this.$refs.multipleTable.toggleAllSelection()
后面遇到再做補(bǔ)充……
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- ElementUI之表格toggleRowSelection選中踩坑記錄
- elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題
- elementUI表格多選框this.$refs.xxx.toggleRowSelection無(wú)效問(wèn)題
- 使用Element時(shí)默認(rèn)勾選表格toggleRowSelection方式
- Element 默認(rèn)勾選表格 toggleRowSelection的實(shí)現(xiàn)
- element-ui中table組件的toggleRowSelection()方法使用
相關(guān)文章
Vue WatchEffect函數(shù)創(chuàng)建高級(jí)偵聽(tīng)器
watchEffect傳入的函數(shù)會(huì)被立即執(zhí)行一次，并且在執(zhí)行的過(guò)程中會(huì)收集依賴；其次，只有收集的依賴發(fā)生變化時(shí)，watchEffect傳入的函數(shù)才會(huì)再次執(zhí)行2023-03-03
使用Vue創(chuàng)建前后端分離項(xiàng)目的完整過(guò)程(前端部分)
這篇文章主要介紹了使用Vue.js和Node.js搭建一個(gè)前端和后端分離的項(xiàng)目,并使用VueCLI3腳手架、axios進(jìn)行HTTP請(qǐng)求、Vue-router實(shí)現(xiàn)前端路由和vuex進(jìn)行狀態(tài)管理,需要的朋友可以參考下2025-01-01
diff算法的本質(zhì)是找出兩個(gè)對(duì)象之間的差異,目的是盡可能復(fù)用節(jié)點(diǎn)。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實(shí)例形式分析了VUE兄弟組件傳值操作的原理、步驟、實(shí)現(xiàn)方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-10-10
vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問(wèn)題
這篇文章主要介紹了簡(jiǎn)單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
前端開(kāi)發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue項(xiàng)目使用websocket連接問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目使用websocket連接問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-better-scroll 的使用實(shí)例代碼詳解
這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12