vue antd 使用小结

小结"/>

vue antd 使用小结

vue antd 使用小结

• 写在前面
• • 开发基础
  • 问题集锦及解决办法
• 写在后面

写在前面

从六月底开始，到现在这个项目告一段落，两月有余，从刚开始的一无所知，到现在稍有了解，还是想对这段过程做一个总结，不仅仅是这个组件库的应用，也是对自己这段时间的成长做一个总结回顾。

开发基础

结合Ant Design Vue，基于 vue antd admin进行开发。

问题集锦及解决办法

4. 显示序号代码

   	<span slot="num" slot-scope="text,record,index">{{ (myPagination.current-1)*myPagination.pageSize+parseInt(index)+1 }}</span>
   

5. 搜索框加防抖 代码

   	export function debounce (fn, delay) {let t = null;return () => {if (t !== null) {clearTimeout(t)}t = setTimeout(() => {fn.call(this)}, delay);}}// 页面中引用，input属性，或者change属性<a-input-search @input="debounce" /> export default {name: 'PlantingCost',components: {},// 全局注入inject: ['debounces'],data() {return {// 引用debounce: this.debounces(() => this.getPlantingCostData(this.keyword),500),}}}
   

   38. 验证不通过按钮置灰 代码

   	export function putAsh (form, ModalType) {let arr = [];let hass = false;if (form) {form.$children.forEach(e => {if (e.isRequired) {arr.push(e)}})if (modelLength(ModalType, arr) === arr.length && modelError(form.$children) === 0) {hass = false} else {hass = true}} else {hass = modelType(ModalType)}return hass;}export function modelError (allarr) {return allarr.filter((v) => v.validateState == "error").length}export function modelLength (type, arr) {switch (type) {case 0:return arr.filter((v) => v.validateState === "success").lengthcase 1:return arr.filter((v) => (v.initialValue && (v.validateState != "error" || v.validateState === undefined)) || v.validateState === "success").lengthcase 2:return arr.filter((v) => (v.initialValue && v.validateState != "error") || v.validateState === "success").length}}export function modelType (type) {switch (type) {case 0:return truecase 1:return falsecase 2:return true}}export function getProps (arr) {let newArr = [];for (const key in arr) {newArr.push(key);}return newArr}//通过一个数组过滤一个对象export function filterProps (props, fieldsError) {let selectNewList = {};	//组装过后的对象selectNewList = Object.keys(fieldsError).filter(val =>props.includes(val)).reduce((obj, key) => {obj[key] = fieldsError[key];return obj;}, {});return selectNewList}export function isAllEqual (array) {if (array.length > 0) {return !array.some(function (value) {return value !== array[0];});} else {return true;}}export default { putAsh };// 页面中引用，input属性，或者change属性<a-form-model ref="ruleForm" :model="formChange" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"><a-form-model /><template slot="footer"><a-button key="back" @click="handleCancel(ModalType)"> 取消 </a-button><a-button type="primary" :disabled="putAsh($refs.ruleForm,ModalType)" @click="handleOk(ModalType)">确定</a-button></template>// 导入import { putAsh } from '@/utils/putAsh';export default {name: 'PlantingCost',components: {},data() {return {// 引用putAsh: putAsh,,}}}
   

补充：文档的上传和下载代码

	//download 方法export function download (data, type, title) {let blob = new Blob([data], { type: 'application/vnd.ms-excel' });let objectUrl = URL.createObjectURL(blob);let link = document.createElement("a");//let cs=res.headers["content-disposition"].split(";")[2].split("filename=")[1]//cs = cs.replace(/\"/g,"");//去掉双引号link.href = objectUrl;//let time = new Date().getFullYear() +'-'+ (new Date().getMonth()+1) +'-'+ new Date().getDate()let time = Date.parse(new Date())if (type === 1) {link.setAttribute("download", title + time + '.xls');} else {link.setAttribute("download", title + time + '.pdf');}document.body.appendChild(link);link.click();document.body.removeChild(link) // 下载完成移除元素window.URL.revokeObjectURL(blob)}<template slot="operation" slot-scope="text, record"><div class="btns"><a-tooltip placement="topLeft" title="下载PDF"><a-button type="primary" :disabled="record.status!='已上传'" @click="downloadFile(record,2)"><a-icon type="download" /></a-button></a-tooltip><a-tooltip placement="topLeft" title="上传PDF"><a-upload class="avatar-uploader" :show-upload-list="false" :customRequest="uploadFile" :data="{ id: record.classifyId }" :before-upload="beforeUpload" @change="handleChange"><a-button type="primary"><a-icon type="cloud-upload" /></a-button></a-upload></a-tooltip></div></template>//引用inject: ['downloads'],// 方法downloadFile(record, type) {if (record.status != '未上传') {sortFileDownload(record.classifyId).then(res => {if (res.status == 200) {this.downloads(res.data, type, record.classifyName);this.query(this.myPagination.pageSize,this.myPagination.current);}}).catch(err => {console.log(err);});} else {this.$notification['error']({message: '操作失败，分类文档尚未上传!',});}},handleChange(info) {if (info.file.status === 'uploading') {this.loading = true;return;}},beforeUpload(file) {const isPDF = file.type === 'application/pdf';//    ||file.type ===  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||// file.type === 'application/vnd.ms-excel';if (!isPDF) {this.$message.error('只能上传PDF文件！');}const isLt100M = file.size / 1024 / 1024 < 100;if (!isLt100M) {this.$message.error('文件最大不能超过100M');}return isPDF && isLt100M;},uploadFile(file) {if (this.classifyId != '') {const formData = new FormData();formData.append('file', file.file);sortFileUpload(this.classifyId, formData).then(res => {if (res.data.success) {this.query(this.myPagination.pageSize,this.myPagination.current);}}).catch(err => {console.log('上传失败', err);});}},

写在后面

简短的一个总结回顾。大部分来源于平常遇到问题的随手记，问题描述不是很详细，解决办法也不是很详细，下次做项目的也应该要记得改变一下这个习惯，之后再进行回顾的时候也会更加细致一些，还有很多地方需要学习。
路漫漫其修远兮。