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  点击行事件

(三).获取选中的值

1.设置table 中@selection-change="selsChange"

2.data 中设置sels:[]

三.案例

1.table tr 点击 复选框选中  再次点击 复选框取消选中

①设置一个全局函数

exports.install = function (Vue, options) {

    //删除数组 指定的元素

    Vue.prototype.removeByValue=function(arr, val){

        for(var i=0; i

            if(arr[i] == val) {

                arr.splice(i, 1);

                break;

            }

        }

    };

};

你可能感兴趣的:(Element-ui 中table 默认选中 toggleRowSelection)