在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