Vue + ant 小技巧（前端技术面广而复杂，遇到问题后解决方法记录下来，持续更新）

一、Vue时间字符串转换时间格式

后端返回时间是一连串的数字，刚开始以为是时间戳，转换后发现时间不对，才发现只是时间的一串数字20221221203048 ；一脸懵，这怎么转呢，截取字符串好麻烦。

同事出手用正则表达式解决

输入：procTime: "20221122203048-20221221203048"

const time = this.procTime && this.procTime.split('-')
const reg = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
this.dateString = [time[0].replace(reg, '$1-$2-$3 $4:$5:$6'), time[1].replace(reg, '$1-$2-$3 $4:$5:$6')]

输出： 2022-11-22 20:30:48-2022-12-21 20:30:48

二、VUE ant表单自定义验证规则range-picker时间范围大于月

开始时间到结束时间必须大于一个月；自定义验证规则;改变时触发校验

  <a-range-picker
           v-decorator="[item.key,{ rules: [{ required: true, validator: checkTime, trigger: 'change' }] }]"
           format="YYYY-MM-DDHH:mm:ss"
           show-time
           @change="onChange"
           @ok="onOk" />

    // 时间选择
    onChange (value) {
      if (value.length) {
        const diff = value[1].diff(value[0], 'months')
        if (diff === 0) {
          this.isCheck = true
        } else {
          this.isCheck = false
        }
      }
    },
//验证规则
      checkTime: (rule, value, callback) => {
        if (this.isMouth && this.isCheck) {
           return callback(new Error('时间范围需大于月，请重新选择'))
        } else {
          if (value === undefined) {
            return callback(new Error('请选择时间范围'))
          }
          if (value.length < 1) {
            return callback(new Error('请选择时间范围'))
          } else {
            callback()
          }
        }
      },

validator

自定义校验（注意，callback 必须被调用）

function(rule, value, callback)

三、Ant design vue表格已经选择数据不可再选择

Ant design vue中a-table，赋值已经选择的数据，不可再操作;利用getCheckboxProps属性进行实现

<a-table
  ref="table"
  rowKey="id"
  :columns="columns"
  :data-source="data"
  :rowSelection="rowSelection"
>
</a-table>
onSelectChange (selectedRowKeys, selectedRows) {
  this.selectedRowKeys = selectedRowKeys
  this.selectedRows = selectedRows
},

rowSelection() {
  return {
    selectedRowKeys: this.selectedRowKeys2,
    onChange: this.onSelectChange2,
    getCheckboxProps: record => ({
      props: {
        disabled: this.disabled
      }
    })
  }
},

rowSelection

getCheckboxProps

选择框的默认属性配置

Function(record)

四、清空表单

form.resetFields()

五、数组去重

 deweight(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    }

或

this.selectedRowKeys = [...new Set(this.selectedRowKeys)]

或

Array.from(new Set(arr))

或

//indexOf 去重
function resetArr(arr) {
  let res = []
  arr.forEach(item => {
    if (res.indexOf(item) === -1) {
      res.push(item)
    }
  })
  return res
}

// 测试
const arr = [1, 1, 2, 3, 3]
console.log(resetArr(arr)) // [1, 2, 3]

六、用this.$options.data()重置组件data

Object.assign(this.$data, this.$options.data.call(this));

七、&&及||的使用

a() && b();
如果执行a()后返回true，则执行b()并返回b的值；
如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

a() || b() :
如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；
如果执行a()后返回false，则执行b()并返回b()的值；

八、Object.keys、Object.values，Object.Entrie

对象的键Object.keys(对象)

对象的值Object.values(对象)

Entries

九、vue嵌套数据多层级里面的数据不自动更新渲染dom

可以尝试手动调用更新

主要代码:vm.$forceUpdate()

十、正则表达式192.168.x.x

^(192\.)+(168\.)+(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9])\.+(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[0-9])