關於Element-ui中table默認選中toggleRowSelection問題
Element-ui中table默認選中toggleRowSelection
一.toggleRowSelection
toggleRowSelection(row, selected)接受兩個參數,row傳遞被勾選行的數據,selected設置是否選中
註意:調用toggleRowSelection這個方法 需要獲取真實dom 所以需要註冊 ref 來引用它
二.操作
(一).默認選中
1.當數據源固定在table的
<script> export default { mounted() { this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true); } } </script>
(二).點擊tr選中
1.在table中設置 @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.設置table 中@selection-change="selsChange"
2.data 中設置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 點擊 復選框選中 再次點擊 復選框取消選中
①設置一個全局函數
exports.install = function (Vue, options) { //刪除數組 指定的元素 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: '上海市普陀區金沙江路 1518 弄', sex:'1' }, { id:'2', date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄', sex:'0' }, { id:'3', date: '2016-05-02', name: '莫默模', address: '上海市普陀區金沙江路 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中取,應該key的變化問題。
由於篇幅較短,再加一點之前踩的坑記錄:
僅對 type=selection 的列有效,類型為 Boolean,為 true 則會在數據更新之後保留之前選中的數據(需指定 row-key)
:row-key="getRowKeys" //多選時需要 getRowKeys(row) { return row.id; },
這種翻頁之類的多選就會保留數據。
再說一個想要清空表格的所有選擇:
this.$refs.multipleTable.clearSelection()
還有全選表格行:
this.$refs.multipleTable.toggleAllSelection()
後面遇到再做補充……
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue中Element的table多選表格如何實現單選
- 關於element-ui中@selection-change執行兩次的問題
- 基於ElementUI中Table嵌套實現多選的示例代碼
- element el-table表格的二次封裝實現(附表格高度自適應)
- vue中使用定義好的變量設置css樣式詳解