问题导入：在使用
el-form过程中，尤其是表单验证这一块，官方提供的reserFields方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。
1: el-form 中使用 v-model="ruleForm" 代替了 :model="ruleForm" ，正确的应为后者。
2: el-form-item 中的 prop 属性设置错误，官网给出了解释。即 prop=a , v-model=Form.a ，Js 中表单数据字段 Form:{ a:'', b: [] } ，需要一一对应，不能出现差错。
3: <el-button @click="resetForm('ruleForm')">重置</el-button> resetForm(formName) 的参数一定要和 el-form 中 ref ="formName" 一致。
vue elementui 同一页面多次引用同一组件 (导致 组件只显示一个，且数据覆盖)
需求是在同一页面 有两个表格都带有分页功能，于是选择了将分页抽取成组件，一个页面调了两次组件；
需要往子组件里传不同的接口路径，在子组件里去写方法请求，将返回结果传给父组件，父组件拿到结果赋给表格 data 值，显示列表数据；
axios 设置 instance.defaults.responseType = 'blob’请求下载导出一个文件，请求成功时返回的是一个流形式的文件，正常导出文件。但是请求失败的时候后端返回的是 json ，不会处理错误信息，而是直接导出包含错误信息的文件。这样拿到 data 中的数据就只有 size type 类型
这种情况，通常在封装的 axios 中我们都是以后端返回的 code 值进行判断，因此就没有办法获取到后端返回的错误信息进行提示；
因此我们有俩个思路
要不给后端传 instance.defaults.responseType = 'json’格式 然后请求成功之后将 json 格式转化成 blob 在进行导出
要不就是给后端传 instance.defaults.responseType = 'blob’请求失败之后讲 blob 转化成 json 格式，
持续更新中
只需要对 input 框添加 text-align: right; 这个 CSS 属性
export const REG = { | |
NUMBER: /^[0-9]*$/, | |
POSITIVE_NUMBER: /^[1-9]\d*$/, | |
PHONE: /^1[3|4|5|7|8][0-9]{9}$/ | |
} | |
diningAmount: [ | |
{ pattern: REG.NUMBER, message: '请输入数字', trigger: ['blur','change']} | |
], |
contactWay: [ | |
{ min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" }, | |
{ pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号码" } | |
], |
JS 中树结构一般是类似于这样的结构：
let tree = [ | |
{ | |
id: '1', | |
title: '节点1', | |
children: [ | |
{ | |
id: '1-1', | |
title: '节点1-1' | |
}, | |
{ | |
id: '1-2', | |
title: '节点1-2' | |
} | |
] | |
}, | |
{ | |
id: '2', | |
title: '节点2', | |
children: [ | |
{ | |
id: '2-1', | |
title: '节点2-1' | |
} | |
] | |
} | |
] |
为了更通用，可以用存储了树根节点的列表表示一个树形结构，每个节点的 children 属性（如果有）是一颗子树，如果没有 children 属性或者 children 长度为 0，则表示该节点为叶子节点。
box-shadow 方式
::-webkit-scrollbar { | |
width: 8px; | |
height: 6px; | |
} | |
::-webkit-scrollbar-thumb { | |
border: 1px solid rgb(0 0 0 / 0%); | |
border-radius: 10px; | |
box-shadow: 6px 0 0 #e3e3e3 inset; | |
} | |
::-webkit-scrollbar-thumb:hover { | |
box-shadow: 6px 0 0 #e3e3e3 inset; | |
} |
::-webkit-scrollbar { | |
width: 6px; | |
height: 6px; | |
} | |
::-webkit-scrollbar-track { | |
background: none; | |
/* background: rgb(239, 239, 239); */ | |
} | |
::-webkit-scrollbar-thumb { | |
background: #999999; /* #bfbfbf */ | |
border-radius: 10px; | |
} |
/* 全局滚动条样式 */ | |
::-webkit-scrollbar { | |
width: 5px; | |
height: 14px; | |
} | |
::-webkit-scrollbar-thumb { | |
/* background-color: #01c8dc; | |
border-radius: 3px; */ | |
background-color: #b6b6b6; | |
} | |
/* 全局滚动条样式结束 */ |
很多人都知道，使用 css 的::-webkit-scrollbar 可以定义浏览器滚动条的样式，但是这种方法在火狐浏览器下是无效的。
实际上火狐浏览器提供了两个独有的属性来定义滚动条样式，只有两个，总比没有强吧！
