首页 > 其他分享 >小记Vue动态修改表头的方法

小记Vue动态修改表头的方法

时间:2022-12-26 18:23:49浏览次数:39  
标签:Vue 表头 列表 修改 方法 小记

背景:

列表A:初始列名称列表

对象B:{

      name1:newName1;

      name2:newName2

    }

对象B记录了一部分需要修改的列名称。

根据列表A使用v-for动态渲染出列名,根据需要修改某一列名字。因为修改了列名称后,请求的数据字段也会修改,如果表头不变化,那么数据不能渲染。

 

解决方法:

column标签的

:prop属性 和 :label属性

绑定方法,方法逻辑为:到列表B中选如果修改列命中存在已经修改过的值,那么返回新值,如下图的getLabel()方法。

 

 

标签:Vue,表头,列表,修改,方法,小记
From: https://www.cnblogs.com/Timeouting-Study/p/17006379.html

相关文章

  • 记录--vue.config.js 的完整配置(超详细)!
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前段时间,对部门的个别项目进行Vue3.0+ts框架的迁移,刚开始研究的时候也是踩坑特别多,尤其我们的项目还有些......
  • Vue2.00.WebPack
    本次系统学习以黑码教程为主,后期随笔中不特殊说明均为黑马教程内容01.对webpack的了解a.webpack是前端项目工程化的具体解决方案;b.主要功能:1.提......
  • VueX基础篇
    1.VueX是什么:“Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。”......
  • delphi cxgrid +toolBar做一个紧贴表头的条件搜索框
    效果图: typeTFrame2=class(TFrame)Panel1:TPanel;TV:TcxGridDBTableView;cxGrid1Level1:TcxGridLevel;cxGrid1:TcxGrid;TVColumn......
  • 创业周年记:召唤神龙一周年小记
    2018年8月8日,我决定离开腾讯的光环,辞职开始创业。《​​回顾4180天在腾讯使用C#的历程,开启新的征途​​》记录了我所说的拥有七龙珠,去召唤神龙,今天正好历时一年时间,非常有必......
  • 关于优化前端vue项目的思考
    背景:前端项目 125M启动时间5-10分钟F12会出现崩溃原因:打包出来的css样式文件体积过大解决办法:1.启动太久,将vue-cli升级到版本5,能优化不少的时间2.vue.conf......
  • vue 多项目nginx部署---二级目录
    vue多项目部署---二级目录新项目:同一域名下部署多个vue项目,根目录vue项目不需要按下面的方式进行打包部署https://www.bitedit.com/下面三个项目以二级目录部署htt......
  • Flask+Vue 用户登录
    后端开发环境Flask2.2.2Flask-Cors3.0.10Flask-HTTPAuth4.5.0Flask-RESTful0.3.9itsdangerous2.0.1代码目录结构D:.│......
  • el-radio-group初始化默认值后点击无法切换问题/vue中设置表单对象属性页面不同步问题
     <el-radio-groupv-model="ruleForm.type"><el-radio:label="1">方案一</el-radio><el-radio:label="2">方案二</el-radio></el-radio-group>原初始......
  • 快速创建Vue项目
    step1:初始化项目vueinitwebpackteststep2:安装[email protected]注意:需要进入项目目录;安装router的版本......