el-dialog中加入 :close-on-click-modal="false" 可以让点击空白不取消
search(){
var count = 0;
for (var i = 0; i < this.ScoreInfo.length; i++) {
// 限制input框中不能输入数字,不能放在循环后,原因为代码执行顺序问题
this.ScoreInfo[i].deductPoints = this.ScoreInfo[i].deductPoints.replace(/[^\d]/g,'');
// 这里将数组中的字符串转换为数字,乘以1就可以
count = count + this.ScoreInfo[i].deductPoints * 1
}
this.form.fraction = count;
},
vue下拉框中clearable 属性 方法点击
select定义:@clear="getlineFourth1"
方法
getlineFourth1() {
getJobTrend().then(response => {
this.showChart4(response, new Date().getFullYear());
});
},
下拉框中点击事件
方法中传绑定的值
@change="cilickFL"
<el-option
v-for="item in classifyList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
在下面方法中写就可以接到
vue el-dialog 设置点击旁边不关闭,监听x号的方法
<el-dialog :before-close="handleDialogClose">
</el-dialog>
methods: {
/**
* 点击 X 关闭对话框的回调
**/
handleDialogClose() {
}
}
不允许点外面关闭弹框
第一种:(单个设置)
在el-dialog标签中添加:close-on-click-modal="false"即可
<el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
弹窗内容
</el-dialog>
第二种:(全局设置)
在mian.js里面引入并设置:
import ElementUI from 'element-ui';
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false
treeselect树中的点击事件
<treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" @select="workInfo"
style="width: 220px" placeholder="选择上级部门"/>
val中就是树里面的所有值
// 部门树点击事件
workInfo(val) {
var params = {
deptId: val.deptId
}
getOutletsByDeptId(params).then(response => {
this.workInforList = response.data
this.form.outletsId = null;
});
},
设置输入框中只能输入数字,不能输入其他
这里需要使用oninput
oninput = "this.value=this.value.replace(/[^\d]/g,'')"
table列表中需要判断只能输数字的,用于父子表单的
oninput="value=value.replace(/[^0-9.]/g, '')"
table列表中加入这个 设置宽度可以将文字进行缩略显示,鼠标放上去显示全文字
<el-table-column label="名称" align="left" prop="name" width="400" :show-overflow-tooltip="true"/>
vue常用的规则校验
vue常用校验规则_不丸子的博客-CSDN博客_vue 校验
记录一个vue前台项目启动报的奇葩错误
原因 缺少这几个文件
记录时间插件 后一个时间不能大于前一个时间的方法
在开始时间中定义一个方法,结束时间中全局加一个变量
<el-form-item label="服务开始时间" prop="serveStartTime">
<el-date-picker clearable size="small"
v-model="form.serveStartTime"
type="date"
@change="dateServiceChange()"
value-format="yyyy-MM-dd"
placeholder="选择服务开始时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="服务结束时间" prop="serveEndTime">
<el-date-picker clearable size="small"
v-model="form.serveEndTime"
type="date"
value-format="yyyy-MM-dd"
:picker-options="ServiceOptions"
placeholder="选择服务结束时间">
</el-date-picker>
</el-form-item>
ServiceOptions:{},
方法:
dateServiceChange() {
let _this = this; // this赋值给_this
this.ServiceOptions={ //日期禁用 全局变量
disabledDate(date) {
return date.getTime() < new Date(_this.form.serveStartTime).getTime() - 86400000; // 开始时间
}
}
if(this.form.serveEndTime){
let serveStartTimeText = new Date(this.form.serveStartTime).getTime(); // serveStartTimeText
let serveEndTimeText = new Date(this.form.serveEndTime).getTime();// 结束时间赋值给serveEndTimeText
if(serveStartTimeText > serveEndTimeText){ // 俩个进行比较
this.form.serveEndTime='';
}
}
},
记录el-tabs切换不回到第一个标签页的问题
定义一个 v-model="activeName"
在data中进行声明 activeName: 'first',
在关闭的方法中进行定义
handleDialogClose() {
this.activeName = 'first';
this.dialogVisible = false
},
记录el-tabs将其中的el-tab-pane禁用
将需要禁用的选项卡加一个:disabled="tabOne"
data中声明一下tabOne:false,
在tabs的点击方法中判断一下
handleClick() {
if (this.recordStatus == "1") {
this.tabOne = true
}
},
记录多个list数组嵌套取其中的值
我的list
itemList中的tbPatrolItemList下的tbPatrolItemsStockList中的model
展示数据的地方
<el-table-column label="故障设备名称" align="center" prop="name">
<template slot-scope="scope">
<span >({{getPaterolModel(scope.row.tbPatrolItemsStockList)}}) -- {{getPaterol(scope.row.tbPatrolItemsStockList)}} </span>
</template>
</el-table-column>
方法:
getPaterolModel(row) {
var idc = '';
if (row){
for (var i = 0; i < row.length; i++) {
idc += row[i].model
}
}
return idc;
},