vue中使用ant design vue的checked

news/2024/7/19 13:18:12 标签: js, vue, node.js

今天有一个需求,后端给了俩条数据

js">ckTeamAllMembers: ["琳", "克", "思", "符兴", "于", "胡方", "伍煜", "洪波", "均铨", "华"];
taskSelectedMembers: ["符兴", "洪波", "伍煜", "思", "胡方"];

需求就是让相同的值默认在checked的显示出来,但是不能点击,刚开始想的就是先把这俩个数组合并起来然后筛选不同的值出来,这样就可以了。

这里边不能使用:default-value
要使用value
<a-checkbox-group
  @change="onChange"
  disabled
  :options="arrDataQuarey"
  :value='sameData'
  style="margin-left: 150px" >
  <span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span>
</a-checkbox-group>
js">data () {
	return {
		arrDataQuarey: [],
		taskSelectedMembers: [],
		sameData: []
	}
}
 this.arrDataQuarey = res.result.ckTeamAllMembers;
 this.taskSelectedMembers = res.result.taskSelectedMembers;
 // 合并这俩个数组
 let checkedData = this.arrDataQuarey.concat(this.taskSelectedMembers);
 console.log('checkedData',checkedData)
 var cc = checkedData.filter((item,index,arr) => {
 // indexof的意思就是获取第一次出现的位置
   if (arr.indexOf(item) !== index) {
   // 如果等于的话就不是筛选的值了,不等于才是筛选的值
     return arr.indexOf(item) !== index;
   }
 })
 this.sameData = cc;
 // 筛选出来的每一个数据
 console.log(this.sameData);

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

相关文章

python编写代码工具_python编码工具

广告关闭 腾讯云11.11云上盛惠 &#xff0c;精选热门产品助力上云&#xff0c;云服务器首年88元起&#xff0c;买的越多返的越多&#xff0c;最高返5000元&#xff01;编码后字节序列被发送给终端&#xff0c;假若终端设置的编码和str编码不一致&#xff0c;终端就会显示出乱码…

vue中使用moment.js转换时间戳

<div>{{ ckStartDate }}</div>import moment from moment; data () {return {ckStartDate: } } // 这是从后端查的值 // moment括号里面写的是需要转换的时间戳 // format括号里面写的是需要转换的格式 this.ckStartDate moment(res.result.ckStartDate).format(Y…

kafka如何保证不重复消费又不丢失数据_如何保证kafka消息不丢失

背景 这里的kafka值得是broker,broker消息丢失的边界需要对齐一下&#xff1a; 1 已经提交的消息 2 有限度的持久化 如果消息没提交成功&#xff0c;并不是broke丢失了消息&#xff1b; 有限度的持久化&#xff08;broker可用&#xff09; 生产者丢失消息 producer.send(Object…

vue中使用ant design vue的单选框(Radio)

话不多说&#xff0c;直接上代码 <template slot"ckResult" slot-scope"text, record"><a-radio-group:defaultValue"Number(record.ckResult)"change"onChangeRadiockResult"><a-radio :style"radioStyle" …

spring 配置文件_闲谈Spring读取配置文件的方式

通过value读取配置使用Value("${property}") 读取application.yml配置信息Value("${ip}")String ip;通过ConfigurationProperties读取ComponentConfigurationProperties(prefix "config")SetterGetterclass ConfigProperties { private Stri…

vue中使用ant design vue的table之(rowkey)

直接设置一个rowkey‘id’ <a-tablebordered:data-source"dataSource":columns"columns"rowKey"id">就不会报那个必须设置rowkey的警告了。

c语言 方程改main的值_《零基础看得懂的C语言入门教程》—(十一)自定义函数很简单

一、学习目标了解C语言的自定义函数的使用方法了解C语言自定义函数的传参了解C语言自定义函数的返回值目录《零基础看得懂的C语言入门教程》——(一)脱离学习误区 《零基础看得懂的C语言入门教程》——(二)简单带你了解流程 《零基础看得懂的C语言入门教程》——(三)轻松悟第一…

vue中使用ant design vue的table和单选框(radio)配合使用

现在的需求就是在每个table渲染的列里边渲染每一个&#xff0c;改一个值的话&#xff0c;就给后端传改的那个值&#xff0c; 如果改一个值的话&#xff0c;就传一个&#xff0c;改几个传几个&#xff0c;现在的方法就是先给一个空字符串&#xff0c;改一个就把值赋值到那个空字…