文章目录
- 1. 【ElementUI】表格设置show-overflow-tooltip，当内容溢出显示弹框的宽度设置。
- 2. 【ElementUI】表格中 show-overflow-tooltip 无数据显示空白弹框。
- 3. 【ElementUI】el-select 下拉框宽度设置（代码结构同上：第2点）。
- 4. 【ElementUI】 select下拉框鼠标悬停溢出部分全部显示。
- 5. 【实用】 动态绑定 class 和 style 形式。
- 6. 【实用】 数组遍历。
- 7. 【实用】 接口 path 和 query 拼接。
- 8. 【实用】 后端接口返回数据中：对象包含数组时。
- 9. 【ElementUI】 表格表头后添加图标及鼠标触碰显示提示框（el-tooltip）。
- 10. 【ElementUI】 表格表头后添加搜索图标及点击可搜索。
- 11. 【ElementUI】 input 和 select框嵌套结构优化。
- 12. 【ElementUI】table的树形数据结构，改变展开箭头所在列（箭头默认在第1列）。
- 13. 【ElementUI】table的树形数据结构，不点小三角 点击行 也可展开。
- 14. 【ElementUI】table的表格中使用el-tooltip，且文字过多侧边需要滑动滚动条。
- 15. 【实用】登录验证码：后端给前端传二进制流验证码图片，前端如何接收
- 16. 【实用】前端给后端接口传参，处理对象中包含数组的格式（两种方式，看后端需要哪种）
- 17. 【实用】文字溢出隐藏并省略号显示
- 18. 【实用】JSON.parse
- 19. 【实用】代码有问题但控制台不报错
- 20. 【实用】正则表达式
- 21. 【ElementUI】MessageBox 弹框提示改变部分字体颜色
- 22. 【ElementUI】Cascader 级联选择器 树形结构字段名与官方默认字段不一致时，如何修改字段名。
- 23. 【ElementUI】 Cascader 级联选择器 展开最后一级无值则不显示最后一栏。
- 24. 【ES6】flat() 和 flatMap() 方法。
- 24. 【JS】JS对象的序列化和反序列化。
- 25. 【ElementUI】带复选框的 el-table 表格，去掉表头的全选框。
- 26. 【ElementUI】带复选框的 el-table 表格，只能单选。
- 27. 【实用】路由跳转 query 传参 传对象丢失字段
- 28. 【实用】路由跳转带参，刷新页面，布尔值强转后恒为 true
- 29. 【ElementUI】el-table 操作列 上移、下移 改变行顺序。
- 30. 【ElementUI】el-table 复选框翻页保持选中。
- 31. 【ElementUI】el-table 表头个性化（插槽）。
- 32. 【实用】img 显示固定部分，超过部分隐藏，缩放分辨率不压缩，不变形。
- 33. 【ElementUI】el-table 点击弹框带入已选数据，实现自动选中
- 34. 【实用】js找出数组对象中重复的数据
- 35. 【ElementUI】el-table 表格中嵌套 输入框、时间选择器
- 36. 【实用】js用Set对象实现对象数组去重
- 37. 【ElementUI】el-input输入时换行，显示时换行
- 37. 【实用】判断两个数组是否相等（有序、无序）
- 38. 【实用】新窗口打开
- 39. 【ElementUI】关于日期选择器的一些
- 40. 【实用】change 事件 新增参数 写法
- 41. 【实用】Echarts 的饼图位置调整
- 42. 【ElementUI】el-input 后置插槽样式 （见图）
- 43. 【实用】验证身份证号并获取 生日及 性别
- 44. 【ElementUI】el-table 表格自定义表头排序
- 45. 【实用】VueDraggable 是否可拖拽控制及 标签的 :title 属性
- 46. 【实用】一个有意思的新写法hhh
- 47. 【实用】父传子 prop 中 一个字段可以接收两种类型
- 48. 【实用】v-bind 绑定一个对象
- 49. 【实用】扩展运算符易遗忘的点。。（对我来说不太常用到）
- 50. 【实用】自定义 CSS 虚线边框的长度和间隔
- 51. 【实用】el-tooltip 常用样式及 自定义content 并可换行
- 52. 【实用】el-autocomplete 自定义远程搜索
- 53. 【实用】el-cascader多选并且第一栏不需要选择复选框
- 54. 【实用】el-row 自适应
👇👇👇
🍅
🍇
🍉
🍏
🍓
🍍
1. 【ElementUI】表格设置show-overflow-tooltip，当内容溢出显示弹框的宽度设置。
🌸tooltip默认全屏显示，设置宽度时，应单独写一个style，否则不会生效
// 代码结构
<el-table>
<el-table-column prop="basic" label="列名" show-overflow-tooltip>
<el-form-item></el-form-item>
</el-table-column>
</el-table>
------------------------------------------------------------------------
// 设置tooltip样式
<style lang="css">
.el-tooltip__popper {
max-width: 40%; // 占整个屏幕的百分比
}
</style>
2. 【ElementUI】表格中 show-overflow-tooltip 无数据显示空白弹框。
<el-table>
<el-table-column prop="basic" label="列名" show-overflow-tooltip>
<el-form-item style="width: 90%"> // 子孩子设置为小于父亲宽度的百分比
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
</el-table-column>
</el-table>
🌸原理： show-overflow-tooltip 是当子内容超出父亲的宽度则显示提示框，为防止没有内容也显示提示框，则将子孩子的宽度设置为
父亲宽度的90%，在没有内容时就不会超出父亲的宽度，就不会显示提示框。
3. 【ElementUI】el-select 下拉框宽度设置（代码结构同上：第2点）。
<style lang="css">
.popper-width {
max-width: 40% !important;
}
</style>
4. 【ElementUI】 select下拉框鼠标悬停溢出部分全部显示。
🌸步骤1: 在el-option属性中添加:title="item.value"
🌸步骤2：样式修改
.el-select-dropdown__item {
width: calc(100% - 10px);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
5. 【实用】 动态绑定 class 和 style 形式。
🌸一般动态绑定的代码结构都是写在表格中，给表格中某一列过滤样式
// 为方便对比查看，统一将动态 class 和 style 写在一个列中。（目前遇到的，可能还有其它情况，待更新······）
<el-table>
<el-table-column prop="state" label="列名">
<template v-slot="{row}">
// 不动态绑定的 style (属性用分号 ; 隔开):
<span style="display: inline-block; margin-right: 15px">{{row.state}}</span>
// 动态绑定的 style (属性用分号 , 隔开):
// 多个属性 及 属性单位
<span :style="{left: left+'px', width: '100%', height: 'calc(100% - 32px)'}">{{row.state}}</span>
<span :style="{marginTop: row.state.length>0 ? '13px':'0px' , width: '410px'}">{{row.state}}</span>
<span :style="[{width: '410%'}, {paddingLeft: !i.isSystem && !i.isTop ? '0px' : '20px'}]">{{row.state}}</span>
// 方法 返回 动态样式
<span :style="stateStyle(row.state)">{{row.state}}</span>
<span :style="{cursor: stateCursor(row.passNumber)}">{{row.state}}</span>
<span :class="row.state !== 0 ? 'red' : ''">{{row.state}}</span>
// 返回一个背景图
<div class="login-container__bg" :style="{ 'background-image': 'url(' + bg + ')' }" /> // 定义变量 bg
// 对象类
<span :class="{'green': row.state !== 0}">{{row.state}}</span>
// 数组类 及 类通过布尔值添加
<span :class="['class1', 'class2', {'active': ifShow}]">{{row.state}}</span>
// 图标类
<i :class="valueClass">{{text}}</i>
// 动态添加类
<div :class="`${isTask === '0' ? 'class1 class2' : 'class1 class2 class3'}`" >
</template>
</el-table-column>
</el-table>
export default {
data () {
return {
haha: '1',
isTask : '0',
ifShow: false,
}
},
methods: {
stateStyle (val) {
},
stateCursor(val){
if(val !== 0){
return 'pointer';
} else {
return ''
}
},
},
iconClass () {
if (this.haha === '1') {
return 'el-icon-warning-outline'
} else if (this.haha === '3') {
return 'el-icon-circle-check';
}
}
}
// 样式
<style lang="scss" scoped>
.red {
}
.class1 {
}
.class2 {
}
.class3 {
}
</style>
6. 【实用】 数组遍历。
7. 【实用】 接口 path 和 query 拼接。
8. 【实用】 后端接口返回数据中：对象包含数组时。
🌸应在前端接口定义时添加以下内容
paramsSerializer: params => { return qs.stringify(params, { indices: false }) //处理对象中包含数组的格式 }
export const interfaceName = params => {
return request({
url: '/api/xxx',
method: 'GET',
params: params,
// 添加这一段
paramsSerializer: params => {
return qs.stringify(params, { indices: false }) //处理对象中包含数组的格式
}
})
}
9. 【ElementUI】 表格表头后添加图标及鼠标触碰显示提示框（el-tooltip）。
// 代码结构
<el-table>
<el-table-column label="按钮" show-overflow-tooltip>
<template slot="header">
<span>按钮 </span>
<el-tooltip effect="light" content="tooltip提示框的内容" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
</el-table-column>
</el-table>
-------------------------------------------------------------------------------------
<style lang="scss" scoped>
.el-icon-question:before {
color: #e6a23c;
}
</style>
10. 【ElementUI】 表格表头后添加搜索图标及点击可搜索。
11. 【ElementUI】 input 和 select框嵌套结构优化。
🌸避免在select选择后就立即刷新列表的问题。
🌸保证在select框选择后，同时input有值才可刷新列表。
<el-input v-model.trim="search.c1" @change="searchAct" suffix-icon="el-icon-search" clearable placeholder="请输入">
<el-select v-model="search.b1" slot="prepend" @change="optionSearch" placeholder="请选择">
<el-option label="全部" value="all"></el-option> // 在将 all 作为 b1 的默认值
<el-option label="选项1" value="item1"></el-option>
<el-option label="选项2" value="item2"></el-option>
<el-option label="选项3" value="item3"></el-option>
</el-select>
</el-input>
data () {
return {
search: {
c1: '',
b1: 'all', // 初始值
},
}
},
methods: {
searchAct () {
this.getList(); // 调用数据列表
},
conditionSearch() {
if (this.search.c1 && this.search.b1) {
this.searchAct();
}
},
}
12. 【ElementUI】table的树形数据结构，改变展开箭头所在列（箭头默认在第1列）。
🌸在需要箭头的列 的前一列添加 type = ""。
// 代码结构
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
// 即：姓名列需要小箭头，那就在日期列添加 type = ""
<el-table-column prop="date" label="日期" type = "" sortable width="180"></el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
<el-table-column prop="address" label="地址" sortable width="180"></el-table-column>
</el-table>
13. 【ElementUI】table的树形数据结构，不点小三角 点击行 也可展开。
🌸添加 row-click 行点击事件@row-click="getOpenDetail"。
// 代码结构
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id" border default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@row-click="getOpenDetail"
>
<el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
<el-table-column prop="address" label="地址" sortable width="180"></el-table-column>
</el-table>
methods: {
// 点击行触发展开事件
getOpenDetail(row, column, event) {
if (event.currentTarget.querySelector(".el-table__expand-icon")) {
event.currentTarget.querySelector(".el-table__expand-icon").click();
}
}
},
14. 【ElementUI】table的表格中使用el-tooltip，且文字过多侧边需要滑动滚动条。
🌸一开始打算使用el-table中的属性show-overflow-tooltip，但问题是 该字段后端返回的数据很长就算是占满整个屏幕也放不完（占满整个屏幕也不现实），且这个属性只有鼠标hover时才会触发显示，就算加上滚动条，鼠标在离开该字段时，tooltip就会消失，鼠标根本不可能触碰到滚动条，于是滚动条也于事无补
🌸于是想到el-tootip标签，完美解决！
// 代码结构
<el-table :data="tableData">
<el-table-column prop="detail" min-width="200" label="表头名称">
<template v-slot="{row}">
<el-tooltip effect="dark" :content="row.detail" placement="top">
<p class="header-ellipsis">{{row.detail}}</p>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<style lang="scss" scoped>
.header-ellipsis { // 超出部分省略号显示
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style lang="css">
.el-tooltip__popper {
max-width: 60%; // 设置 最大 宽度和高度
max-height: 70%;
overflow-y: auto; // 让 tooltip 有自己的滚动条，如果不加，滚动条就在整个表格外部
}
</style>
15. 【实用】登录验证码：后端给前端传二进制流验证码图片，前端如何接收
// 获取图片验证码
export const getImg = (params) => {
return request({
url: '/api/getImg',
method: 'POST',
params: params,
responseType:'arraybuffer', //
})
}
// 方法
getImg() {
getImg()
.then(res => {
this.imgMessage=`data:image/png;base64,${btoa(new Uint8Array(res).reduce((data,byte)=>data+String.fromCharCode(byte),""))}`;
})
.catch(err => {
console.log(err);
})
},
16. 【实用】前端给后端接口传参，处理对象中包含数组的格式（两种方式，看后端需要哪种）
// 方式1：
paramsSerializer: params => {
return encodeURI(qs.stringify(params, { allowDots: true, encode: false }))
}
// 方式2：
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}
17. 【实用】文字溢出隐藏并省略号显示
// CSS样式
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; // 这个要说一下，小程序某些场景内容过多可能会换行，只需要显示一行，不换行并溢出隐藏。
18. 【实用】JSON.parse
🌸 在接收后端返回的json对象通常是一个字符串类型的object，所以一般我们要对这个object进行类型转化后，我们才能使用object里面的数据（例：不可以直接使用map方法）。
- 直接接收到的
- 转换后
JSON.parse(times)
19. 【实用】代码有问题但控制台不报错
🌸 这时候就需要手动查找代码抛出异常
try {
// 疑似问题代码
} catch (e) {
console.log(e); // 打印异常
}
20. 【实用】正则表达式
🌸 字符串是否为纯中文
let str = '纯中文吗';
let rule = /[^\u4e00-\u9fa5]/;
let result = rule.test(str); // 返回布尔值
🌸 字符串是否为纯数字
let num = 123;
let rule = /^\d+$/;
let result = rule.test(num);
🌸 判断是否有小数点
let point = 12.3;
let rule = /[\.]/;
let result = rule.test(point);
🌸 请输入正确的手机号码
else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
callback(new Error('请输入正确的手机号码'));
}
🌸 Elementui 中 <InputNumber 计数器 只允许输入正整数
<el-input-number v-model="unitPrice" :min="1" :max="100000" @keyup.native="unitPriceKeyup" style="width: 70%"></el-input-number>
methods: {
unitPriceKeyup(e) {
e.target.value = e.target.value.replace(/[^\d]/g, '')
},
}
🌸 Elementui 中 <el-Input 只允许输入数字或字母，不允许中文
<el-input @keyup.native="codeKeyup" v-model.trim="minorCategory" placeholder="请输入小类"></el-input>
methods: {
codeKeyup(e) {
e.target.value = e.target.value.replace(/[^\w\.\/]/ig, '')
},
}
21. 【ElementUI】MessageBox 弹框提示改变部分字体颜色
🌸 官方文档属性
🌸 将dangerouslyUseHTMLString设置为true， message 属性就会作为 HTML 片段处理
🌸 页面效果
batchDel(ids) {
let params = {
ids: ids,
}
this.$confirm(`确定要删除本计划下的 <span style='color: red'>${childNumber}</span> 条子计划吗？`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
type: 'warning'
}).then(res => {
batchDel(params)
.then(res => {
this.$message.success("批量删除成功");
this.getListData();
})
.catch(err => {
console.log(err);
})
})
},
22. 【ElementUI】Cascader 级联选择器 树形结构字段名与官方默认字段不一致时，如何修改字段名。
🌸 官方文档
<el-cascader
:options="options"
:props="{label: "name", value: "value", children: "childs", multiple: true, checkStrictly: true }"
clearable>
</el-cascader>
23. 【ElementUI】 Cascader 级联选择器 展开最后一级无值则不显示最后一栏。
🌸 写一个过滤加工树形列表的方法
🌸 树形数据treeList为参数
processingTree(treeList) {
treeList.forEach(item => {
if (item.childs && item.childs.length) {
this.processingTree(item.childs);
} else {
item.childs = null;
}
})
}
24. 【ES6】flat() 和 flatMap() 方法。
🌸 flat()
🌸 1. Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。
[1, 2, [3, 4]].flat();
// [ 1, 2, 3, 4 ]
🌸 2. flat()默认只会 “拉平” 一层， 如果想要 “拉平” 多层的嵌套数组，可以向flat()方法中传入参数，表示想要拉平的层数，默认为1。
[1, 2, [3, [4, 5]]].flat();
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2);
// [1, 2, 3, 4, 5]
🌸 3. 用 Infinity 关键字作为参数时，不管有多少层嵌套，都会转成一维数组。
[1, [2, [3]]].flat(Infinity);
// [1, 2, 3]
🌸 4. 如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat();
// [1, 2, 4, 5]
🌸 flatMap()
🌸 1. flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。
🌸 2. 该方法返回一个新数组，不改变原数组。
🌸 3. 相当于 [[2, 4], [3, 6], [4, 8]].flat()。
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
[2, 3, 4].flatMap((x) => {
console.log('x', x); // 2 3 4
return [x, x * 2]
})
24. 【JS】JS对象的序列化和反序列化。
JS 中通过调用
JSON方法，可以实现对象与字符串之间的互相转换。
🌸 序列化： 将 JS对象 序列化为 字符串。
let string = JSON.stringify(object);
🌸 反序列化： 将 字符串 序列化为 JS对象。
let object = JSON.parse(string);
25. 【ElementUI】带复选框的 el-table 表格，去掉表头的全选框。
<el-table ref="tableList" :data="tableData" header-row-class-name="disabledCheck"></el-table>
::v-deep {
.el-table {
.disabledCheck .el-checkbox__inner {
display: none !important;
}
}
}
26. 【ElementUI】带复选框的 el-table 表格，只能单选。
<el-table ref="tableList" :data="tableData" header-row-class-name="disabledCheck" @select="select"></el-table>
select(selection, row) {
if (selection.length > 1) {
let del_row = selection.shift()
this.$refs.tableList.toggleRowSelection(del_row, false)
}
},
27. 【实用】路由跳转 query 传参 传对象丢失字段
🌸 query传对象：因为本身就是对象，则不需要花括号包裹，否则会报错，且字段丢失 。
28. 【实用】路由跳转带参，刷新页面，布尔值强转后恒为 true
🌸 前提我们知道，路由传参时，一些类型会被转换成字符串，例如: Number、Boolean 等类型都会被转换成 String 。
🌸 所以在接收参数时，需要强转类型 。
🌸 在强转 Boolean 时，遇到问题，就是在刷新页面后，强转后的布尔值恒为 true。于是就不能使用强转 。
// 方法1
使用JSON.parse()方法将字符串的‘false‘和‘true‘转换成布尔值
// 方法2
eval()方法 //作用是去掉参数中最外层引号并执行剩余语句
// 接收 String 类型的参数
typeOf(eval('1+2')) // int
eval('true') // true
29. 【ElementUI】el-table 操作列 上移、下移 改变行顺序。
<el-table-column label="操作" width="180">
<template v-slot="{$index}">
<el-button v-if="$index != 0" @click="upAction($index)" icon="el-icon-top" type="text">上移</el-button>
<el-button v-if="$index != ruleForm.tableData.length - 1" @click="downAction($index)" icon="el-icon-bottom" type="text">下移</el-button>
<el-button @click="delAction($index)" icon="el-icon-close" type="text">删除</el-button>
</template>
</el-table-column>
// 转换顺序
swapItems(arr, index1, index2){
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
// 上移
upAction(index) {
this.tableData = this.swapItems(this.tableData, index, index - 1);
},
// 下移
downAction(index) {
this.tableData = this.swapItems(this.tableData, index, index + 1);
},
// 删除
delAction(index) {
this.tableData.splice(index, 1);
},
30. 【ElementUI】el-table 复选框翻页保持选中。
31. 【ElementUI】el-table 表头个性化（插槽）。
32. 【实用】img 显示固定部分，超过部分隐藏，缩放分辨率不压缩，不变形。
<div class="login-container__bg" :style="{ 'background-image': 'url(' + bg + ')' }" />
// bg 是需要定义的变量
// css
.login-container__bg {
width: 100%;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
33. 【ElementUI】el-table 点击弹框带入已选数据，实现自动选中
props: {
selection: Array, // 带过来的数据
},
data() {
return {
tableData:[],
selectedList: [], // 被选数据
}
},
created() {
this.selectedList = [...this.selection];
this.getList();
},
methods: {
// 自动选中
toggleRowSelection() {
if (this.selectedList.length && this.tableData.length) {
this.$nextTick(()=> {
this.selectedList.forEach(item => {
const row = this.tableData.find(_row => _row.id === item.id);
if (row) {
this.$refs.standardTable.toggleRowSelection(row, true);
}
})
})
}
},
// 获取弹框列表
getList() {
let params = { };
getList(params)
.then(res => {
this.tableData = res.content;
this.toggleRowSelection(); // 调用自动选中的接口
})
.catch(err => {
console.log(err);
})
},
},
34. 【实用】js找出数组对象中重复的数据
35. 【ElementUI】el-table 表格中嵌套 输入框、时间选择器
🌸 要义：el-form 嵌套 el-table 。
36. 【实用】js用Set对象实现对象数组去重
arr = [...new Set(arr.map(item =>
JSON.stringify(item)
))].map(val => JSON.parse(val))
37. 【ElementUI】el-input输入时换行，显示时换行
style="white-space: pre-wrap; line-height:20px;"
37. 【实用】判断两个数组是否相等（有序、无序）
equation 布尔值
// 有序
let equation = JSON.stringify(this.arr1) === JSON.stringify(arr2.flat());
// 无序
let equation = this.arr1.every(item => arr2.includes(item));
38. 【实用】新窗口打开
// 新窗口打开
newPageAction() {
var host = window.location.host;
let newPageUrl ='http://' + host + '/#/spotManage/newTaskPage?taskId=' + EncryptData(this.taskId) + '¤tKey=' + EncryptData(this.currentKey) + '&editType=' + this.editType;
window.open(newPageUrl, "_blank");
},
39. 【ElementUI】关于日期选择器的一些
// 当前年月日
currentDate() {
let date = new Date();
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日';
},
🌸 禁用 当前日期之前或之后 的日期 。
<el-date-picker v-model="date" type="date" format="yyyy-MM-dd" value-format="timestamp" :picker-options="pickerOptions" placeholder="日期"> </el-date-picker>
pickerOptions: {
disabledDate: date => {
// return Date.now() < date.valueOf(); // 禁用当前日期之后的
return Date.now() > date.valueOf(); // 禁用当前日期之前的
}
},
// 月份范围选择限制最大范围为一年
pickerOptions: {
disabledDate: (time) => {
if (this.minDate !== null && this.maxDate === null) {
let minMonth = this.minDate.getMonth(),
lastYear = new Date(this.minDate).setMonth(minMonth - 11),
nextYear = new Date(this.minDate).setMonth(minMonth + 11);
// 只能选 minDate 前后一年的范围
return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
}
return false;
},
onPick: (time) => {
this.minDate = time.minDate;
this.maxDate = time.maxDate;
}
},
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
pickerOptions: {
shortcuts: [{
text: '一年内',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
picker.$emit('pick', [start, end]);
}
}, {
text: '半年内',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 182);
picker.$emit('pick', [start, end]);
}
}, {
text: '三个月内',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
40. 【实用】change 事件 新增参数 写法
41. 【实用】Echarts 的饼图位置调整
42. 【ElementUI】el-input 后置插槽样式 （见图）
43. 【实用】验证身份证号并获取 生日及 性别
rules: {
idCard: {required: false, validator: this.checkIDCard, trigger: 'blur'}, // 身份证号
},
checkIDCard(rule, value, callback) {
if (value) {
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 身份证位数 验证
if (reg.test(value)) {
let coefficient = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
// 除11取余的结果对应的校验位（最后一位）的值
let checkDigitMap = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
var arr = value.split('')
let sum = 0;
for (var i = 0; i < 17; i++){
sum += coefficient[i] * parseInt(arr[i])
}
if(checkDigitMap[sum % 11] !== arr[17] ){
callback(new Error('请输入合法的身份证号！'));
} else {
let time = Date.parse(value.substr(6,4)+'-'+value.substr(10,2)+'-'+value.substr(12,2));//身份证日期时间戳date
this.ruleForm.birthdayStr = time; // 生日时间戳
// 这里需求是 0 男 1 女（实际看怎么定义去赋值男女）
if (value.length === 18) {
value.substring(16, 17) % 2 === 0 ? this.ruleForm.sex = 1 : this.ruleForm.sex = 0;
}
if (value.length === 15) {
sex = value.substring(13, 14) % 2 === 0 ? this.ruleForm.sex = 1 : this.ruleForm.sex = 0;
}
callback();
}
} else {
callback(new Error('请输入合法的身份证号！'));
}
} else {
callback();
}
},
44. 【ElementUI】el-table 表格自定义表头排序
🌸 以下内容只介绍自定义排序 。
<el-table v-if="tableData && tableData.length" :data="tableData" @sort-change="changeSort">
<el-table-column prop="reportName" label="报告名称" sortable="custom" show-overflow-tooltip fixed width="170"></el-table-column>
</el-table>
// 定义筛选条件对象
this.searchData = {
page: 1,
size: pageSize,
blurry: '',
sortBy: '', // 排序名称
sortType: '', // 排序类型
};
// 排序变化
changeSort(column) {
if (column.order == 'ascending') {
this.searchData.sortType = 'DESC';
} else {
this.searchData.sortType = 'ASC';
}
this.searchData.sortBy = column.prop;
this.getListData(); // 刷新列表接口
},
45. 【实用】VueDraggable 是否可拖拽控制及 标签的 :title 属性
46. 【实用】一个有意思的新写法hhh
🌸 我自己习惯写成下面这样 。
<el-dropdown-item command="top">{{ item.isTop ? '取消置顶' : '置顶'}}</el-dropdown-item>
🌸 偶然看到同事这样写~ 区别于我上面写的可以这种少写俩字儿 。
47. 【实用】父传子 prop 中 一个字段可以接收两种类型
48. 【实用】v-bind 绑定一个对象
🌸 用的时候直接拿具体的参数名就行，因为这个对象已经展开了，直接取，不需要data. 。
49. 【实用】扩展运算符易遗忘的点。。（对我来说不太常用到）
在当前页面直接拿来赋值，然后通过组件传入props中，在父组件中取值，需要哪个字段取哪个字段。相当于传入可以一个对象，取值还是单个取。
50. 【实用】自定义 CSS 虚线边框的长度和间隔
🌸 普通 CSS 虚线 。
border: 1px dashed #409EFF;
border-radius: 15px;
🌸 自定义 CSS 虚线边框的长度和间隔的虚线 。
原理：使用线性渐变的图像作为
border-image
border: 1px solid transparent;
border-radius: 15px;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg, #409EFF 0, #409EFF 12px, white 0, white 17px);
51. 【实用】el-tooltip 常用样式及 自定义content 并可换行
<el-tooltip effect="light" placement="top">
<div slot="content">统一管理为按照样品主编号进行领还样、登记；<br />分开管理为按照样品子编号进行领还样、登记</div>
<i class="el-icon-question"></i>
</el-tooltip>
.el-icon-question {
margin-left: 5px;
cursor: pointer;
color: #e6a23c;
}
52. 【实用】el-autocomplete 自定义远程搜索
<j-autocomplete v-model="row.itemName" :fetch-suggestions="fetchSuggestions" @select="(val) => { projectSelect(val, row) }" :maxlength="50" trim popper-class="autocomplete-suggestion" placeholder="请输入检测项目">
<template v-slot="{ item }">
<div style="display: flex; justify-content: space-between;">
<div :title="item.itemName" style="width: 120px;margin-right: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.itemName }}</div>
<div :title="item.inspectionMethod" style="width: 180px; margin-right: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.inspectionMethod }}</div>
<div :title="item.itemNumber" style="width: 130px;margin-right: 10px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.itemNumber }}</div>
<div :title="item.inspectionFee" style="width: 80px;">{{ item.inspectionFee }}</div>
</div>
</template>
</j-autocomplete>
fetchSuggestions(queryString, callback) {
// 掉后端接口 传入当前输入的值 queryString
getProjectByName({ name: queryString })
.then((res) => {
const data = res.map(item => {
this.$set(item, 'value', item.itemName);
return item;
});
data.unshift({
value: '不填报',
inspectionMethod: '',
itemNumber: '',
inspectionFee: undefined
})
// 调用 callback 返回建议列表的数据
callback(data);
})
.catch(() => {
callback([]);
})
},
53. 【实用】el-cascader多选并且第一栏不需要选择复选框
<el-cascader
v-model="ruleForm.minorItemList"
:options="categoryList"
:props="{ children: 'children', multiple: true, emitPath: false }"
:show-all-levels="true"
popper-class="minor-select"
clearable
placeholder="请选择项目类别"
>
</el-cascader>
<style lang="scss">
.minor-select {
.el-cascader-menu:nth-child(1) {
.el-checkbox {
display: none !important;
}
}
}
</style>
54. 【实用】el-row 自适应
<el-row :gutter="20" type="flex">
<el-col :span="16">
<el-form-item label="参数名称" prop="paramName">
<j-input v-model="form.paramName" size="medium" trim :maxlength="50" placeholder="请输入参数名称" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="参数名称" prop="paramName">
<j-input v-model="form.paramName" size="medium" trim :maxlength="50" placeholder="请输入参数名称" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="参数名称" prop="paramName">
<j-input v-model="form.paramName" size="medium" trim :maxlength="50" placeholder="请输入参数名称" />
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="参数名称" prop="paramName">
<j-input v-model="form.paramName" size="medium" trim :maxlength="50" placeholder="请输入参数名称" />
</el-form-item>
</el-col>
</el-row>
<style lang="scss" scoped>
::v-deep.el-row {
flex-wrap: wrap;
}
</style>
🌸
希望这篇文章对你有帮助！😁🌹🌹🌹
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
