首页 > 其他分享 >vue选择性显示表格列

vue选择性显示表格列

时间:2024-01-19 18:34:51浏览次数:28  
标签:显示 vue 表格 show 选择性 true 选框

实现结果:

打印的时候想要选择打印哪些列,可以添加一个选择列功能,选择的列就展示,不选择的不展示

实现过程

只需要在列上加个显示标识属性show,为true表示显示,为false表示不显示

表格组件绑定列时过滤出show为true的

同时循环表格列,绑定到多选框上,这样多选框不勾选列时,表格中该列就不会显示

 

标签:显示,vue,表格,show,选择性,true,选框
From: https://www.cnblogs.com/xiaoxubucuo/p/17975333

相关文章

  • vue3 之 问题总结(一)
    Vue3官网:https://cn.vuejs.org/guide/introduction.html一、为什么要使用ref?使用ref来创建响应式数据,当你在模板中使用了一个ref,然后改变了这个ref的值时,Vue会自动检测到这个变化,并且相应地更新DOM。在标准的JavaScript中,检测普通变量的访问或修改是行......
  • Vue - 组件通信(父子单向传递、父子相互传递、祖孙隔代传递)
    父组件向子组件单向传递父组件:引入子组件后,通过属性绑定的形式,将值传入子组件;``子组件:子组件通过props接收父组件传入的值;`{{sonGetParam}}`子组件向父组件单向传递父组件:引入子组件后,自定义一个用来处理自定义事件的方法,接收子组件传递的值;``子......
  • vue validator 扩展
    ElementUIForm1.问题:有个表单里面是表格,可以提交多行数据,每一行都有计划数ItemCount需要校验,校验标准是与同一行的另一个输入框Inventory的值比较,如果ItemCount>Inventory就要有tip提示,不能用弹出框参考官网的例子密码的二次验证,但我这里又不同,我是有多行验证的,我需要传参......
  • excel宏-表格通过图片的网络路径下载展示图片
    1、原理通过图片的网络路径,将图片下载到本地,excel读取本地路径,显示图片。注意:下载的图片路径改变将无法展示2、准备2.1、excel版本MS_Office_20162.2、excel开启宏选项-》信任中心-》信任中心设置-》宏设置-》启用所有宏2.3、另存为宏文件表格数据另存为宏文件......
  • 第32节: Vue3 方法处理程序
    在UniApp中使用Vue3框架时,你可以使用方法处理程序来定义在模板中调用的自定义函数。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用方法处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view><......
  • 第31节: Vue3 内联处理程序
    在UniApp中使用Vue3框架时,你可以使用内联处理程序来直接在模板中编写JavaScript代码。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用内联处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view>......
  • 第30节: Vue3 监听事件
    在UniApp中使用Vue3框架时,你可以使用监听事件来响应用户的操作。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用监听事件:<template><view><button@click="handleClick">Clickme</button></view></template><scriptsetup>import{......
  • 第29节: Vue3 列表渲染
    在UniApp中使用Vue3框架时,你可以使用列表渲染语法来动态地渲染一个列表。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用列表渲染:<template><view><button@click="addItem">AddItem</button><ul><liv-for="(item,index)initems":......
  • 第28节: Vue3 条件渲染
    在UniApp中使用Vue3框架时,你可以使用条件渲染来根据条件动态地显示或隐藏元素。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用条件渲染:<template><view><button@click="toggleActive">ToggleActive</button><pv-if="isActive">Thisisactive</p......
  • 第26节: Vue3 绑定到对象
    在UniApp中使用Vue3框架时,你可以使用对象绑定语法将属性绑定到对象上。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用绑定到对象:<template><view><button@click="toggleActive">ToggleActive</button><div:style="{color:activeColor,fontWeight:......