vue项目，在切换分页时，render不重新渲染的问题

在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可以正常渲染。