1. JS删除对象中某一个字段的方法实现
let item = {
name:'xxx',
age:'18',
gender:'男'
};
//会直接改变对象
delete item.name;
2. 右键弹出框的实现
<!--右键弹出-->
<el-card class="box-card" ref="card" v-show="menuVisible">
<div style="cursor:pointer;" @click="" v-show="secondLevel"><i class="el-icon-circle-plus-outline"></i>新增</div>
<div style="cursor:pointer;" @click="" v-show="thirdLevel"><i class="el-icon-circle-plus-outline"></i>编辑</div>
</el-card>
//右键触发
rightClick(MouseEvent, object, Node, element) {
this.currentData = object;
this.currentNode = Node;
if (Node.level ===2) {
this.secondLevel =true;
this.thirdLevel = false;
this.menuVisible =true; //显示增删改的div
} else if(Node.level ===3){
this.secondLevel =false;
this.thirdLevel = true;
this.menuVisible =true; //显示增删改的div
}
}else {
this.secondLevel =false;
this.thirdLevel = false;
this.menuVisible = false;
}
document.addEventListener('click', this.foo);
this.$refs.card.$el.style.left = MouseEvent.clientX -180 +'px';
this.$refs.card.$el.style.top =MouseEvent.clientY -50 +'px';
},
foo () {
this.menuVisible =false;
document.removeEventListener('click',this.foo);
},
3. 级联选择框的实现
<el-cascader
clearable
v-model="value"
:options="treeData"
:show-all-levels="false"
:props="defaultProps">
</el-cascader>
4. 时间戳的转换
解决如下报错
java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss
前端传值 转换为固定格式。 注意格式的大小写。
import moment from "moment"
newTime = moment(time).format("yyyy-MM-DD HH:mm:ss");
//java 字段串转换为timestamp类型。 postgresql做sql查询不支持字符串时间。
Timestamp.valueOf(Date);
5. 表格内容正常换行 样式
.el-table .cell {
white-space: pre-wrap !important;
}
6. VUE引入三方icon图标
https://blog.csdn.net/qq_41319058/article/details/107117340
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
7. 表格组件内文字实现跳转功能
<el-table-column prop="col" label="列名" min-width="25%" sortable>
<template slot-scope="scope">
<a :href="scope.row.urlLink">
{{scope.row.col}}
</a>
</template>
</el-table-column>
补充:target=_blank 这个属性表示,在新的窗口打开超链接!通过这个属性我们可以更方便的查看各种跳转页面。不会因为之前页面被覆盖而烦恼。
8.关于vue中elementui时间组件开始时间和结束时间的限制问题
<template>
<div>
<div>
开始时间:
<el-date-picker
v-model="startTime"
type="date"
placeholder="开始日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsStart"
style="width:14%">
</el-date-picker>
</div>
<div>
结束时间:
<el-date-picker
v-model="endTime"
type="date"
placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsEnd"
style="width:14%;margin-top:20px;">
</el-date-picker>
</div>
</div>
</template>
<script>
export default {
data(){
return {
startTime: '',
endTime: '',
pickerOptionsStart: {
disabledDate: time => {
if (this.endTime) {
return time.getTime() > new Date(this.endTime).getTime()
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
if (this.startTime) {
return time.getTime() < new Date(this.startTime).getTime() - 86400000
}
}
}
}
}
}
9. Vue 输入框做合法性校验
//这个事件在用户输入时触发的
//v-model 就是你绑定的变量,输入的值会存储在这个变量当中
<input type="text" placeholder="文本框默认值" v-model="inputVal" v-on:input="search" value="" />
判断实例:
if ((!reg.test(value)) && value != '') {
callback(new Error('请输入正确的IP地址'));
} else {
callback();
}
10. JS判断字符串包含问题
string.includes(word);
11.根据数据长度自动生成对应可视化表格,并添加对应跳转链接
<div id="app">
<div v-for="(item, index) in dataList" :key="index">
<div class="main" style="width: 50%; height: 400px;">
{{item}}
</div>
</div>
</div>
init(){
#获取页面元素
var chartDom = document.getElementsByClassName('main');
if(chartDom){
#遍历渲染
for (var i = 0; i < chartDom.length; i++) {
var myChart = echarts.init(chartDom[i]);
var option;
option = {
title: {
text: this.dataList[i].value,
subtext: '饼图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
#饼图各个分区颜色
color:['green','yellow','red'],
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: this.dataList[i].value1, name: 'xxx', url:this.dataList[i].url1 },
{ value: this.dataList[i].value2, name: 'xxx', url:this.dataList[i].url2 },
{ value: this.dataList[i].value3, name: 'xxx', url:this.dataList[i].url3},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
},
},
],
};
option && myChart.setOption(option);
//跳转函数
myChart.on('click', function (param) {
window.location.href = param.data.url;
});
}
}
},
注意:
setTimeout(() =>
this.init(), 50
);
13. 判断字符串是否为超链接
var regex = /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/;
使用示例:
<a :href="props.row.col target=_blank v-if="isUrl(props.row.col)">{{props.row.col}}</a>
<p v-if="!isUrl(props.row.col)">{{props.row.col}}</p>
isUrl: function(txt){
var reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ig;
var flag = reg.test(txt);
return flag;
}
14. 表格文字的展开与收起功能
表格部分:
<el-table-column prop="input" label="输入" min-width="15%" sortable>
<template slot-scope="scope">
<span v-show="scope.row.input && scope.row.input.length>10">{{scope.row.input | filtersContent(scope.$index+(pageId-1)*pageSize, orginlist)}}</span>
<span v-show="scope.row.input && scope.row.input.length<10">{{scope.row.input}}</span>
<span style="color:#0092ff" @click="changeOrginlist(scope.$index+(pageId-1)*pageSize)" v-show="scope.row.input && scope.row.input.length>10"> {{orginlist[scope.$index+(pageId-1)*pageSize]}}</span>
</template>
</el-table-column>
数据部分:
for(let i=0;i<this.total;i++) {
this.orginlist.push('展开');
}
JS部分:
//过滤器
filters:{
filtersContent(val, index, orginlist) {
if(val && orginlist[index]==='展开') {
return val.substring(0,9)+' ... ';
} else {
return val;
}
}
},
changeOrginlist(index) {
//替换值
if(this.orginlist[index]==='展开') {
this.orginlist.splice(index,1,'收起');
} else {
this.orginlist.splice(index,1,'展开');
}
},
15. 富文本编辑及文本内容展示
导入
import EditorBar from './Editor';
components: { EditorBar },
编辑框
<div>
<editor-bar v-model="xxx" :isClear="this.isClear"></editor-bar>
</div>
前端展示
<div v-html="xxx"></div>
表格条目多选 并只选定其中的id值
handleSelectionChange(val) {
// this.multipleSelection = val;
this.multipleSelection = []
val.forEach(item => {
const id = item.id
this.multipleSelection.push(id)
})
}
- js实现多种分隔符的分割
var xxx = xxxS.split(/[;,,;]/) #按照中英文封号 逗号分割
- 在Vue中使用echarts: https://www.jianshu.com/p/cf0a54374419
- element树形控件: https://element.eleme.cn/#/zh-CN/component/tree