共计 2302 个字符,预计需要花费 6 分钟才能阅读完成。
通过点击操作列按钮,将表格指定行的 projectId 和 typeId 传给行将关上的子组件(编辑页面)
呈现的问题如下:
1、通过设置组件中的属性来传递参数没有传过来
2、后端接口返回的工夫是 Number 类型导致报错
3、全局常量引入拿不到对象中的对象
第一个问题解决如下
<form-confirm v-if="isShowDialog" ref="editDialog" :formOptions="formOptions" @refresh = "refresh"></form-confirm> | |
<el-button v-if="scope.row.isConfirm == null" | |
type="text" | |
size="mini" | |
icon="el-icon-edit" | |
@click="confirm(scope.row.projectId,scope.row.confirmType)" | |
> 确认 | |
</el-button> |
在 vue 文件中调用自定义的子组件,
export default { | |
name: 'personalConfirm', | |
components: {formConfirm}, | |
data() { | |
return {formOptions: {}, | |
},created: { }, | |
methods: {confirm(projectId,confirmType) { | |
this.isShowDialog = true | |
console.log(projectId); | |
console.log(confirmType); | |
this.formOptions = { | |
projectId:projectId, | |
confirmType: confirmType, | |
userId: this.user.id | |
} | |
console.log(this.formOptions) | |
this.$nextTick(() =>{this.$refs.editDialog.open(projectId); | |
}) | |
/*console.log(this.formOptions) | |
this.$refs.editDialog.open(projectId);*/ | |
}, | |
} | |
} |
在 js 文件中申明要调用的子组件,通过按钮的 click 事件调用 confirm 办法,刚开始写的办法是被正文了的代码,谬误就在于咱们在 dom 未更新之前就发 formOptions 这个对象传给子组件,所以在 confirm 办法中赋值的代码等于有效,传给子组件的还是定义的空对象。具体解决办法去这位大佬的文章学习 https://segmentfault.com/a/1190000012861862
所以用 nextTick 能够解决
第二个问题解决如下
// 引入 dateformat 工具模块 | |
let dateFormat = require("dateformat"); | |
// 遍历后端返回的对象汇合,拿到每个对象的 applyTs 值去进行工夫转换 | |
this.list.forEach(item => {item.applyTs = dateFormat(new Date(item.applyTs), 'yyyy-mm-dd') | |
}); |
第三个问题解决
如何自定义全局常量?
在 common 文件中创立两个 js 文件
common.js 文件代码如下
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global; | |
/* 该代码目标是检测 lodash 运行环境是否为 node 环境,以此来获取全局变量。剖析下它的代码:typeof global == 'object' && global && global.Object === Object && global; 这个就是当 global 满足前三个条件时,返回该 global 全局变量。*/ | |
// 有 node 环境的判断,相应的就有浏览器环境的判断:var freeSelf = typeof self == 'object' && self && self.Object === Object && self; | |
var Global = freeGlobal || freeSelf || Function('return this')(); | |
/* 该代码失去最终的全局变量。这里的 self 指的是 window.self。MDN:指向以后 window 的一个援用。意思就是 window 啦。var root = freeGlobal || freeSelf || Function('return this')(); | |
这个外面的 Function('return this')()就是一个匿名函数执行,即:(function(){return this})()。返回以后环境的 this 援用 */ | |
export default Global; |
这是 lodash 源码获取运行环境中的全局变量,
constants.js 代码如下:
import Global from './global.js' | |
const Constants = { | |
// 单据状态 | |
projectStatus: { | |
isConfirm: { | |
code: '1', | |
name: '已确认' | |
}, | |
isNotConfirm: { | |
code: '0', | |
name: '未确认' | |
} | |
}, | |
// 确认类别 | |
confirmType: { | |
agentType: { | |
code: '1', | |
name: '动因确认' | |
}, | |
estimateType: { | |
code: '2', | |
name: '估算确认' | |
} | |
} | |
}; | |
Global.Constants = Constants; | |
export default Constants |
首先引入 Global.js 文件,再设置常量 const Constants,之后设置全局变量中的 Global.Constants = Constants
正文完
发表至: javascript
2021-03-24