Element-ui 中table 默认选中 toggleRowSelection

Posted 2023-03-01

参考技术A 一.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>