ant design控制tag选中的写法

简介: ant design控制tag选中的写法

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

歌谣 歌谣 这边需要做一个标签选中功能 于是乎我开始了官方api的研究 一开始准备封装一个组件的后来发现没必要




编辑


解决思路

<div> {tagList && tagList.map((item, index) => ( <CheckableTag checked={item.checked} key={index} onChange={(flag) => { this.handleChange(flag, index); }} > {item.tagValue} </CheckableTag> ))} </div>




总结要点

两步步走


1引入


import { Tag } from 'antd'; const { CheckableTag } = Tag;


2定义


3直接在所在的位置加入值即可 则代码实现

-----------------------------------



相关文章
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
438 0
ant design pro 更改表格自带的分页
ant design pro 更改表格自带的分页
131 0
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
719 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
前端开发
ant design中默认回调加入参数
ant design中默认回调加入参数
70 0
|
6月前
Ant Design组件动态嵌套表单制作
Ant Design组件动态嵌套表单制作
221 0
|
JavaScript
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
116 2
|
JavaScript
Ant Design Vue select下拉列表动态更新选中值
Ant Design Vue select下拉列表动态更新选中值
265 0
|
API
ant.design Table组件点击一个选项框却把所有选项都选中了
ant.design Table组件点击一个选项框却把所有选项都选中了
170 0
ant.design Table组件点击一个选项框却把所有选项都选中了
Ant Design 中表单内容如何设置,更改,回显功能写法
Ant Design 中表单内容如何设置,更改,回显功能写法
237 0
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
86 0