首页 > 其他分享 >vue项目,在切换分页时,render不重新渲染的问题

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

时间:2024-06-03 18:22:16浏览次数:20  
标签:openFile vue render 渲染 includes permissions data row

在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

相关文章

  • 【计算机毕业设计】ssm722花卉库存管理系统+vue
    如今社会上各行各业,都喜欢用自己行业的专属软件工作,互联网发展到这个时候,人们已经发现离不开了互联网。新技术的产生,往往能解决一些老技术的弊端问题。因为传统花卉库存信息管理难度大,容错率低,管理人员处理数据费工费时,所以专门为解决这个难题开发了一个花卉库存管理系统,可......
  • 【计算机毕业设计】ssm717出租车管理系统的设计与实现+vue
    现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本出租车管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到......
  • 关于vue关闭页面时去除定时器失效问题解决
    1.先去除页面缓存,这个在路由部分 2.    ......
  • element ui+vue快速入门
    ElementUI是一个用于开发Web应用的基于Vue.js的组件库。它提供了丰富的组件和友好的API,帮助开发者快速构建现代Web应用。以下是ElementUI的快速入门指南:安装ElementUI你可以通过npm或yarn安装ElementUI。使用npm安装npminstallelement-ui--save......
  • 「AntV」X6 自定义vue节点(vue3)
    官方文档本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档安装插件@antv/x6-vue-shape添加vue组件既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可<template><div>节点名称</div><div>节点描述</div>......
  • Vue 3 中实现引导页
     Vue 3中实现引导页五秒后自动进入首页,并在进入首页时检查用户ID的逻辑使用组合式API(setup)使用VueRouter进行页面导航在首页组件中检查用户ID如果无用户ID,导航回登录页面1.设置引导页组件<template><transitionname="fade"><divv-if="showSplash">......
  • Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架!
    使用Vite快速搭建脚手架命令行选项直接指定项目名称和想要使用的模板,Vite+Vue项目,运行(推荐使用yarn)#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue#yarnyarncreatevite......
  • Vue3简单项目流程分享——工作室主页
    Vue3简单项目流程分享——工作室主页零、写在最前以下是项目相关的一些链接:源代码GitHub仓库(需要魔法上网):仓库网页示例(需要魔法上网):网页示例UI图(来源@设计师杨贺):MasterGo主页补充:由于时间关系,该网页没有适配手机端,最佳展示效果为网页端1440p宽度。如果你想要运行源代码:......
  • vue3异步组件
    vue2//定义一个异步组件constAsyncComponent=()=>({//需要加载的组件(应该是一个Promise)component:import('./MyComponent.vue'),//加载中应当渲染的组件loading:LoadingComponent,//出错时渲染的组件error:ErrorComponent,//渲染loadin......
  • vue-elementui中el-table跨页选择和v-if导致列错乱/选择框无法显示
    在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id;所以就用到了row-key="id"这个属性;然后我们就需要在el-table-column为type="selection"添加一个属性reserve......