antdVue问题

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:;"></a>的使用
	是为了让超链接去执行js函数,点击此超链接时,页面不会进行任何操作,防止跳到其他页面
点击后,页面不动,只打开连接
	eg:<a id="change" href="javascript:;"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
      );
    },