默认情况下 在元素中检查toggleRowSelection的实现

虽然官网提供了toggleRowSelection方法，但没有提供演示实例。

通过理解，结合vue的特殊属性ref，引用dom元素，然后在Dom上执行toggleRowSelection方法。

在下面的示例中，默认情况下，通过三个不同的数据源在表中检查相应的列：

1、固定数据中的数据：

请注意，el-table有一个ref=“table”的属性

div id=' app ' template El-table : data=' table data3 '边框ref=' table ' style=' width : 100% ' @ selection-change=' handleSelectionChange ' El-table-colu Mn type=' selection ' width=' 55 '/El-table-column El-table-column标签=' date' width=' 120 '模板作用域=' scope ' { { scope。row . date } }/template/El-table-column El-table-column prop=' name ' label=' name ' width=' 120 '/El-table-column El-table-column prop=' address ' label=' address ' show-overflow-tooltip/El-table-column/El-table/template El-button type=' primary ' @ click=' get()' Ajax/El-button/div执行已挂载的hook函数中选中的方法，可在实例通过自检挂载后的beforeMount中使用。这个。$ refs . table . ToggleRowSelection(this . TableData3[0]，true)；这是本文缺省检查的重点。ToggleRowselection (row，selected)接受两个参数，row传递选中行的数据，不管选中的设置是否被选中，这个官网都写的很清楚，就不多说了。

var main={ data(){ return { tabledata :[{ Date : ' 2016-05-03 '，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{Date:' 2016-05-02 '，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{ var main={ data()} {日期3360' 2016年5月6日'，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016-05-07 '，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }]，多选3360 []}，挂载(){此。 选中()；//每次数据更新时，触发此功能。}，methods: {checked(){ //第一个el-table将ref='table '引用标识符添加到此。$ refs . table . togglerowselection(this . table data 3[0]，true)；}，handleSelectionChange(val){ this . multipleselection=val；}}} varctor=vue。扩展(主)新因子()。$ mount ('# app') 2。页面一加载就使用ajax获取数据：

这里我们用一个计时器来模拟它。

var Main={ data(){ return { tabledata 3:[]，multipleSelection: [] }，mounted(){ var _ this=this；settimeout(function(){ _ this . table data 3=[{ date : ' 2016-05-03 '，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{date: '2016-05-02。姓名： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016年5月4日'，姓名3360 '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016-05-01 '，姓名： '王小虎'，地址： ' 1518弄'$ NextTick(function(){ _ this . checked()；//每次数据更新时，触发此功能。});},3000);}，methods: {checked(){ //第一个el-table将ref='table '引用标识符添加到此。$ refs . table . togglerowselection(this . table data 3[0]，true)；}，handleSelectionChange(val){ this . multipleselection=val；}}} var ctor=vue。扩展(主)新因子()。$ mount ('# app') 3。当一开始没有数据时：

var Main={ data(){ return { tabledata 3:[]，multipleSelection: [] } }，beforeMount() { }，Methods: {checked(){ //首先，el-table将ref='table '引用标识符添加到此。$ refs . table . togglerowselection(this . table data 3[2]，true)；}，handleSelectionChange(val){ this . multipleselection=val；}，get(){ vardata=[{ date : ' 2016-05-03 '，名称3360 '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{date:' 2016-05-02 '，名称3333。地址： '上海市普陀区金沙江路1518弄' }，{日期：' 2016年5月4日'，名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，{日期： ' 2016年5月1日'名称： '王小虎'，地址： '上海市普陀区金沙江路1518弄' }，这个。$ NextTick(function(){ this . checked()；//每次数据更新时，触发此功能。})}}} var ctor=vue。扩展(主)新因子()。$ mount(# app)'以上就是本文的全部内容。希望对大家的学习有帮助，多多支持我们。