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 預設勾選表格 toggleRowSelection