ant design vue table栏getCheckboxProps的使用

今天业务有一个需求,从一个页面跳到另一个页面的时候,需要把以前选择的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 = [];
}
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好苦呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值