elementui表格默认选中
重点:一般地,我们是用接口返回的数据去渲染elementui的Table表格,而这里如果要实现默认选中的效果,就必须要有一下的条件:1、一定要接口返回数据之后才进行默认选中的操作,即用this.$nextTick(function() {...}),在里面进行默认选中的操作;2、一定要用el-table标签里面的data属性的那个数组去用forEach循环体(试过用for循环不行)中用this.$
·
重点:
一般地,我们是用接口返回的数据去渲染elementui的Table表格,而这里如果要实现默认选中的效果,就必须要有一下的条件:
1、一定要接口返回数据之后才进行默认选中的操作,即用
this.$nextTick(function() {...}),在里面进行默认选中的操作;
2、一定要用el-table标签里面的data属性的那个数组去用forEach循环体(试过用for循环不行)中用
this.$refs.****.toggleRowSelection(row,true);实现默认选中
不多说,现在模拟一下场景:
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-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>
var app = new Vue({
el: '#app',
data: {
tableData: []
},
methods: {
getData () {
//此方法就用来模拟axios
let that = this;
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
that.tableData = response.data.table;
that.$nextTick(function() {
that.toggle(that.tableData); //建议包装成方法这样扩展性更强
})
})
.catch(function (error) {
console.log(error);
});
},
toggle (arr) {
..... //逻辑代码
arr.forEach(item => {
if(...) {
this.$refs.multipleTable.toggleRowSelection(item,true);
}
});
}
}
})
更多推荐
已为社区贡献4条内容
所有评论(0)