网上科普有关“Element-ui 中table 默认选中 toggleRowSelection”话题很是火热，小编也是针对Element-ui 中table 默认选中 toggleRowSelection寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助到您。
一.toggleRowSelection
通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。
toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中
注意：调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它?
二.操作
(一).默认选中
1.当数据源固定在table的
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);
}
(二).点击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;
}
}
};
};
<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>
template代码：
<template> <div> <ul> <li v-for='(item,index) in arrList'> <input type="checkbox" :value='index' v-model="checkedNames"/> {{item}} </li> </ul> {{checkedNames}} <button @click='btn()'>删除第一个</button> </div> </template>
script代码：
<script type="text/javascript">export default { data () { return { arrList:['a','b','c','d','e'], checkedNames:[] } }, methods:{ btn(){ let arr = []; var len = this.arrList.length; for (var i = 0; i < len; i++) { if (this.checkedNames.indexOf(i)>=0) { console.log(this.checkedNames.indexOf(i)) }else{ arr.push(this.arrList[i]) } } this.arrList = arr; this.checkedNames = [] } }}</script>
说一下js大体逻辑，首先选中的值都在checkedNames中了，然后在js中首先进行了循环，然后判断checkedNames中选中的哪个，比如选中是0，2，那么下面就开始在checkedNames中查找0和2有没有，如果有的话不做处理，如果没有的话，放入到新数组中，最后把新的数组赋值给arrList最后得到没有选中的元素，从而选中的就不见了也就意味着删除了。by三人行慕课
关于“Element-ui 中table 默认选中 toggleRowSelection”这个话题的介绍，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[天凝]投稿，不代表小熊号立场，如若转载，请注明出处：https://xx-scm.com/cshi/202607-179711.html
评论列表（4条）
我是小熊号的签约作者“天凝”！
希望本篇文章《Element-ui 中table 默认选中 toggleRowSelection》能对你有所帮助！
本站[小熊号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“Element-ui 中table 默认选中 toggleRowSelection”话题很是火热，小编也是针对Element-ui 中table 默认选中 tog...