ant design vue table栏getCheckboxProps的使用

news/2024/7/11 1:51:37 标签: vue, javascript, vue.js, es6

今天业务有一个需求,从一个页面跳到另一个页面的时候,需要把以前选择的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 = [];
}

http://www.niftyadmin.cn/n/763838.html

相关文章

python长宽表转换_深入Python数据分析:宽表如何重构为长表

先来了解Pandas封装的顶层函数部分,其一:melt()函数,它位于Pandas包的最顶层,结构如下:Pandas|melt()melt()函数的原型如下:frame为list型参数,后面都为position型参数。前者为通常意义的*args,…

带有key和value的数组去重

当我们遇到这样的数组 [1, 2, 3, 4, 4, 3, 2, 1];可以用set方法,也可以用foreach然后用indexOf的特性来去重。 但是当我们遇到这样的数组 var arr [{a:1, b:2, c:3},{a:1, b:3, c:4},{a:1, b:7, c:8}];那需要怎么去重呢 那就需要map配合findIndex了 arr.map((it…

java字符串转化为数组_数百万浏览量的问题:如何比较Java的字符串?为你解答

大家好,这里是云析学院,专门为大家解答各种Java问题,为全国互联网公司提供一流的技术人才!今天来给大家讲解一个问题:如何比较 Java 的字符串?这一个问题的访问量足足有300万,这说明有很多很多的…

js 删除字符串中指定的一些字符

比如有一些字符串 1213,,2312,,13123r,阿瓦达无,undefined,undefined 如果想删除这些undefined的字符串那需要怎么 办呢 代码 var a 1, 2, 3, 4, 5, 23, undefined, undefined; // 后面加g是删除字符串里面所有的und…

python入门之运算符的使用第一关_03 . Python入门之运算符

一、什么是运算符?举个简单的例子** 4 5 9 。 例子中,4** 和 5 被称为操作数,"" 称为运算符。Python语言支持以下类型的运算符:[算术运算符][比较(关系)运算符][赋值运算符][逻辑运算符][位运算符][成员运算符][身份运算符][运算符…

vue中使用img标签动态显示base64图片

<img :src"data:image/jpeg;base64 itemEsign.esignature" alt"">前缀一定要加上’data:image/jpeg;base64’这是字符串类型&#xff0c;后面用写上你需要渲染的base64图片

调用类中的方法 使用this 与 不使用this的区别_浅谈重写和重载的区别

重写:重写&#xff08;Override&#xff09;是父类与子类之间多态性的一种表现。如果在子类中定义某方法与其父类有相同的名称和参数&#xff0c;我们说该方法被重写 (Override)。子类的对象使用这个方法时&#xff0c;将调用子类中的定义&#xff0c;对它而言&#xff0c;父类…

js 导出Excel文件乱码问题

$.ajax({type: post,url: "",xhrFields: { responseType: "blob" }, // 主要是这一句data: {},success: function(data) {that.download(data,自己起的名字.xlsx)}}) }, download(data, fileName) {if (!data) {return}let url window.URL.createObjectU…