通过点击操作列按钮,将表格指定行的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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。