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直接在所在的位置加入值即可 则代码实现

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



相关文章
|
8月前
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
231 0
|
12月前
ant design pro 更改表格自带的分页
ant design pro 更改表格自带的分页
79 0
|
开发工具 git
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
601 0
【Ant Design Pro】使用ant design pro做为你的开发模板(五)去除无效代码,生成一个清晰的开发模板
|
11月前
|
前端开发
ant design中默认回调加入参数
ant design中默认回调加入参数
51 0
|
8月前
|
JavaScript
Ant Design Vue select下拉列表动态更新选中值
Ant Design Vue select下拉列表动态更新选中值
156 0
|
11月前
hook+ant design实现列表的增加和修改(弹出框)
hook+ant design实现列表的增加和修改(弹出框)
58 0
|
11月前
|
前端开发
ant design table中增加按钮的两种方式
ant design table中增加按钮的两种方式
140 0
|
11月前
|
前端开发 JavaScript
重置ant design得样式
重置ant design得样式
60 0
|
11月前
|
前端开发
关于ant design table组件里面文字溢出
关于ant design table组件里面文字溢出
109 0
|
11月前
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
144 0