Element 默认勾选表格 toggleRowSelection的实现
更新时间：2019年09月04日 09:16:26 作者：chenjunbiao
这篇文章主要介绍了Element 默认勾选表格 toggleRowSelection的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
官网尽管提供了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')
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
我们在做列表查询的时候，会有很多查询项，如何实现超过n行查询项的时候自动折叠起来呢？本文给大家分享vue3实现搜索项超过n行就折叠的思路详解，感兴趣的朋友一起看看吧2022-06-06
最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了Javascript对象及Proxy工作原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue源码之首次渲染过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue-cli3 取消eslint校验代码的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家介绍了vue整合项目中百度API示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
解决vuejs 使用value in list 循环遍历数组出现警告的问题
今天小编就为大家分享一篇解决vuejs 使用value in list 循环遍历数组出现警告的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value，如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value，这篇文章主要介绍了vue3 中ref和reactive的区别,需要的朋友可以参考下2022-12-12
本篇文章主要介绍了Vue2.0用 watch 观察 prop 变化(不触发)，非常具有实用价值，需要的朋友可以参考下2017-09-09
最新评论