關(guān)于Element-ui中table默認選中toggleRowSelection問題
更新時間：2022年08月09日 14:57:27 作者：面條請不要欺負漢堡
這篇文章主要介紹了關(guān)于Element-ui中table默認選中toggleRowSelection問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Element-ui中table默認選中toggleRowSelection
一.toggleRowSelection
toggleRowSelection(row, selected)接受兩個參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中
注意：調(diào)用toggleRowSelection這個方法 需要獲取真實dom 所以需要注冊 ref 來引用它
二.操作
(一).默認選中
1.當數(shù)據(jù)源固定在table的
<script>
export default {
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);
}
}
</script>
(二).點擊tr選中
1.在table中設(shè)置 @row-click="handleCurrentChange"
row-click 點擊行事件
<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);//點擊選中
}
}
}
</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 點擊 復選框選中 再次點擊 復選框取消選中
①設(shè)置一個全局函數(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="序號" 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 ? '女' : '未知';
},
// 點擊事情
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);//默認選中
}
}
</script>
<style>
</style>
Element-ui踩坑之表格選中toggleRowSelection問題
今天遇到一個表格選擇默認的問題，表格當前頁沒有值，但是默認還是選中的，這個時候想要刪除表格選擇：
this.$nextTick(()=>{
? ?this.$refs.multipleTable.selection.forEach((select,index)=>{
? ? ? if(select.id === this.selectedTableData[data].id){
? ? ? ? ? ?this.$refs.multipleTable.toggleRowSelection(select,false);
? ? ? }
? ?})
})- 要點1，加this.$nextTick（()=>{}）；
- 要點2，選擇的值要從table的selection中取，應(yīng)該key的變化問題。
由于篇幅較短，再加一點之前踩的坑記錄：
僅對 type=selection 的列有效，類型為 Boolean，為 true 則會在數(shù)據(jù)更新之后保留之前選中的數(shù)據(jù)（需指定 row-key）
:row-key="getRowKeys"
//多選時需要
getRowKeys(row) {
? return row.id;
},這種翻頁之類的多選就會保留數(shù)據(jù)。
再說一個想要清空表格的所有選擇：
this.$refs.multipleTable.clearSelection(）
還有全選表格行：
this.$refs.multipleTable.toggleAllSelection()
后面遇到再做補充……
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue WatchEffect函數(shù)創(chuàng)建高級偵聽器
watchEffect傳入的函數(shù)會被立即執(zhí)行一次，并且在執(zhí)行的過程中會收集依賴；其次，只有收集的依賴發(fā)生變化時，watchEffect傳入的函數(shù)才會再次執(zhí)行2023-03-03
使用Vue創(chuàng)建前后端分離項目的完整過程(前端部分)
這篇文章主要介紹了使用Vue.js和Node.js搭建一個前端和后端分離的項目,并使用VueCLI3腳手架、axios進行HTTP請求、Vue-router實現(xiàn)前端路由和vuex進行狀態(tài)管理,需要的朋友可以參考下2025-01-01
diff算法的本質(zhì)是找出兩個對象之間的差異,目的是盡可能復用節(jié)點。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了VUE兄弟組件傳值操作,結(jié)合實例形式分析了VUE兄弟組件傳值操作的原理、步驟、實現(xiàn)方法及相關(guān)注意事項,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細介紹了vue+echarts實現(xiàn)條紋柱狀橫向圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
簡單設(shè)置el-date-picker的默認當前時間問題
這篇文章主要介紹了簡單設(shè)置el-date-picker的默認當前時間問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實現(xiàn)設(shè)置載入動畫和初始化頁面動畫效果
今天小編就為大家分享一篇vue實現(xiàn)設(shè)置載入動畫和初始化頁面動畫效果，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue項目使用websocket連接問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-better-scroll 的使用實例代碼詳解，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12