论坛 › 问题反馈 › 求助：使用element通用组件时请求数据渲染表格，视图不更新

buer 发表于 2023-5-31 19:41:52

求助：使用element通用组件时请求数据渲染表格，视图不更新

按照视频的教程，使用了element中的通用组件，渲染了element官网的Table表格，但是表格中的数据需要请求数据回来渲染，然后我在methods中定义了请求函数，并在created生命周期中调用了函数，成功获取到了数据并且赋值给data中的表格数据，这时候打印表格数据已经变成了请求回来的数据。但是页面的表格没有数据。似乎在请求结束前页面已经完成了渲染。请问需要怎么解决这个问题？
const that = this;
return {
    data: function () {
      return {
            pageTotal: 0,
            pageSize: 15,
            currentPage: 1,
            // 表格数据
            tableData: []
      }
    },
    created: function () {
      this.getList()
    },
    methods: {
      // 获取数据
      getList: function () {
            const action = that.Actions.load("x_prom_asble_surface");
            let data = { "applicationList": ["1111111111"], "relateTask": true }
            console.log("发起请求，入参：", data)
            action.ReviewAction.V2ListPaging(//平台封装好的方法
                this.currentPage, this.pageSize,//uri的参数
                data,//body请求参数
                function (json) { //服务调用成功的回调函数, json为服务传回的数据
                  console.log("接口调用成功，返回值：", json)
                  this.pageTotal = json.count
                  this.tableData = json.data
                  console.log(this.tableData)
                },
                function (json) { //服务调用失败的回调函数, json为服务传回的数据
                  data = json.data; //为变量data赋值
                }
            );
      }
    },
}

论坛管理员 发表于 2023-6-1 10:21:57

麻烦您把完整的表单在应用中心里导出贴上来，管理员这边检查看看

buer 发表于 2023-6-1 15:47:26

论坛管理员 发表于 2023-6-1 10:21
麻烦您把完整的表单在应用中心里导出贴上来，管理员这边检查看看

上面代码的第27行为获取到数据，并且赋值。但是页面并没有更新，数据有了，视图不更新

buer 发表于 2023-6-1 17:17:38

论坛管理员 发表于 2023-6-1 10:21
麻烦您把完整的表单在应用中心里导出贴上来，管理员这边检查看看

{"json":{"id":"68499506-1279-4869-9c2c-a0b87de94cf9","name":"测试使用部件","type":"Form","mode":"PC","description":"","application":"f024496d-b181-47a4-bfc5-38230216fe51","applicationName":"新品开发管理系统","styles":{},"properties":{},"cssLinks":[],"scriptSrc":[],"jsheader":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"beforeLoad":{"code":"","html":""},"beforeModulesLoad":{"code":"","html":""},"afterModulesLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"afterLoad":{"code":"","html":""},"beforeClose":{"code":"","html":""},"help":{"code":"","html":""},"unload":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""},"submit":{"code":"","html":""},"reset":{"code":"","html":""}},"moduleList":{"div":{"id":"div","name":"","type":"Div","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC712ebad1-e6b8-4905-82f7-a9e8425371c7div","moduleName":"div"},"widget":{"id":"widget","name":"","type":"Widget","description":"","events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9widget","widgetType":"select","parameterType":"map","widgetScript":{"code":"","html":""},"parametersScript":{"code":"","html":""},"widgetSelected":"aafd0f1f-5d8e-46da-853e-f30a082807f2","moduleName":"widget","parametersMapList":{"currentMenuName":"iframePage"}},"div_1":{"id":"div_1","name":"","type":"Div","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{"display":"flex","width":"1400px","margin":"0 auto"},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC712ebad1-e6b8-4905-82f7-a9e8425371c7div_1","moduleName":"div"},"div_2":{"id":"div_2","name":"","type":"Div","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{"width":"200px"},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9div_2","moduleName":"div"},"div_3":{"id":"div_3","name":"","type":"Div","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{"flex":"1"},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9div_3","moduleName":"div"},"widget_1":{"id":"widget_1","name":"","type":"Widget","description":"","events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9widget_1","widgetType":"select","parameterType":"map","widgetScript":{"code":"","html":""},"parametersScript":{"code":"","html":""},"widgetAppSelected":"259b3c7e-340a-4bbf-9744-96ac25e41b07","widgetSelected":"04e6a649-eed2-4a8b-b57c-a475d8e5e447","moduleName":"widget"},"el_table_box":{"id":"el_table_box","name":"","type":"Elcommon","description":"","events":{"queryLoad":{"code":"// const that = this;\n// that.pageTotal = 0\n// that.currentPage = 1\n// that.pageSize = 15\n// that.tableData = []\n// // 获取数据\n// function getList() {\n//   const action = that.Actions.load(\"x_processplatform_assemble_surface\");\n//   let data = { \"applicationList\": [\"86e87829-03f4-4e75-9029-d9f413747ce4\"], \"relateTask\": true }\n//   console.log(\"发起请求，入参：\", data)\n//   action.ReviewAction.V2ListPaging(//平台封装好的方法\n//         that.currentPage, that.pageSize,//uri的参数\n//         data,//body请求参数\n//         function (json) { //服务调用成功的回调函数, json为服务传回的数据\n//             console.log(\"接口调用成功，返回值：\", json)\n//             that.pageTotal = json.count\n//             that.tableData = json.data\n//             console.log(that.tableData)\n//         },\n//         function (json) { //服务调用失败的回调函数, json为服务传回的数据\n//             data = json.data; //为变量data赋值\n//         }\n//   );\n// }\n\n// getList()","html":"// const that = this;\n// that.pageTotal = 0\n// that.currentPage = 1\n// that.pageSize = 15\n// that.tableData = []\n// // 获取数据\n// function getList() {\n//   const action = that.Actions.load(\"x_processplatform_assemble_surface\");\n//   let data = { \"applicationList\": [\"86e87829-03f4-4e75-9029-d9f413747ce4\"], \"relateTask\": true }\n//   console.log(\"发起请求，入参：\", data)\n//   action.ReviewAction.V2ListPaging(//平台封装好的方法\n//         that.currentPage, that.pageSize,//uri的参数\n//         data,//body请求参数\n//         function (json) { //服务调用成功的回调函数, json为服务传回的数据\n//             console.log(\"接口调用成功，返回值：\", json)\n//             that.pageTotal = json.count\n//             that.tableData = json.data\n//             console.log(that.tableData)\n//         },\n//         function (json) { //服务调用失败的回调函数, json为服务传回的数据\n//             data = json.data; //为变量data赋值\n//         }\n//   );\n// }\n\n// getList()"},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","tmpElStyles":{},"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9el_table_box","vueApp":{"code":"const that = this;\nreturn {\n    data: function () {\n      return {\n            // pageTotal: that.pageTotal,\n            // pageSize: that.pageSize,\n            // currentPage: that.currentPage,\n            // tableData: that.tableData\n            pageTotal: 0,\n            pageSize: 15,\n            currentPage: 1,\n            tableData: []\n      }\n    },\n    created: function () {\n      this.getList()\n    },\n    methods: {\n      handleSizeChange(val) {\n            console.log(`每页 ${val} 条`);\n            this.pageSize = val\n            this.getList()\n      },\n      handleCurrentChange(val) {\n            console.log(`当前页: ${val}`);\n            this.currentPage = val\n            this.getList()\n      },\n      // 获取数据\n      getList: function () {\n            const action = that.Actions.load(\"x_processplatform_assemble_surface\");\n            let data = { \"applicationList\": [\"86e87829-03f4-4e75-9029-d9f413747ce4\"], \"relateTask\": true }\n            console.log(\"发起请求，入参：\", data)\n            action.ReviewAction.V2ListPaging(//平台封装好的方法\n                this.currentPage, this.pageSize,//uri的参数\n                data,//body请求参数\n                function (json) { //服务调用成功的回调函数, json为服务传回的数据\n                  console.log(\"接口调用成功，返回值：\", json)\n                  this.pageTotal = json.count\n                  this.tableData = json.data\n                  console.log(this.tableData)\n                },\n                function (json) { //服务调用失败的回调函数, json为服务传回的数据\n                  data = json.data; //为变量data赋值\n                }\n            );\n      }\n    },\n}","html":""},"vueCss":{"code":"","html":""},"vueTemplate":"<el-table :data=\"tableData\" style=\"width: 100%\">\n\t<el-table-column prop=\"title\" label=\"标题\">\n\t</el-table-column>\n\t<el-table-column prop=\"processName\" label=\"流程\">\n\t</el-table-column>\n\t<el-table-column prop=\"taskList.activityName\" label=\"环节\">\n\t</el-table-column>\n\t<el-table-column prop=\"creatorPerson\" label=\"拟稿人\">\n\t</el-table-column>\n\t<el-table-column prop=\"creatorUnit\" label=\"拟稿部门\">\n\t</el-table-column>\n\t<el-table-column prop=\"startTime\" label=\"创建时间\">\n\t</el-table-column>\n</el-table>\n<el-pagination @size-change=\"handleSizeChange\" @current-change=\"handleCurrentChange\" :current-page=\"currentPage\"\n\t:page-sizes=\"\" :page-size=\"pageSize\" layout=\"total, sizes, prev, pager, next, jumper\"\n\t:total=\"pageTotal\">\n</el-pagination>","moduleName":"elcommon"},"tab_tab$Content":{"id":"tab_tab$Content","name":"","type":"Tab$Content","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"moduleName":"tab$Content","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Content"},"tab_tab$Content_1":{"id":"tab_tab$Content_1","name":"","type":"Tab$Content","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"moduleName":"tab$Content","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Content_1_1"},"tab_tab$Content_2":{"id":"tab_tab$Content_2","name":"","type":"Tab$Content","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"moduleName":"tab$Content","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Content_2"},"tab_tab$Content_3":{"id":"tab_tab$Content_3","name":"","type":"Tab$Content","description":"","defaultValue":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"moduleName":"tab$Content","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Content_3"},"tab_tab$Page":{"id":"tab_tab$Page","name":"page1","type":"Tab$Page","description":"","width":null,"events":{"queryLoad":{"code":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 999","html":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 999"},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","moduleName":"tab$Page","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Page"},"tab_tab$Page_1":{"id":"tab_tab$Page_1","name":"page2","type":"Tab$Page","description":"","width":"","events":{"queryLoad":{"code":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 888","html":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 888"},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","moduleName":"tab$Page","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Page_1"},"tab_tab$Page_2":{"id":"tab_tab$Page_2","name":"page3","type":"Tab$Page","description":"","width":"","events":{"queryLoad":{"code":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 777","html":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 777"},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","moduleName":"tab$Page","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Page_2"},"tab_tab$Page_3":{"id":"tab_tab$Page_3","name":"page4","type":"Tab$Page","description":"","width":"","events":{"queryLoad":{"code":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 666","html":"var page = this.target; //在组件本身的脚本中获取\npage.node.innerText = 666"},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","moduleName":"tab$Page","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab_tab$Page_3"},"tab":{"id":"tab","name":"","type":"Tab","description":"","events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"tabStyles":{"position":"static","margin-left":"2px","margin-top":"4px","margin-right":"0px","float":"left","height":"25px","cursor":"pointer","min-width":"80px","background":"url(../o2_core/o2/widget/$Tab/default/tabAreaBg.gif) center center","border-top-left-radius":"5px","border-top-right-radius":"5px","border":"1px solid #999","text-align":"center","line-height":"25px"},"tabTextStyles":{"color":"#333333","font-weight":"bold","line-height":"26px","text-align":"center","margin-right":"8px","margin-top":"0px","margin-left":"8px"},"tabCurrentStyles":{"position":"relative","margin-top":"0px","margin-left":"2px","margin-right":"0px","float":"left","height":"30px","min-width":"80px","background":"url(../o2_core/o2/widget/$Tab/default/tabNodeCurrentBg.gif) center center","border-top-left-radius":"5px","border-top-right-radius":"5px","border-top":"1px solid #999","border-left":"1px solid #999","border-right":"1px solid #999","border-bottom":"0px solid #efefef","text-align":"center","line-height":"30px"},"tabTextCurrentStyles":{"color":"#bf6364","font-weight":"bold","line-height":"30px","text-align":"center","margin-right":"8px","margin-left":"8px","margin-top":"2px"},"tabNodeContainer":{"height":"30px","overflow":"hidden","border-bottom":"1px solid #999"},"contentNodeContainer":{"overflow":"hidden","clear":"both","line-height":"normal"},"container":"","recoveryStyles":null,"initialized":"yes","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9tab","isDelay":false,"moduleName":"tab"},"button":{"id":"button","name":"添加","type":"Button","description":"","events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"//可以在脚本中获取该组件\nvar tab = this.form.get(\"tab\").tab; //获取组件对象\nvar pages = tab.pages //获取每个分页\nconsole.log(tab)\nconsole.log(pages)","html":"//可以在脚本中获取该组件\nvar tab = this.form.get(\"tab\").tab; //获取组件对象\nvar pages = tab.pages //获取每个分页\nconsole.log(tab)\nconsole.log(pages)"},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","recoveryStyles":null,"isSaved":true,"pid":"PC68499506-1279-4869-9c2c-a0b87de94cf9button","moduleName":"button"}},"fieldList":{},"css":{"code":""},"pageStyleType":"blue-simple","pid":"PC68499506-1279-4869-9c2c-a0b87de94cf968499506-1279-4869-9c2c-a0b87de94cf9","languageType":"none","languageScript":{"code":"","html":""},"widgetList":["aafd0f1f-5d8e-46da-853e-f30a082807f2","04e6a649-eed2-4a8b-b57c-a475d8e5e447"],"validationOpinion":{},"validationRoute":{},"validationFormCustom":{}},"html":"<div mwftype=\"form\" id=\"68499506-1279-4869-9c2c-a0b87de94cf9\" class=\"css css68499506127948699c2ca0b87de94cf9\" style=\"\"><div mwftype=\"div\" id=\"div\" style=\"\"><div mwftype=\"widget\" id=\"widget_1\" style=\"\"></div></div><div mwftype=\"div\" id=\"div_1\" style=\"\"><div mwftype=\"div\" id=\"div_2\" style=\"\"><div mwftype=\"widget\" id=\"widget\" style=\"\"></div></div><div mwftype=\"div\" id=\"div_3\" style=\"\"><div mwftype=\"elcommon\" id=\"el_table_box\" class=\"o2_vue\" style=\"\"><div class=\"el-table el-table--fit el-table--enable-row-hover\" style=\"\"><div class=\"hidden-columns\" style=\"\"><div style=\"\"></div> <div style=\"\"></div> <div style=\"\"></div> <div style=\"\"></div> <div style=\"\"></div> <div style=\"\"></div></div><div class=\"el-table__header-wrapper\" style=\"\"><table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"el-table__header\" style=\"\"><colgroup style=\"\"><col name=\"el-table_1_column_1\" width=\"196\" style=\"\"><col name=\"el-table_1_column_2\" width=\"196\" style=\"\"><col name=\"el-table_1_column_3\" width=\"196\" style=\"\"><col name=\"el-table_1_column_4\" width=\"196\" style=\"\"><col name=\"el-table_1_column_5\" width=\"196\" style=\"\"><col name=\"el-table_1_column_6\" width=\"196\" style=\"\"><col name=\"gutter\" width=\"0\" style=\"\"></colgroup><thead class=\"has-gutter\" style=\"\"><tr class=\"\" style=\"\"><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_1   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">标题</div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_2   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">流程</div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_3   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">环节</div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_4   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">拟稿人</div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_5   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">拟稿部门</div></th><th colspan=\"1\" rowspan=\"1\" class=\"el-table_1_column_6   is-leaf\" style=\"\"><div class=\"cell\" style=\"\">创建时间</div></th><th class=\"gutter\" style=\"\"></th></tr></thead></table></div><div class=\"el-table__body-wrapper is-scrolling-none\" style=\"\"><table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" class=\"el-table__body\" style=\"\"><colgroup style=\"\"><col name=\"el-table_1_column_1\" width=\"196\" style=\"\"><col name=\"el-table_1_column_2\" width=\"196\" style=\"\"><col name=\"el-table_1_column_3\" width=\"196\" style=\"\"><col name=\"el-table_1_column_4\" width=\"196\" style=\"\"><col name=\"el-table_1_column_5\" width=\"196\" style=\"\"><col name=\"el-table_1_column_6\" width=\"196\" style=\"\"></colgroup><tbody style=\"\"><!----></tbody></table><div class=\"el-table__empty-block\" style=\"\"><span class=\"el-table__empty-text\" style=\"\">暂无数据</span></div><!----></div><!----><!----><!----><!----><div class=\"el-table__column-resize-proxy\" style=\"\"></div></div> <div class=\"el-pagination\" style=\"\"><!----><span class=\"el-pagination__sizes\" style=\"\"><div class=\"el-select el-select--mini\" style=\"\"><!----><div class=\"el-input el-input--mini el-input--suffix\" style=\"\"><!----><input type=\"text\" readonly=\"readonly\" autocomplete=\"off\" placeholder=\"请选择\" class=\"el-input__inner\" style=\"\"><!----><span class=\"el-input__suffix\" style=\"\"><span class=\"el-input__suffix-inner\" style=\"\"><i class=\"el-select__caret el-input__icon el-icon-arrow-up\" style=\"\"></i><!----><!----><!----><!----><!----></span><!----></span><!----><!----></div><div class=\"el-select-dropdown el-popper\" style=\"\"><div class=\"el-scrollbar\" style=\"\"><div class=\"el-select-dropdown__wrap el-scrollbar__wrap\" style=\"\"><ul class=\"el-scrollbar__view el-select-dropdown__list\" style=\"\"><!----><li class=\"el-select-dropdown__item selected\" style=\"\"><span style=\"\">15条/页</span></li><li class=\"el-select-dropdown__item\" style=\"\"><span style=\"\">30条/页</span></li><li class=\"el-select-dropdown__item\" style=\"\"><span style=\"\">50条/页</span></li><li class=\"el-select-dropdown__item\" style=\"\"><span style=\"\">100条/页</span></li></ul></div><div class=\"el-scrollbar__bar is-horizontal\" style=\"\"><div class=\"el-scrollbar__thumb\" style=\"\"></div></div><div class=\"el-scrollbar__bar is-vertical\" style=\"\"><div class=\"el-scrollbar__thumb\" style=\"\"></div></div></div><!----></div></div></span><button type=\"button\" disabled=\"disabled\" class=\"btn-prev\" style=\"\"><i class=\"el-icon el-icon-arrow-left\" style=\"\"></i></button><ul class=\"el-pager\" style=\"\"><!----><!----><!----><!----></ul><button type=\"button\" class=\"btn-next\" style=\"\"><i class=\"el-icon el-icon-arrow-right\" style=\"\"></i></button><span class=\"el-pagination__jump\" style=\"\">前往<div class=\"el-input el-pagination__editor is-in-pagination\" style=\"\"><!----><input type=\"number\" autocomplete=\"off\" min=\"1\" class=\"el-input__inner\" style=\"\"><!----><!----><!----><!----></div>页</span></div></div></div></div><div id=\"tab\" mwftype=\"tab\" style=\"\"><div style=\"\"><div class=\"tabNodeContainerRight\" style=\"\"><div class=\"MWFMenu\" style=\"\"><div id=\"menu\" style=\"\"></div></div></div><div class=\"tabNodeContainerLeft\" style=\"\"><div class=\"tabNodeContainerArea\" style=\"\"><div style=\"\" mwftype=\"tab$Page\" id=\"tab_tab$Page\" title=\"\"><div style=\"\">page1</div></div><div style=\"\" mwftype=\"tab$Page\" id=\"tab_tab$Page_1\"><div style=\"\">page2</div></div><div style=\"\" mwftype=\"tab$Page\" id=\"tab_tab$Page_2\"><div style=\"\">page3</div></div><div style=\"\" mwftype=\"tab$Page\" id=\"tab_tab$Page_3\"><div style=\"\">page4</div></div></div></div></div><div name=\"MWFcontentNodeContainer\" style=\"\"><div style=\"\"><div mwftype=\"tab$Content\" id=\"tab_tab$Content\" style=\"\"></div></div><div style=\"\"><div mwftype=\"tab$Content\" id=\"tab_tab$Content_1\" style=\"\"></div></div><div style=\"\"><div mwftype=\"tab$Content\" id=\"tab_tab$Content_2\" style=\"\"></div></div><div style=\"\"><div mwftype=\"tab$Content\" id=\"tab_tab$Content_3\" style=\"\"></div></div></div></div><div mwftype=\"button\" id=\"button\" style=\"\"><button style=\"\">添加</button></div></div>","id":"","isNewPage":false}

论坛管理员 发表于 2023-6-1 17:18:17

管理员需要具体查看一下设计，但看这段看不出来问题

buer 发表于 2023-6-2 11:16:52

论坛管理员 发表于 2023-6-1 17:18
管理员需要具体查看一下设计，但看这段看不出来问题

我又搞了一个demo，很简单，希望能帮我看一下问题，具体的问题我已经注释在了代码中，求管理员大大解决！
{"json":{"id":"14a553b2-adb3-4442-b20b-9be90195a9c1","name":"新建表单-demo","type":"Form","mode":"PC","description":"","application":"f024496d-b181-47a4-bfc5-38230216fe51","applicationName":"新品开发管理系统","styles":{},"properties":{},"cssLinks":[],"scriptSrc":[],"jsheader":{"code":"","html":""},"events":{"queryLoad":{"code":"","html":""},"beforeLoad":{"code":"","html":""},"beforeModulesLoad":{"code":"","html":""},"afterModulesLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"afterLoad":{"code":"","html":""},"beforeClose":{"code":"","html":""},"help":{"code":"","html":""},"unload":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""},"submit":{"code":"","html":""},"reset":{"code":"","html":""}},"moduleList":{"elcommon":{"id":"elcommon","name":"","type":"Elcommon","description":"","events":{"queryLoad":{"code":"","html":""},"postLoad":{"code":"","html":""},"load":{"code":"","html":""},"click":{"code":"","html":""},"dblclick":{"code":"","html":""},"keydown":{"code":"","html":""},"keypress":{"code":"","html":""},"keyup":{"code":"","html":""},"mousedown":{"code":"","html":""},"mousemove":{"code":"","html":""},"mouseout":{"code":"","html":""},"mouseover":{"code":"","html":""},"mouseup":{"code":"","html":""},"focus":{"code":"","html":""},"blur":{"code":"","html":""}},"properties":{},"class":"","styles":{},"container":"","tmpElStyles":{},"isSaved":true,"pid":"PC14a553b2-adb3-4442-b20b-9be90195a9c1elcommon","vueApp":{"code":"const that = this;\nreturn {\n    data() {\n      return {\n            tableData: [{\n                date: '2016-05-02',\n                name: '王小虎',\n                address: '上海市普陀区金沙江路 1518 弄'\n            }, {\n                date: '2016-05-04',\n                name: '王小虎',\n                address: '上海市普陀区金沙江路 1517 弄'\n            }, {\n                date: '2016-05-01',\n                name: '王小虎',\n                address: '上海市普陀区金沙江路 1519 弄'\n            }, {\n                date: '2016-05-03',\n                name: '王小虎',\n                address: '上海市普陀区金沙江路 1516 弄'\n            }]\n      }\n    },\n    created() {\n      this.getList()\n    },\n    methods: {\n      // 获取数据\n      getList: function () {\n            const action = that.Actions.load(\"x_processplatform_assemble_surface\");\n            let data = { \"applicationList\": [\"86e87829-03f4-4e75-9029-d9f413747ce4\"], \"relateTask\": true }\n            console.log(\"发起请求，入参：\", data)\n            action.ReviewAction.V2ListPaging(//平台封装好的方法\n                1, 10,//uri的参数\n                data,//body请求参数\n                function (json) { //服务调用成功的回调函数, json为服务传回的数据\n                  console.log(\"接口调用成功，返回值：\", json)\n                  // 主要问题在下面两行代码，重新赋值之后，页面数据未更新！！！！！\n                  this.tableData = json.data\n                  console.log(this.tableData)\n                },\n                function (json) { //服务调用失败的回调函数, json为服务传回的数据\n                  data = json.data; //为变量data赋值\n                }\n            );\n      }\n    },\n}","html":""},"vueCss":{"code":"","html":""},"vueTemplate":"<el-table :data=\"tableData\" style=\"width: 100%\">\n\t<el-table-column prop=\"date\" label=\"日期\" width=\"180\">\n\t</el-table-column>\n\t<el-table-column prop=\"name\" label=\"姓名\" width=\"180\">\n\t</el-table-column>\n\t<el-table-column prop=\"address\" label=\"地址\">\n\t</el-table-column>\n</el-table>"}},"fieldList":{},"css":{"code":""},"pageStyleType":"blue-simple","pid":"PC14a553b2-adb3-4442-b20b-9be90195a9c114a553b2-adb3-4442-b20b-9be90195a9c1","languageType":"none","languageScript":{"code":"","html":""},"widgetList":[]},"html":"<div mwftype=\"form\" id=\"14a553b2-adb3-4442-b20b-9be90195a9c1\" class=\"css14a553b2adb34442b20b9be90195a9c1\" style=\"\"><div mwftype=\"elcommon\" id=\"elcommon\" class=\"o2_vue\" style=\"\"></div></div>","id":"","isNewPage":false}

论坛管理员 发表于 2023-6-5 09:56:50

这里加bind(this)，是因为this的指向不对，没取到tableData

buer 发表于 2023-6-5 13:45:58

论坛管理员 发表于 2023-6-5 09:56
这里加bind(this)，是因为this的指向不对，没取到tableData

确实是this的问题，如果不用bind的话使用箭头函数也可以。另外我有另外一个问题：在Vue Template中似乎不能使用template slot-scope="scope"，因为我想通过openProcess拿到那一行的数据。这样写的话页面并没有报错，只是标题那一列显示空白了
<el-table :data="tableData" style="width: 100%">
        <el-table-column sortable label="标题">
                <template slot-scope="scope">
                        <div @click="openProcess(scope.row)">
                                {{ scope.row.title }}
                        </div>
                </template>
        </el-table-column>
        <el-table-column prop="processName" label="流程">
        </el-table-column>
        <el-table-column prop="taskList.activityName" label="环节">
        </el-table-column>
        <el-table-column prop="creatorUnit" label="拟稿部门">
        </el-table-column>
        <el-table-column prop="creatorPerson" label="拟稿人">
        </el-table-column>
</el-table>

论坛管理员 发表于 2023-6-6 09:35:45

参考这个，@row-click去实现open


1 <template>
2   <el-table
3   :data="tableData"
4   stripe
5   @row-click="handdle"
6   style="width: 100%">
7   <el-table-column
8       prop="date"
9       label="日期"
10       width="180">
11   </el-table-column>
12   </el-table>
13 </template>
14
15 <script>
16   export default {
17   data() {
18       return {
19         tableData: []
20       }
21   }，
22   methods: {
23       handle(row, event, column) {
24         console.log(row, event, column)
25      }
26   }
27   }
28 </script>

buer 发表于 2023-6-6 10:11:44

论坛管理员 发表于 2023-6-6 09:35
参考这个，@row-click去实现open




确实可以了，感谢管理大大解决了我的问题

查看完整版本: 求助：使用element通用组件时请求数据渲染表格，视图不更新