html表格选择selection,Element 默认勾选表格 toggleRowSelection的实现

官网尽管提供了toggleRowSelection方法，但没有提供demo实例。

通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。

以下通过三种不同的数据来源实现table默认勾选对应的列：

1、固定写在data数据里：

注意el-table上有一个ref="table"的属性

{{ scope.row.date }}

ajax

在勾子函数mounted里执行checked方法，可以自行测试在实例挂载之前beforeMount和挂载后mounted均使用。

this.$refs.table.toggleRowSelection(this.tableData3[0],true);就是本文的默认勾选的重点，toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中，这个官网写得很清楚就不多说了。

var Main = {

data() {

return {

tableData3: [{

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-08',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-06',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-07',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}],

multipleSelection: []

}

},

mounted(){

this.checked();//每次更新了数据，触发这个函数即可。

},

methods: {

checked(){

//首先el-table添加ref="table"引用标识

this.$refs.table.toggleRowSelection(this.tableData3[0],true);

},

handleSelectionChange(val) {

this.multipleSelection = val;

}

}

}

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')

2、页面一加载使用ajax获得数据：

这里使用定时器摸拟了一下。

var Main = {

data() {

return {

tableData3: [],

multipleSelection: []

}

},

mounted(){

var _this = this;

setTimeout(function(){

_this.tableData3 = [{

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-08',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-06',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-07',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}];

_this.$nextTick(function(){

_this.checked();//每次更新了数据，触发这个函数即可。

});

},3000);

},

methods: {

checked(){

//首先el-table添加ref="table"引用标识

this.$refs.table.toggleRowSelection(this.tableData3[0],true);

},

handleSelectionChange(val) {

this.multipleSelection = val;

}

}

}

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')

3、一开始并没有数据时：

var Main = {

data() {

return {

tableData3: [],

multipleSelection: []

}

},

beforeMount() {

},

methods: {

checked(){

//首先el-table添加ref="table"引用标识

this.$refs.table.toggleRowSelection(this.tableData3[2],true);

},

handleSelectionChange(val) {

this.multipleSelection = val;

},

get(){

var datas=[{

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-08',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-06',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-07',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}];

this.tableData3 = datas;

this.$nextTick(function(){

this.checked();//每次更新了数据，触发这个函数即可。

})

}

}

}

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。