antdVue框架问题
#(1)slot/slot-scope插槽问题
一般用于表格数据渲染
eg:
<span slot="user" slot-scope="text,records,index">
</span>
在columns表格数据类型中
const columns=[
...,
{
title:'xxx',
scopedSlots:{
custiomRender:"user"//这里的user对应到上面slot的user
}
}
]
#(2)v-decorator表单校验
用于表单标签里面
v-decorator=[
'name',
{
rules:[//设置校验规则
{
initialValue: "",//初始化值，也就是默认值,可不写
required:true,//必填提示
message:'xxxxxx',//未输入提示信息，
pattern:/^ &/, //正则规则，可选
}
]
}
]
在script中
data(){
form:this.$form.createForm(this)//表单创建后可以使用form方法
},
methods:{
sumbit(){
this.form.validateFields((err, values) => {//获取输入表单的数据
if (!err) {
console.log('Received values of form: ', values);
}
});
}
}this.form.resetFields() 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 #(3)<template slot='footer'></template>
在<a-modal></a-modal>中使用实现自定义对话框页脚内容
eg:
<a-modal v-model="visible" title="Title" on-ok="handleOk">
<template slot="footer">
<a-button key="back" @click="handleCancel">
Return
</a-button>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">
Submit
</a-button>
</template>
<p>Some contents...</p>
<p>Some contents...</p>
</a-modal>#(4)<template funtional>
若一个组件只用于展示数据，所有动态数据都从父组件传递进来（只有props），内部没有逻辑交互（无methods方法、也没有mounted等任何生命周期处理函数），没有状态修改(无data)，则推荐使用函数式组件来提升vue的性能#(5)表格中配置<span slot="hhhh"></span>
如果只配置<span slot="hhhh"></sapn>则需要在columns列数据中设置slots属性eg:<span slot="hhhh"></sapn>
slots: { title: 'hhhh' },#(6)<a-button>中html-type="submit"设置
使用type="submit"会跟设置antd按钮样式类型冲突，而html-type就可以设置原生按钮类型就可以触发form表单提交事件#(7)$t('')用于文件字符容器来储存 #(8)fieldDecoratorOptions与v-deocorator表单校验的区别
fieldDecoratorOptions官方文档不再使用，推荐v-decorator#(9)<template>与div中的v-for
<template v-for="item in 3">
<div>{{item}}</div>
<temlpate>
渲染生成后：为3个同级排列div<div v-for="item in 3">
<div>{{item}}</div>
</div>
渲染生成为：3个div中嵌套一个div渲染内容#(10) 模糊查询#(11) axios.$put请求
请求修改数据
#(12) <a href="javascript:;" rel="external nofollow" rel="external nofollow" ></a>的使用
是为了让超链接去执行js函数,点击此超链接时,页面不会进行任何操作,防止跳到其他页面
点击后,页面不动,只打开连接
eg:<a id="change" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="fn()">
看不清换一张?
</a>#(13)antd中选择器select的filterOption属性
是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false#(14)window.navigator.msSaveblob() 和 window.URL.createObjectURL()
方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件
Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象
eg:
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
} else {
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link) //下载完成移除元素
window.URL.revokeObjectURL(url) //释放掉blob对象
}#(15)antd表单清空时间选择框数据
<a-date-picker>选择框的时间无法直接通过重置表单事件this.form.resetFields()清空，需要通过时间框上的change事件function(date.datestring)的datestring用v-model绑定清空，重置时将绑定值设置null或undefined
<a-form-item>
<a-date-picker @change="changeTimeTo" v-model="selectTimeTo"> </a-date-picker>
</a-form-item>
在data中定义 selectTimeTo:undefined;
methohds:{
changeTimeTo(date,dateString){
this.selectTimeTo=dateString;
},
reset(){
this.selectTimeTo=undefined;
this.form.resetFields();
}
}
#(16)select下拉框内容输入提示无数据报错问题
输入请求时后台做模糊查询获取到相关的数据之后a-select要添加属性
option-filter-prop="children"
:filter-option="filterOption"
在methods中设置
filterOption(input, option) {
return ( option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
},
