ant design vue table栏getCheckboxProps的使用
今天业务有一个需求,从一个页面跳到另一个页面的时候,需要把以前选择的table的数据带上,然后展示出来,这可难倒我了,研究好长时间,在网上搜一堆,看个大概然后还是决定自己写一下,毕竟,自己动手,丰衣足食。我的逻辑是如果带过来的table id和以前的table id一样的话就默认选中,打上对勾。首先看文档的介绍这个api刚看第一眼不知道是干嘛的,然后就百度了,说是这个可以获取到checked的属性
·
今天业务有一个需求,从一个页面跳到另一个页面的时候,需要把以前选择的table的数据带上,然后展示出来,这可难倒我了,研究好长时间,在网上搜一堆,看个大概然后还是决定自己写一下,毕竟,自己动手,丰衣足食。我的逻辑是如果带过来的table id和以前的table id一样的话就默认选中,打上对勾。
首先看文档的介绍
这个api刚看第一眼不知道是干嘛的,然后就百度了,说是这个可以获取到checked的属性。但是还是不知道怎么用,因为这是rowselection的一个配置,所以我就在rowselection里面加了这个
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
// 这个就是加的属性
getCheckboxProps: getCheckboxProps
}"
文档说是一个函数,然后就写一个方法,有一个默认的形参record。
data () {
return {
recordArr: [],
recordStr: ''
}
}
getCheckboxProps(record) {
// record就是你每一行的数据是对象,这儿我要把record的每一条数据push到我定义的变量里边,因为我要对比这儿的id,如果一样的话就打对勾。
this.recordArr.push(record);
console.log(this.recordArr);
// this.getitemList就是从另一个页面获取来的数据
this.getItemList.forEach(item => {
item.detailList.forEach(item1 => {
this.recordArr.forEach(item2 => {
// 从这儿判断如果id一样的话就把值给到this.recordStr
if (item1.contentId == item2.id) {
this.recordStr = item1.contentId
console.log(this.recordStr);
};
});
});
});
// 这个为什么写到这儿,是因为你如果写到判断里面的话,会报错props为undefined(为什么会报这个错,我也不知道,先把业务搞出来。如果有大神看到这个文章,知道的话,还请多多指教),获取不到props,然后你把这个值给了defaultChecked,就会默认显示了。
return ({
props: {
defaultChecked: this.recordStr
},
});
},
这样的话你切换的时候id不相等也会打勾,这样就是不正常的,所以还得用到一个方法,就是当你点击切换的时候,把这俩个值给清空一下就好了,我用到的是树状图的方法,点击哪个就清空一下。
@select='selectTree'
selectTree() {
this.recordArr = [];
this.recordStr= '';
}
有人的业务肯定不一样,我就是提供一个参考,有什么不对的地方,还请指出来,谢谢。
今天来了之后,看到好像不太对,底下是改进的地方,
data () {
return {
this.recordArr: []
}
}
getCheckboxProps(record) {
let c = [];
this.recordArr.push(record);
this.getItemList.forEach(item => {
item.detailList.forEach(item1 => {
// console.log(item1)
this.recordArr.forEach(item2 => {
// 如果id相等才默认选择
if (item1.contentId === item2.id) {
c.push(item1.contentId)
};
});
});
});
return ({
props: {
defaultChecked: c.some(item1 => item1 === record.id)
},
});
},
selectTree() {
this.recordArr = [];
}
更多推荐
已为社区贡献15条内容
所有评论(0)