202010-30 解决ant Design中Select设置initialValue时的大坑 我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id(需要的是显示名称);如果设置默认值initialValue是名称,那么下一步操作会出现报错但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称错误效果图:期待正确效果图解决方案:在... 继续阅读 >
202010-30 解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题 场景描述:如下图所示,点击减免天数会出现一个弹窗,输入天数后点击确定,保存这个值,但是我在点第二行的减免天数的时候初始应该是空的,可是现在显示的是第一行输入的值;<Modaltitle="减免天数"visible={that.state.visible}onOk={that.handleOk.bind(that)}onCancel={that.handleCancel}><Formhorizontalform={form}><FormItem{...{labelCol:{span:5},wrapperCol:{span:16}}}label="减免天数:"><Inp... 继续阅读 >
202010-30 解决ant Design Search无法输入内容的问题 我的问题:今天先根据手机号查询一个用户,根据文档引用Input中的Search,我添加了一个样式,发现输入框无法输入内容,代码:return(<div><Searchstyle={{width:300,float:"right"}}placeholder="手机号"onSearch={value=>this.findAppUserByPhoneNo(value)}onChange={this.onChangePhoneNo}value={searchText}enterButton/><Table.../><Pagination.../></div>... 继续阅读 >
202010-30 design vue 表格开启列排序的操作 开启排序1、本地数据排序column数据设置,需要开启的列设置sorter:(a,b)=>a.address.length-b.address.length,自定义排序方法2、服务端排序sorter设置true点击排序,表格触发change方法,接受参数change(pagination,filters,sorter,{currentDataSource})第三个参数就是排序信息{field,order}<a-table:columns="header":dataSource="body":pagination="pagination"@change="handleTableChange">method... 继续阅读 >
202010-30 ant design vue导航菜单与路由配置操作 此功能包含:1.根据动态路由自动展开与自动选择对应路由所在页面菜单2.只展开一个子菜单3.兄弟组件控制菜单与路由<a-menu:openKeys="openKeys":selectedKeys="selectedKeys"mode="inline"theme="dark":inlineCollapsed="$store.state.isCollapse"@click='select'@openChange='openChange'><a-sub-menuv-for="iteminmenu":key="item.name":index="item.title"><spanslot="title"><a-icon:type="item.icon"/><span>{{item.t... 继续阅读 >
202010-30 vue用ant design中table表格,点击某行时触发的事件操作 使用customRow设置行属性,写对应事件:customRow="rowClick"然后在data里面写rowClick:record=>({//事件on:{click:()=>{//点击改行时要做的事情//......console.log(record,'record')}}})在官方文档中也写的很清楚补充知识:Ant-Design-Vuetable合并单元格,并且添加点击事件点击行,有一个customRow。可以配置点击事件。单元格的自定义分为两种方式。一种是:通过template标签。html部分//... 继续阅读 >
202010-30 ant design vue嵌套表格及表格内部编辑的用法说明 实现效果:因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件表格外层可以翻页,查询携带页码参数<a-tablesize="default"rowKey="dict_id"//根据自己数据内部关键针设定ref="table"@expandedRowsChange="expandedRowsChange"@expand="expand"//展开表格节点操作@change="change"//外层表格中排序,翻页,修改页面数量等操作:expandedRo... 继续阅读 >
202010-30 解决ant design vue 表格a-table二次封装,slots渲染的问题 目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染<template><a-tablebordered:scroll="{x:scrollX,y:600}"v-bind="{...$attrs,...$props,...{dataSource:body,columns:header}}":loading="loadingObj"v-on="listeners"><templatev-for="(val,slot)in$slots":slot="slot">{{... 继续阅读 >
202010-30 ant design vue中表格指定格式渲染方式 注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别渲染方法1:指定渲染函数:constcolumns=[{title:'排名',dataIndex:'key',customRender:renderContent//渲染函数的规则},{title:'搜索关键词',dataIndex:'keyword',customRender:(text,row,index)=>{if(index<4){//前4行数据以a标签的形式被渲染return<ahre... 继续阅读 >
202010-30 ant design vue datepicker日期选择器中文化操作 按照antdesignvue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言://默认语言为en-US,如果你需要设置其他语言,推荐在入口文件全局设置localeimportmomentfrom'moment';import'moment/locale/zh-cn';moment.locale('zh-cn');<a-date-picker:defaultValue="moment('2015-01-01','YYYY-MM-DD')"/>完成此步骤后,日期只有部分是中文的,并且年月顺序错误,查找了很多资料才发现,antdesignvue有一个国... 继续阅读 >
202010-30 解决ant Design中this.props.form.validateFields未执行的问题 在使用antDesignd的form组件时发现点击提交方法中this.props.form.validateFields((err,values)=>{})部分未执行,也没有报错。原因:我使用了自定义校验validator,在自定义校验方法中有个错误,使用了未定义的变量。注意:1、使用validator时,注意自定义方法中是否有错误;对于如何解决没有错误提示,官网提示:可以选择通过async返回一个promise或者使用try...catch进行错误捕获,具体查看官网form组件;2、使... 继续阅读 >
202010-30 Ant Design moment对象和字符串之间的相互转化教程 moment对象转字符串values.saleStartTime=values.saleStartTime.format('YYYY-MM-DD');字符串转moment对象this.model.saleStartTime=moment(record.saleStartTime);补充知识:vueantdesign的日期组件range-picker表单中进行moment赋值问题官方文档这样写参数说明类型showTime.defaultValue设置用户选择日期时默认的时分秒moment[]之前进行过普通票哪个的datepicke... 继续阅读 >
202010-30 ant design 日期格式化的实现 今天写项目的时候用到antdesign中的日期组件,但是由于用antdesign日期组件取得的值是moment类型,而往数据库中保存需要的是字符串类型.这里就用到了moment日期转换第一种写法我取得的值是年月如:201806第二种写法moment().format('YYYY-MM-DD')第三种写法moment(Date.now()).format('YYYY-MM-DD')获取本地日期的下个月window.moment().add(1,'months')获取当前日期的下一天window.moment().add(1,'days')参考地址http://mom... 继续阅读 >
202010-28 ant design vue中日期选择框混合时间选择器的用法说明 首先时间格式化用到moment方法,需要在页面中引入moment组件importmomentfrom'moment'结构代码:<a-date-pickerstyle="width:100%":getCalendarContainer="(triggerNode)=>triggerNode.parentNode"format="YYYY-MM-DDHH:mm:ss"v-decorator="['pushtime',{rules:[{required:true,message:'请输入发布时间!'}]}]":showTime="{defaultValue:moment('00:00:00','HH:mm:ss')}":disabl... 继续阅读 >
202010-28 解决ant design vue中树形控件defaultExpandAll设置无效的问题 页面步骤:1.设置a-tree标签2.默认的treeNodes值设置为空数组3.在mounted组件加载的时候给treeNodes的值赋值结果:设置defaultExpandAll无效,并不能展开所有节点原因:defaultExpandAll仅在组件第一次渲染时有效,不仅仅tree组件,其它组件的defaultXXX值都是这个行为,可以自行搜索受控组件/非受控组件的概念。如果你想异步获取数据后展开全部结点,可以使用非受控方式:https://codepen.io/lovefemi/pen/MMmRvx补充知识:AntD... 继续阅读 >
202010-28 Ant Design的Table组件去除 在AntDesign的Table组件文档中,排序有三种状态:点击升序、点击降序、取消排序。一般需求只需要升序和降序,不需要取消排序,这时候就需要我们设置sortOrder来去除取消排序。首先,我们从官方文档中ctrl+c出一个排序栗子,放在我们的组件中。官方栗子importReact,{useEffect,useState}from'react';import{Table}from'antd'exportdefault()=>{const[data,setData]=useState([{key:'1',name:'JohnBrown... 继续阅读 >