在vue项目过程中,
遇到table切换分页,数据已修改但页面没有渲染的情况。
是因为数据层次太多,没有触发render函数进行自动更新。
需要减少嵌套层级。
九代码:
render: function(h, data) { if (data.row.uploadStatus === 0 && (_this.data_permissions.includes(_this.all_data_permission)) || _this.data_permissions.includes(data.row.ncOrgId)) { return [ <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:look'] } onClick={() => { _this.openFile(data.row) }} > 查看 </el-button>, <el-button type="text" size="small" v-hasPermi={ ['materialPrice:upload'] } onClick={() => { _this.uploadFile(data.row) }} > 上传 </el-button>, <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:download'] } onClick={() => { _this.downloadFiles(data.row) }} > 下载 </el-button> ] } else if (data.row.uploadStatus === 0 && (!_this.data_permissions.includes(_this.data_permissions)) && !_this.data_permissions.includes(data.row.ncOrgId)){ return [ <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:look'] } onClick={() => { _this.openFile(data.row) }} > 查看 </el-button>, <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:upload'] } onClick={() => { _this.uploadFile(data.row) }} > 上传 </el-button>, <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:download'] } onClick={() => { _this.downloadFiles(data.row) }} > 下载 </el-button> ] } else if (data.row.uploadStatus === 1 && (!_this.data_permissions.includes(_this.all_data_permission)) && !_this.data_permissions.includes(data.row.ncOrgId)){ return [ <el-button type="text" size="small" v-hasPermi={ ['materialPrice:look'] } onClick={() => { _this.openFile(data.row) }} > 查看 </el-button>, <el-button type="text" size="small" disabled v-hasPermi={ ['materialPrice:upload'] } onClick={() => { _this.uploadFile(data.row) }} > 上传 </el-button>, <el-button type="text" size="small" v-hasPermi={ ['materialPrice:download'] } onClick={() => { _this.downloadFiles(data.row) }} > 下载 </el-button> ] } else { return [ <el-button type="text" size="small" v-hasPermi={ ['materialPrice:look'] } onClick={() => { _this.openFile(data.row) }} > 查看 </el-button>, <el-button type="text" size="small" v-hasPermi={ ['materialPrice:upload'] } onClick={() => { _this.uploadFile(data.row) }} > 上传 </el-button>, <el-button type="text" size="small" v-hasPermi={ ['materialPrice:download'] } onClick={() => { _this.downloadFiles(data.row) }} > 下载 </el-button> ] } }
修改之后代码:
render: function(h, data) { return [ <el-button type="text" size="small" disabled={data.row.uploadStatus === 0} v-hasPermi={ ['materialPrice:look'] } onClick={() => { _this.openFile(data.row) }} > 查看 </el-button>, <el-button type="text" size="small" disabled={(!_this.data_permissions.includes(_this.all_data_permission)) && !_this.data_permissions.includes(data.row.ncOrgId)} v-hasPermi={ ['materialPrice:upload'] } onClick={() => { _this.uploadFile(data.row) }} > 上传 </el-button>, <el-button type="text" size="small" disabled={data.row.uploadStatus === 0} v-hasPermi={ ['materialPrice:download'] } onClick={() => { _this.downloadFiles(data.row) }} > 下载 </el-button> ] }
如上所示,
将按钮的显示隐藏的判断,放在了按钮上。
可以render可以正常渲染。
标签:openFile,vue,render,渲染,includes,permissions,data,row From: https://www.cnblogs.com/yeziyou/p/18229412