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

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

按照视频的教程，使用了element中的通用组件，渲染了element官网的Table表格，但是表格中的数据需要请求数据回来渲染，然后我在methods中定义了请求函数，并在created生命周期中调用了函数，成功获取到了数据并且赋值给data中的表格数据，这时候打印表格数据已经变成了请求回来的数据。但是页面的表格没有数据。似乎在请求结束前页面已经完成了渲染。请问需要怎么解决这个问题？

[JavaScript] 纯文本查看 复制代码

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
麻烦您把完整的表单在应用中心里导出贴上来，管理员这边检查看看

论坛管理员 · 发表于 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拿到那一行的数据。这样写的话页面并没有报错，只是标题那一列显示空白了

[AppleScript] 纯文本查看 复制代码

<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[0].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通用组件时请求数据渲染表格，视图不更新

本帖子中包含更多资源

发表回复