ant-design
文章平均质量分 64
YorcentLuo
这个作者很懒,什么都没留下…
展开
-
利用time-Picker组件如何封装一个时间范围选择组件
场景:使用过ant-design组件库的人基本都知道,它的time-picker组件并不像date-picker组件那样,支持时间范围选择。所以,这个时候就只能自己手动来封装一个了。下面正式开始:定义一些prop属性:props: { // 时间显示格式 timeFormat: { type: String, default: 'HH:mm' }, // 组件绑定的值 timeData: { type: .原创 2020-06-23 17:38:22 · 1240 阅读 · 0 评论 -
ant-design table组件rowSelection列对勾选和未勾选分类排序
场景描述:在表格第一列显示勾选框,支持行多选。然后在这一列的列头增加排序按钮,对已勾选和未勾选的行进行排序。解决方案:常用的解决方案有两种:1,利用table组件本身的rowSelections属性,对其进行封装改造,实现需求。2,给表格绑定的数据增加一列,列头样式为勾选框+排序按钮。数据列显示勾选框组件。这里为了充分利用table组件本身的接口方法,采用第一种...原创 2020-04-29 10:00:41 · 3373 阅读 · 0 评论 -
vue 给ant design table 组件自定义点击行(选中行)样式和斑马纹样式
写在开头:element-ui的table组件有几个属性很好用,但是ant-design中table组件是没有的。比如:stripe:是否为斑马纹 table。highlight-current-row:是否要高亮当前行。当然,还有好几个其他的属性,但是本文先只讲这两个。既然element-ui有,ant-design没有,那我在用ant-design的table组件时,...原创 2020-04-26 13:57:51 · 10294 阅读 · 4 评论 -
利用filetr 操作 ant-design table某一行的某一列的数据。点击切换真实数据和加密数据
情景描述:如果有这样一个需求,在table中的某一列的数据,不能直接展示原始数据,而是使用加密符号代替,只有点击了某行某列之后,才能切换到真实数据,每次点击就是一次切换。这样类似的需求你会怎么实现?这里使用ant-design UI框架中的table组件做为例子来讲。首先,肯定会想到用filter(angular中叫pipe,vue里面叫filter)。上代码:&l...原创 2020-04-23 15:56:46 · 3119 阅读 · 0 评论 -
ant-design table 组件 列头名称 国际化i18n问题 解决
话不多说,直接进入主题。ant-design 在使用它的table组件的时候,不知道你们有没有需求说需要翻译列表头部名称:在切换语言的时候,table的列头名称 并不会同步更换对应语言, 而是需要你重新laod或者切换页面之后才生效。官方文档没有涉及相关问题的解决办法,其实很明显原因就是切换语言的时候,表头的i18n全局指令变量没有被触发:这是正常使用ant-design tabl...原创 2020-04-03 17:34:27 · 4229 阅读 · 10 评论