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

      );

    },
巴特西

antdVue问题

antdVue框架问题

最新文章

热门文章
