element常用知识点记录

Enidchan_

已于 2022-04-07 17:03:03 修改

阅读量324

点赞数

分类专栏： element 文章标签： vue

于 2020-08-25 15:46:38 首次发布

本文链接：https://blog.csdn.net/EnidChann/article/details/108222694

版权

element 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

el-table序号翻页递增

<el-table-column align="center"
                 type="index"
                 label="序号"
                 :index="(pageNum-1)*pageSize + 1"
                 width="80">
</el-table-column>

2.解决如下图多次点击$message反复出现的问题
在这里插入图片描述

// 处理弹框反复出现
  if (document.getElementsByClassName('el-message').length > 0) {
    this.$message.closeAll()
  }

3.表单自定义验证

export default {
  data () {
    // 在这里声明自定义校验规则
    let validEndDay = (rule, value, callback) => {
      if (value.length === 0) callback(new Error('不能为空'))
      let checkTimeFlag = true
      if (this.endMonNum < this.startMonNum) checkTimeFlag = false
      if (!checkTimeFlag) callback(new Error('同步截止时间必须大于数据同步时间'))
      callback() // 注意这里不要遗漏
    }
   return {
      form: {
        templateId: '',
        frequency: '',
        startDay: '', // 文本展示
        endDay: '' // 文本展示
      },
      rules: {
        templateId: [{ required: true, message: '不能为空', trigger: ['change','submit'] }],
        frequency: [{ required: true, message: '不能为空', trigger: ['change','blur'] }],
        startDay: [{ required: true, message: '不能为空', trigger: ['change'] }],
        endDay: [{ required: true, validator: validEndDay, trigger: ['change'] }]
      }
    }
  },
	methods:{
		handleSubmit () {
	      this.$refs['form'].validate(valid => {
	        if (valid) {
	          // 验证通过, 调接口进行相关操作
	        } else {
	          return false
	        }
	      })
	    }
	}