前端项目中日常碰到的需求

江清辞

已于 2022-06-24 09:43:15 修改

阅读量524

点赞数

分类专栏：前端碰到的问题文章标签：前端 elementui vue.js

于 2022-06-21 20:07:06 首次发布

本文链接：https://blog.csdn.net/qq_41974250/article/details/125397447

版权

前端碰到的问题专栏收录该内容

15 篇文章 2 订阅

订阅专栏

这篇博客介绍了在Vue.js应用中处理表格数据的一些关键技巧。包括金额格式化为千分位并保留两位小数的过滤器实现，el-table中的数量和金额规则校验，解决el-data-table数据刷新问题，以及表格合计功能的实现。此外，还分享了如何合并数组并去重以及设置el-date-picker默认日期的方法。

摘要由CSDN通过智能技术生成

一、金额格式化为千分位，并保留两位小数

filters: {
    //格式化数据,保留两位小数以及千分位
    matterValue(val) {
        if (val) {
            val = val.toLocaleString()
            if (val.indexOf(".") == -1) {
                val = val + ".00"
            } else if (val.indexOf(".") == val.length - 2) {
                val = val + "0"
            }
            return val
        } else {
            return 0
        }
    },
},

二、el-table中含有el-input，需要对数量和金额进行规则校验

<el-form ref="productForm" :model="selectTableData">
               <el-table-column prop="skuQty" width="160">
                              <template slot="header"> <span class="required-color">*</span> 要货数量</template>
                              <template slot-scope="scope">
                                             <el-form-item :prop="`${scope.$index}`" :rules="{validator: skuQtyValidator}">
                                                            <el-input placeholder="请输入" maxlength="5" clearable v-model="scope.row.skuQty"></el-input>
                                             </el-form-item>
                              </template>
               </el-table-column>
               <el-table-column prop="purchasePrice" label="采购价" width="160">
                              <template slot-scope="scope">
                                             <el-form-item :prop="`${scope.$index}`" :rules="{validator: priceValidator}">
                                                            <el-input placeholder="请输入" maxlength="10" clearable v-model="scope.row.purchasePrice"></el-input>
                                             </el-form-item>
                              </template>
               </el-table-column>
</el-form>

注：
1、model 的值不可少

2、
:prop="`${scope.$index}`"

:rules="{validator: priceValidator}"

这两句不可少

// 价格验证 从不以0开头的整数或以0开头的整数加两位以内小数的位置开始 , 匹配最大13位整数或13位整数加两位以内小数
export const pricePatternSupportZero = /(?!^0*(\.0{1,2})?$)?^\d{1,13}(\.\d{1,2})?$/

// 数字验证 从不以0开头的整数或以0开头的整数加两位以内小数的位置开始 , 匹配最大13位整数或13位整数加两位以内小数
export const pricePatternSupportNegative = /(?!^0*(\.0{1,2})?$)?^\-?\d{1,13}(\.\d{1,2})?$/

// 数量校验
export const qtyPattern = /^[1-9][0-9]{0,5}$/

//数量验证
    skuQtyValidator(rule, value, callback) {
      const skuQty = value.skuQty
      if (
        skuQty === "" ||
        skuQty === null ||
        skuQty === undefined ||
        skuQty === 0
      ) {
        return callback("数量不能为空或零")
      }
      if (!qtyPattern.test(skuQty)) {
        return callback("请输入正确的格式")
      }
      callback()
    },
    //价格验证
    priceValidator(rule, value, callback) {
      const purchasePrice = value.purchasePrice
      if (purchasePrice) {
        if (!pricePatternSupportZero.test(purchasePrice)) {
          return callback("请输入正确的格式")
        }
      }
      callback()
    },

三、给el-data-table添加数据的时候，会发生页面不刷新，改变一下页面大小就刷新了。特别地，给el-data-table设置固定高度height，且有合计行的时候，添加数据，会把合计行给遮盖掉。

解决办法：给el-data-table添加@update方法，每次数据刷新，让height重新赋一个值。（这个方法会报一个错，但是可以解决问题，并不影响运行）

 watch: {
     selectTableData() {
         this.handleTableUpdate()
     }
 },
methods:{
    handleTableUpdate() {
        this.$nextTick(() => {
            this.$refs.dataTable.height = "661px"
        })
    }
}

四、el-table合计（格式化金额千分位以及保留两位小数，过滤不需要统计的行）

//合计
    getSummaries(param) {
      const {columns, data} = param
      //在data数据中没有purchaseAmount字段，且purchaseAmount是通过数量乘上单价得到的，,故该字段无法合计.故须将purchaseAmount加进去,才会对purchaseAmount进行合计
      data.forEach((item) => {
        item["purchaseAmount"] = item.skuQty * item.purchasePrice
      })
      const sums = []
      columns.forEach((column, index) => {
        //当没数据时,返回
        if (index === 0) {
          sums[index] = "合计"
          return
        }
        //过滤掉无需进行合计的行
        if (
          column?.label === "商品编码" ||
          column?.label === "商品名称" ||
          column?.label === "查看" ||
          column?.label === "采购价" ||
          column?.label === "供应商" ||
          column?.label === "要货备注" ||
          column?.label === "操作"
        ) {
          sums[index] = ""
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          const sumsInit = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (column?.label === "要货金额") {
            //千分位以及保留两位小数处理
            let value = sumsInit.toLocaleString()
            if (value.indexOf(".") == -1) {
              value = value + ".00"
            } else if (value.indexOf(".") == value.length - 2) {
              value = value + "0"
            }
            sums[index] = value
          } else {
            sums[index] = sumsInit
          }
        } else {
          sums[index] = ""
        }
      })
      return sums
    },

四、对l两个数组合并，且去重

 let obj = {}
 arr1 = arr1
     .concat(arr2)
     .reduce((cur, next) => {
         obj[next.id] ? "" : (obj[next.id] = true && cur.push(next))
         return cur
     }, [])

五、el-date-picker如何设置默认七天时间

import dayjs from "dayjs"

getDefaultTime() {
    const start = `${dayjs()
        .subtract(7, "day")
        .format("YYYY-MM-DD")} 00:00:00`
    const end = `${dayjs()
        .subtract(1, "day")
        .format("YYYY-MM-DD")} 23:59:59`
    this.salesTime = [start, end]
}

mounted() {
    this.getDefaultTime()
},