Vue3 antdv 简单表单校验
摘要：Vue3 antdv 简单表单校验 <template> <a-form ref="formRef" name="custom-validation" :model="formState" v-bind="layout" > <a-form-item has-feedback label="aaaa
阅读全文
posted @ 2022-02-02 01:49
随笔分类 - Ant Design Vue
ant-design-vue 之简单表格自定义表头和内容
摘要：ant-design-vue 之简单表格自定义表头和内容 使用到的API slots: { title: 'customnName' } 和 scopedSlots: { customRender: 'customAge' } <template> <div> <a-table bordered :
阅读全文
posted @ 2020-09-28 16:21
ant-design-vue 之form表单选中select使用
摘要：ant-design-vue 之form表单选中select使用 01) 一般select @change="handleChangeFei" 可以获取key 和 val (默认有2个参数) handleChangeFei(value,option) { console.log(value, opt
阅读全文
posted @ 2020-09-24 15:41
ant-design-vue 之upload 文件上传
摘要：ant-design-vue 之upload 文件上传 01) 单文件上传 使用 :before-upload="beforeUpload" 和 @change="handleChange" <template> <div> <div> 图片名字: {{imgName}}</div> <br /><
阅读全文
posted @ 2020-08-29 15:04
ant-design-vue 之form表单中label-col和wrapper-col使用
摘要：ant-design-vue 之form表单中label-col和wrapper-col使用 主要代码: :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }" demo: <template> <div> <a-form :form="form"
阅读全文
posted @ 2020-08-04 16:31
ant-design-vue 之form表单使用
摘要：ant-design-vue 之form表单使用 主要代码: v-decorator, setFieldsValue, getFieldsValue, resetFields, validateFields this.form.setFieldsValue({"username":['usernam
阅读全文
posted @ 2020-08-03 10:34
ant-design-vue 隐藏浏览器控制台输出async-validator验证警告
摘要：Ant-Design-Vue 隐藏浏览器控制台输出async-validator验证警告 解决办法: node_modules/async-validator/es/util.js 51行node_modules/async-validator/lib/util.js 49行 这2个文件中 cons
阅读全文
posted @ 2020-07-27 10:29
Ant Design Vue 中table表格解析 HTML
摘要：Ant Design Vue 中table表格解析 HTML 场景: 后台返回的数据中有HTML,让前台解析出来 解决方案: 主要使用 scopedSlots 和 slot-scope 和 v-html demo: <template> <div> <h3>解析HTML的p标签</h3> <a-ta
阅读全文
posted @ 2020-07-17 16:49
Ant Design Vue 中重写form表单样式
摘要：Ant Design Vue 中重写form表单样式 Ant Design Vue 中form表单样式不符合项目要求,使用全局style重写 主要使用: <style lang="scss"> </style> demo: <template> <div class="study02"> <!--使
阅读全文
posted @ 2020-07-17 16:43
Ant Design Vue 中 modal 利用 $refs 简单使用
摘要：Ant Design Vue 中 modal 利用 $refs 简单使用 主要使用到 this.$refs.closeBtnModal.initShow(); 避免了父组件传值,再使用this.$emit() 的繁琐步骤, 这样可以在子组件中控制modal打开和关闭,不需要在父组件中写代码处理 01
阅读全文
posted @ 2020-07-15 19:51
Ant Design Vue 的 table rowSelection里面去掉全选框
摘要：Ant Design Vue 的 table rowSelection里面去掉全选框 解决办法: columnTitle:' ' 设置为空即可 <a-table :columns="columns" :data-source="data" :customRow="clickRow" :rowKey=
阅读全文
posted @ 2020-07-15 18:13
vue项目中解决文件上传 change事件只执行一次的问题
摘要：vue项目中解决文件上传 change事件只执行一次的问题 文件上传第一次上传一个文件后,再次上传这个文件,无法执行change事件, 01) 解决办法,借助v-if 02) 使用 Ant Design Vue 官方的 upload demo: <template> <div> <h3>这里是需求页
阅读全文
posted @ 2020-07-03 14:48
vue-cli 中使用父子之间传值_父组件传值子组件_封装form表单
摘要：vue-cli 中使用父子之间传值_父组件传值子组件_封装form表单 使用prop属性,(借助v-bind绑定) study01.vue 中代码 <template> <div> <h3>这里是需求页面</h3> <v-form-work ref="form-work" :arrForm="tab
阅读全文
posted @ 2020-06-28 18:31
Ant Design Vue 中 DatePicker 日期选择框 使用
摘要：Ant Design Vue 中 DatePicker 日期选择框 使用 01) 单页面中使用_demo: 新建 test.vue,内容如下 <template> <div> <a-date-picker @change="onChange" :default-value="defaultTime?
阅读全文
posted @ 2020-06-18 15:32
vue 中使用 Ant Design 依次提供了三级选项卡
摘要：Ant Design 依次提供了三级选项卡，分别用于不同的场景。 卡片式的页签，提供可关闭的样式，常用于容器顶部。 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 RadioButton 可作为更次级的页签来使用。 切换的时候绑定点击事件 onTabClick 和改变事件 onC
阅读全文
posted @ 2020-06-12 19:43
