1.vue中slot-scope
slot-scope="scope"相当于把表单的这一行赋值给scope,然后在后面写的过程中直接用scope调用表单里的内容,常用于对表单的操作。
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"
fixed="right" width="80">
<template slot-scope="scope">
<el-button v-no-more-click size="mini" type="text" icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['purchase:supplier:edit']">修改</el-button>
</template>
</el-table-column>
2.vue中row-click
当表格某一行被点击时会触发该事件,
参数:row, column, event
row-click通常用于处理表格或列表中行的点
击事件。当用户点击表格或列表中的某一行时,row-click事件会
被触发,开发者可以在事件处理函数中编写相应的逻辑来处理这个
点击事件。
<el-row>
<el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="createTime" label="创建时间"></el-table-column>
<el-table-column prop="updateTime" label="更新时间"></el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-row>
@row-click="handleTableRow"
handleTableRow(row,column,event){
this.$router.push(`./info/detail?id=${row.id}`) //路由跳转
}
3.vue中的rules
rules为表单校验,属性有
1.required 如果为true,表示该字段为必填
2.message 当不满足设置的规则时的提示信息
3.trigger 校验的触发方式,change(值改变) / blur (失去焦点)两种,
4.pattern 正则表达式,通过正则验证值
5.min 当值为字符串时,min表示字符串的最小长度,当值为数字时,min表示数字的最小值
6.max 当值为字符串时,max表示字符串的最大长度,当值为数字时,max表示数字的最大值
7.validator 如果配置型的校验规则不满足你的需求,你可以通过自定义函数来完成校验,它是一个函数, 有三个参数 (rule(当前规则),value(当前值),callback(回调函数))
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="流水号" prop="serialNo">
<el-input v-model="form.serialNo" placeholder="-系统自动生成" disabled />
</el-form-item>
<el-form-item label="领料编号" prop="materialRequisitionNo">
<el-input v-model="form.materialRequisitionNo" readonly>
</el-input>
</el-form-item>
</el-form>
rules: {
serialNo: [{
required: true,
message: "流水号不能为空",
trigger: "blur"
}],
materialRequisitionNo: [{
required: true,
message: "领料编号不能为空",
trigger: "blur"
}]
}
4.强制更新数据$forceUpdate
this.$forceUpdate()用来全局强制刷新,性能消耗高
因为数据层次(for循环太多)太多,render函数没有自动更新,需手动强制刷新。
调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。
可以在方法后直接添加this.$forceUpdate。
5.$nextTick
在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的DOM结构的时候,这个操作就需要方法在nextTick()的回调函数中。
在vue生命周期中,如果在created()钩子进行DOM操作,也一定要放在nextTick()的回调函数中。
因为在created()钩子函数中,页面的DOM还未渲染,这时候也没办法操作DOM,所以,此时如果想要操作DOM,必须将操作的代码放在nextTick()的回调函数中。
reset() {
this.form = {
id: null,
title: null,
content: null,
publishDatetime: null,
publisher: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
};
this.resetForm("form");
this.$nextTick(() => {
this.fileList = []
this.showFileList = false
this.$forceUpdate()
this.showFileList = true
})
},
6.setattribute作用
setAttribute这个方法,在JSP对象中的session和request都有这个方法,这个方法作用就是保存数据,然后还可以用getAttribute方法来获取出来。
作用:设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。
参数:name:表示属性名称的字符串; value: 属性的值/新值。
download(){
downloadItem({id:this.id}).then(res =>{
console.log("dddddd", res);
//拼接完成资源路径
var file = "http://localhost:8001/"+res.msg;
console.log(file);
//
const link = document.createElement('a');
link.href = file;
link.setAttribute('download',res.msg);
link.click();
})
}