记录Vue 使用Ant Design of Vue项目中小技巧（持续更新）

置顶 CV章鱼烧

已于 2023-05-23 11:18:51 修改

阅读量1.2k

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript ant

于 2021-12-31 15:35:24 首次发布

本文链接：https://blog.csdn.net/weixin_45844542/article/details/122256921

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、深度拷贝

场景复现：在进行编辑表格某项数据时模态框进行回显数据，修改数据时当前模态框里面的值会影响到表格里面的数据，在进行取消操作时表格的数据会莫名消失。解决代码如下：

	//第一种
 editChiidren(val) {
      this.form = JSON.parse(JSON.stringify(val))
    },
    //第二种
  editChiidren(val) {
     this.model = Object.assign({}, val)
    },

二、图片上传（这里是使用了Ant Design of Vue组件库）

场景复现：进行提交表单时会有图片上传的功能，需求是当用户点击保存的时候先上传图片有了图片返回值在进行提交数据，如果没有点击就不上传图片，解决代码如下：

<a-upload
   list-type="picture-card"
    :file-list="fileList"
    @preview="handlePreview"
    @change="handleChange"
    :beforeUpload="handleBeforeUpload">
    <!-- 这里的v-if="fileList.length < 1" 是你可以上传几张图片 我这里是一张上传-->
     <div v-if="fileList.length < 1">
     <a-icon type="plus" />
      <div class="ant-upload-text">上传</div>
      </div>
</a-upload>
   <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel2">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>

data(){
	return{
	 fileList: [],
	 file:''
	}
},
methods: {
    handleBeforeUpload() {
      return false
    },
    handleCancel2() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange({ file, fileList }) {
      this.fileList = fileList
      this.file = file
    },
      //详情表单提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.file == '') {
            return this.$message.warning('请先上传')
          }
          this.loading = true
          let url = window._CONFIG['domianURL'] + '/sys/boot/file/upload' //这里是你的上传图片地址
          const formData = new FormData()
          formData.append('file', this.file)
          postAction(url, formData)
            .then((res) => {
              this.loading = false
              if (res.message) {
                this.form.businessLicenseUrl = res.message
                putAction(this.url.updateFleetDetail,{fleetId:this.parentId,...this.form}).then((res) => {
                  if (res.code == 200) {
                    this.$message.success(res.message)
                    this.getQueryById()
                  }
                })
                console.log('提交成功！')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
 }

三、表格column的数据过滤（这里是使用了Ant Design of Vue组件库）

场景复现：有时候后端返回的数据是0或者是1的时候我们前端需要进行处理成文字（注意：这里处理的数据保证是只有规定好的不然会显示不了你需要的文字）。代码如下：

 {
          title: '维修性质',//表头名称
          dataIndex: 'itemType', //这里就是你的数据源
          align: 'center',//是否居中
          customRender: (text) => { //你进行处理的数据了
            if (text == 1) {
              return '保养'
            } else {
              return '维修'
            }
          },
        },

四、表格展示多个数据值，（这里是使用了Ant Design of Vue组件库）

场景复现：根据UI图需要在表格中进行渲染多个数据值的数据，实现：先在column表头进行定义scopedSlots，actions是插槽名称；代码如下：

<span slot="actions" slot-scope="text" class="table-btn-box">
         <div>{{text.province}}-{{text.city}}-{{text.district}}{{text.detailAddress}}</div>
       </span>

 {
          title: '仓库地址', //
          align: 'center',
         scopedSlots: { customRender: 'actions' },
        },

五、获取登录用户的信息，（这里是使用了jeccg-boot 低代码平台）

// 引入
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
 //随便放在一个方法里面
 console.log( Vue.ls.get(USER_INFO))

六、获取系统当前月，获取系统前一周的时间，获取系统前一个月的时间

 var nowdate = new Date()
      var y = nowdate.getFullYear()
      var m = nowdate.getMonth() + 1
      var d = nowdate.getDate()
      var formatnowdate = y + '-' + m + '-' + d
      console.log(formatnowdate, '当前月')
      //获取系统前一周的时间
      var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000)
      var y = oneweekdate.getFullYear()
      var m = oneweekdate.getMonth() + 1
      var d = oneweekdate.getDate()
      var formatwdate = y + '-' + m + '-' + d
      console.log(formatwdate, '一周')

      //获取系统前一个月的时间
      nowdate.setMonth(nowdate.getMonth() - 1)
      var y = nowdate.getFullYear()
      var m = nowdate.getMonth() + 1
      var d = nowdate.getDate()
      var formatwdate = y + '-' + m + '-' + d
      console.log(formatwdate, '一个月')
      //获取当前时间
       var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() -1
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      this.formatwdate = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second

七、向数组里面的每个对象添加一个新的字段，将这个字段进行自加的操作，（记录操作数组）

let serviceOrderTraces = [{name:"nihao",age:'20'}]
serviceOrderTraces.forEach((item, index) => {
       item.num = index
    })

八、去掉表单验证信息二次打开残留（这里是使用了Ant Design of Vue组件库）

 // 去掉表单验证信息二次打开残留
       watch: {  
            // 去掉表单验证信息二次打开残留
            visible(val, newVal) {    //监听的是控制模态框显示或影藏开关的布尔值
                // 监视dialog状态（打开、关闭）
                if (val) {
                    try {
                        this.$refs['addForm'].resetFields() // 重置编辑表单
                        this.$refs['addForm'].clearValidate() //移除表单项的校验结果。
                        // addForm 为ref指向的表单
                    } catch (e) {
                    	console.log(e)
                    }
                }
            }
        },

九、表格合并（这里是使用了Ant Design of Vue组件库）

场景复现：根据UI图需要在表格中进行渲染相同的数据合并并且增加点击事件，实现：先在column表头进行定义customRender；下面是效果图：
在这里插入图片描述

直接上代码：

 data(){
 return {
 	column: [
        {
          title: '变更流水',
          dataIndex: 'bingdingId',
          align: 'center',
          customRender: this.changeObBingdingId,
        },
         {
          title: '审批状态',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 145,
          customRender: this.changeObCreateByType,
        },
        ]
     }
 }
  methods: {
	/**变更流水号相同的单元格合并  合并单元格，相同OB bingdingId */
    changeObBingdingId(value, row, index) {
      // 上一行该列数据是否一样
      let rowSpan = 1
      let bingdingId = '' 
      if (row.bingdingId) {
        bingdingId = this.dataSource[index].bingdingId
      } else {
        bingdingId = '-'
      }
      // 变更流水号值相同的单元格合并
      if (
        index !== 0 &&
        this.dataSource[index].bingdingId === this.dataSource[index - 1].bingdingId &&
        this.dataSource[index].bingdingId
      ) {
        return {
          children: bingdingId,  //这里给children 赋值是关键的 
          attrs: {
            rowSpan: 0,
          },
        }
      }
      // 判断下一行是否相等
      for (let i = index + 1; i < this.dataSource.length; i++) {
        if (this.dataSource[index].bingdingId === this.dataSource[i].bingdingId && this.dataSource[i].bingdingId) {
          rowSpan++
        } else {
          break
        }
      }
      // 如果这一列与下一列 bingdingId 数值相同
      if (this.dataSource[index].bingdingId === row.bingdingId) {
        return {
          children: bingdingId,//这里给children 赋值是关键的 
          attrs: {
            rowSpan: rowSpan,
            colSpan: 1,
          },
        }
      }

      return {
        children: bingdingId,
        attrs: {
          rowSpan: rowSpan,
        },
      }
    },
  changeObCreateByType(value, row, index) {
      // 上一行该列数据是否一样
      let rowSpan = 1
      let type = ''
      if (row.approveType == 0) {
        type = (
          <div>
            <a-tag color="#2db7f5">审核中</a-tag>
            <a-button
              type="link"
              onclick={() => {
                this.onToSend(row, index)
              }}
            >
              撤销
            </a-button>
            ,
          </div>
        )
      } else if (row.approveType == 1) {
        type = <a-tag color="#87d068">已通过</a-tag>
      } else if (row.approveType == 2) {
        type = <a-tag color="#f50">未通过</a-tag>
      } else if (row.approveType == 3) {
        type = <a-tag color="orange">结束</a-tag>
      } else if (row.approveType == 4) {
        type = <a-tag>撤回</a-tag>
      } else if (row.approveType == 5) {
        type = <a-tag color="red">取消</a-tag>
      } else if (row.approveType == 6) {
        type = <a-tag>免审核</a-tag>
      }

      // 审批状态相同的单元格合并
      if (
        index !== 0 &&
        this.dataSource[index].bingdingId === this.dataSource[index - 1].bingdingId &&
        this.dataSource[index].bingdingId
      ) {
        return {
          children: type,
          attrs: {
            rowSpan: 0,
          },
        }
      }
      // 判断下一行是否相等
      for (let i = index + 1; i < this.dataSource.length; i++) {
        if (this.dataSource[index].bingdingId === this.dataSource[i].bingdingId && this.dataSource[i].bingdingId) {
          rowSpan++
        } else {
          break
        }
      }
      // 如果这一列与下一列 bingdingId 数值相同
      if (this.dataSource[index].bingdingId === row.bingdingId) {
        return {
          children: type,
          attrs: {
            rowSpan: rowSpan,
            colSpan: 1,
          },
        }
      }

      return {
        children: type,
        attrs: {
          rowSpan: rowSpan,
        },
      }
    },
}

十、当日、当月、当年（这里是使用了jeccg-boot 低代码平台，Ant Design of Vue组件库）

 import moment from 'moment'
 //选日、月、年
    orderTypeChange() {
    	// 当日的日期 例如：2022-02-01 至2022-02-01
        this.queryParam.startDate = moment().subtract('days').format('YYYY-MM-DD')
        this.queryParam.endDate = moment().format('YYYY-MM-DD')
    	// 当月的日期 例如：2022-12-01 至2022-12-30
        this.queryParam.startDate = moment().startOf('month').format('YYYY-MM-DD')
        this.queryParam.endDate = moment().endOf('month').format('YYYY-MM-DD')
 		// 当年的日期 例如：2022-01-01 至2022-12-30
        this.queryParam.startDate = moment().startOf('year').format('YYYY-MM-DD')
        this.queryParam.endDate = moment().endOf('year').format('YYYY-MM-DD')
    
    },

十一、前端做模查询（查询两个或者是单个）

<a-form-model-item>
          <a-input v-model="storehouseName" placeholder="备件名称 / 备件代码" style="width: 180px" />
        </a-form-model-item>


 data() {
    return {
    dataSource: [],//接口返回的原始数据
    storehouseName:""
    }
    },
onQuery() {
      if (this.model.storehouseName) {
        this.dataSource = this.showTable.filter(
        //e 可以直接点出你想查询的某个字段来进行筛选
          (e) => e.spareName.includes(this.storehouseName) || e.spareCode.includes(this.storehouseName)
        )
      } else {
        this.dataSource = this.showTable
      }
    },

十二、日期控件限制只能选择当天之前的日期，且不能超过多少天！(Ant Design of Vue组件库)

 <a-range-picker :disabledDate="getDisabledDate" @change="onChangeMonth" v-model="form.rangPicker" />

import moment from 'moment'
data(){
	 return {
	 rangPicker:[]
	}
}，
methods: {
 onChangeMonth(date, dateString) {
      this.rangPicker = date
      this.form.startTimeString = dateString[0]
      this.form.endTimeString = dateString[1]
      let days = moment(this.form.endTimeString).diff(moment(this.form.startTimeString), 'days') //
      if (days > 180) {
        this.rangPicker = []
        this.form.startTimeString = ''
        this.form.endTimeString = ''
        this.$message.warning('选择日期间隔不能超过180天！')
      },
      getDisabledDate(current) {
      return current && current > moment().endOf('day')
    },
   }

效果图：

十三、点击按钮获取当前时间（年月日时分秒）

 var date = new Date()
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds

CV章鱼烧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
记录Vue 使用Ant Design of Vue项目中小技巧（持续更新）

一、深度拷贝场景复现：在进行编辑表格某项数据时模态框进行回显数据，修改数据时当前模态框里面的值会影响到表格里面的数据，在进行取消操作时表格的数据会莫名消失。解决代码如下： editChiidren(val) { this.title = '编辑' this.visible = true this.form = JSON.parse(JSON.stringify(val)) },二、图片上传（这里是使用了Ant Design of Vue组件库）场景复现：
复制链接

扫一扫