如何实现Element UI中表格默认勾选行的toggleRowSelection功能？

本文共计1211个文字，预计阅读时间需要5分钟。

官方文档提供了 `toggleRowSelection` 方法，但未提供demo实例。通过理解，结合Vue的`ref`特性引用DOM元素，可以执行DOM上的`toggleRowSelection`方法。以下是通过三种不同数据源实现表格默认选中的方法：

1. 使用数组： - 在Vue组件中定义一个选中行的数组，如`selectedRows`。 - 在表格组件上使用`ref`引用DOM元素。 - 在方法中，根据`selectedRows`数组中的行ID调用`toggleRowSelection`。

2. 使用对象： - 定义一个对象，如`selectedRowsMap`，其中键为行ID，值为选中状态。 - 使用`ref`引用DOM元素。 - 根据对象中的选中状态调用`toggleRowSelection`。

3. 使用Vue实例的数据： - 在Vue实例中定义一个选中行的数组或对象。 - 使用`ref`引用表格DOM元素。 - 根据实例数据调用`toggleRowSelection`。

示例代码：javascript {{ row.name }}

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

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

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

1、固定写在data数据里：

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

<div id="app"> <template> <el-table :data="tableData3" border ref="table" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> </template> <el-button type="primary" @click="get()">ajax</el-button> </div>

在勾子函数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')

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