1、Element企业快速开发常用

1、提示框（确定，取消）

this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
        })
        .catch(() => {
          return false;
        });

2、提示语

一、第一种

if (res.code === 0) {
          this.$message({
            message: "用户新建成功！",
            type: "success",
          });
        }
        if (res.code && res.code !== 0) {
          this.$message({
            message: "res.message",
            type: "warning",
          });
        }
      });

二、第二种

```js
this.$message.warning('提示危险消息)
```

3、请求后台数据一般模板

this.$http.post(this.$ApiUrl + "User/AddUser", this.form)
       .then(res => {
         if (res.code === 0) {
           this.$message({
             message: '用户新建成功！',
             type: 'success'
           });
         } if (res.code && res.code !== 0) {
           this.$message({
             message: 'res.message',
             type: 'warning'
           });
         }
       })

this.$http({
             method: "post",
             url: this.$ApiUrl + 'Organization/ExportOrganizationList',
             responseType: 'blob'
         }).then(res => {
             let blob = new Blob([res])
             let downloadElement = document.createElement('a')
             let href = window.URL.createObjectURL(blob)
             downloadElement.href = href
             downloadElement.download = '组织结构.xlsx'
             document.body.appendChild(downloadElement)
             downloadElement.click()
             document.body.removeChild(downloadElement)
             window.URL.revokeObjectURL(href)
         })

axios.get('http://127.0.0.1:3000/api/Login', {}).then(res => { })

4、element日期选择器开始时间不得大于结束时间校验：

            // 开始时间，结束时间校验
         pickerOptionsStart: {

             disabledDate: (time) => {

                 if (this.searchForm.end) {

                     // eslint-disable-next-line max-len

                     return time.getTime() > new Date(this.searchForm.end).getTime() || time.getTime() <= new Date(this.searchForm.start).getTime() - 86400000;

                 }

                 return time.getTime() <= new Date(this.searchForm.start).getTime() - 86400000;

             },

         },

         // 结束时间限制
         pickerOptionsEnd: {

             disabledDate: (time) => {

                 if (this.searchForm.start) {

                     return time.getTime() < new Date(this.searchForm.start).getTime();

                 }

                 return time.getTime() <= new Date(this.searchForm.start).getTime() - 86400000;

             },

         },

绑定使用：

:picker-options="pickerOptionsEnd"

5、watch监听

fileList1是data里面的数据

watch: {

    fileList1: {

      deep: true,

      handler (val) {

        console.log("fileList1", val)

      }

    },

    fileList: {

      deep: true,

      handler (val) {

        console.log("fileList", val)

      },
     immediate: true

    },

    form: {

      deep: true,

      handler (val) {

        console.log("watch-form", val)

      }

    },

  }

6、深拷贝，拷贝一份数据

1、简单JS拷贝 深拷贝原因：项目中俩个地方同时指向一个地方（同时使用一份数据），有时候会造成数据丢失混乱等，这时候就需要拷贝一份新数据

// form是一个表单的数据，_formCopy是一份新的数据，操作这份数据不会影响原数据
let _data = JSON.stringify(this.form)
let _formCopy = JSON.parse(_data)
let data = JSON.parse(JSON.stringify(this.form))

2、可以安装 lodash,使用lodash函数

npm install lodash

import { cloneDeep } from 'lodash'

const dataArr = [
  {
    name: '小黄'
  }
]

const tempArr = cloneDeep(dataArr) // [ { name: '小黄' } ]

7、form表单数字校验

只能输入数字或者空（v-model.number不好用的情况下） 缺点：不能输入小数

//html
<el-form-item label="时长(小时）：" prop="totalHours">

            <el-input

              v-model="totalDays"

              placeholder="请输入时长(小时）"

            >

            </el-input>

          </el-form-item>

//js
computed: {

    totalDays: { //请假总时长

      get: function () {

        return Number(this.form.totalHours) / 8 || ""

      },

      set: function (val) {

        this.$set(this.form, "totalHours", Number(val) * 8);

      }

    }
}

8、form表单数字校验，保留小数后2位

一、切割
原文链接：blog.csdn.net/weixin_4256…

//html
<el-form-item label="付款总额（元）：" prop="paymentAmount">

            <el-input

              v-model="form.paymentAmount"

              oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value"

              autocomplete="off"

              placeholder="请输入申请详细描述"

              clearable

            >

            </el-input>

          </el-form-item>

//js
paymentAmount: [

          { required: true, message: '付款总额不能为空！', trigger: 'blur' },

          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的格式,可保留两位小数' }

        ],

二、正则
原文链接：www.jianshu.com/p/75df2814b…
注意：totalHours是字段

// html
<el-form-item label="时长(小时）：" prop="totalHours">

            <el-input

              v-model="form.totalHours"

              placeholder="请输入时长(小时）"

              @input="limitInput($event,'totalHours')"

            >

            </el-input>

          </el-form-item>

注意：name就是要传的字段，this.form[name] = this.form.name

//js
limitInput(value, name) {

      this.form[name] =

        ("" + value) // 第一步：转成字符串

          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉

          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字

          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全

          .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数

    },

9、form表单校验，校验邮箱或者手机号

formRules: {
        account: [
          {
            required: true,
            message: '请输入邮箱或手机号',
            trigger: 'blur'
          },
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*|^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '邮箱或手机号的格式不正确，请仔细核对',
            trigger: 'blur'
          }
        ]
       }

10、el-radio-group修改样式

效果图

代码

• fill -- 填充颜色
• text-color -- 激活时颜色

          <el-radio-group
            v-model="tabPosition"
            fill="#19b48b"
            text-color="#fff"
            @change="radioChange"
          >
            <el-radio-button label="公司名称">公司名称</el-radio-button>
            <el-radio-button label="农场名称">农场名称</el-radio-button>
          </el-radio-group>
          
          
          /* 选项卡选中颜色css */
          .catalogueTitle .el-radio-button__inner {
              background-color: #ececec;
          }
          .catalogueTitle .el-radio-button__inner:hover {
              color: #19b48b;
          }

11、input纯数字校验

oninput="value=value.replace(/[^\d]/g,'')

              // oninput="value=value.replace(/[^\d]/g,'')"
              <el-input
              v-model="formForget.verificationCode"
              prefix-icon="el-icon-key"
              placeholder="请输入验证码"
              style="width: 50%"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>

12、vuex使用

//引入
import { mapState } from 'vuex'

//计算属性使用
    computed: {
        ...mapState(["curUserInfo"]),
    },

13、导出xlsx

说明：xlsx 可以使用模版字符串，动态更改名称

this.$http({
                method: "post",
                url: this.$ApiUrl + 'Organization/ExportOrganizationList',
                responseType: 'blob'
            }).then(res => {
                let blob = new Blob([res])
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob)
                downloadElement.href = href
                downloadElement.download = '组织结构.xlsx'
                document.body.appendChild(downloadElement)
                downloadElement.click()
                document.body.removeChild(downloadElement)
                window.URL.revokeObjectURL(href)
            })

14、新旧密码自定义校验

data() {
    const equalToPassword = (rule, value, callback) => {
        if (this.form.newPassword !== value) {
            callback(new Error("新密码与确认密码不一致，请仔细核对"));
        } else {
            callback();
        }
    };
    return {
        form: {
            oldPassword: "",
            newPassword: "",
            confirmPassword: "",
        },
        formRules: {
            oldPassword: [
                { required: true, message: "请输入旧密码", trigger: "blur" },
                {
                    pattern: /^\w+$/,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "change",
                },
                {
                    min: 6,
                    max: 20,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "blur",
                },
            ],
            newPassword: [
                { required: true, message: "请输入新密码", trigger: "blur" },
                {
                    pattern: /^\w+$/,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "change",
                },
                {
                    min: 6,
                    max: 20,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "blur",
                },
            ],
            confirmPassword: [
                { required: true, message: "请输入确认密码", trigger: "blur" },
                {
                    pattern: /^\w+$/,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "change",
                },
                {
                    min: 6,
                    max: 20,
                    message:
                        "密码只允许字母、数字与下划线的组合，长度为6-20，请仔细核对",
                    trigger: "blur",
                },
                { required: true, validator: equalToPassword, trigger: "blur" },
            ],
        }
    };
},        

15、el-row 或者 第三方组价插件加不上点击事件

解决方法：使用修饰符：native

@click.native="handleTotal"