通过点击操作列按钮,将表格指定行的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