当前位置 : 主页 > 网络编程 > JavaScript >

关于Element-ui中table默认选中toggleRowSelection问题

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection 二.操作 三.案例 Element-ui踩坑之表格选中toggleRowSelection问题 Element-ui中table默认选中toggleRowSelection 一.toggleRowSelection toggleRowSe
目录
  • Element-ui中table默认选中toggleRowSelection
    • 一.toggleRowSelection
    • 二.操作
    • 三.案例
  • Element-ui踩坑之表格选中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()

    后面遇到再做补充…… 

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。 

    网友评论