vue父子件,子件页面table数据列按条件显示不同的内容
需求:在父件中点击按钮。子件弹框中,table列根据条件显示不同的数据
实现思路:点击按钮,执行不同的方法,方法中参数值不同,从而展示不同的columns。
父件按钮如下图:

父件中导入子件需要注意的三个地方:

点击按钮后执行的方法如下:

父件要用props传递参数给子件,所以子件中要用props定义对应的参数

子件中的接口调用如下:使用queryParam封装查询条件

最后进行判断,在columns中定义自己要显示的数据列,

注:我是一个前端大白,现在是属于边工作边积累的一个状态。这对于前端开发人员来说很简单,但我才开始接触前端,所以主要还是想记录一下这些东西。俗话说:好记性不如烂笔头,我希望自己可以通过这种方式有所进步。
vue父子件,子件页面table数据列按条件显示不同的内容的更多相关文章
- ABAP-增强-MRP运行-根据工厂/父件/子件/供应商拆分采购申请
最近有个业务需要,MRP运行过程中需要根据生产计划订单/子件/供应商对应关系来拆解采购申请. 1.具体实例: a.基础数据 整车物料:NL1G58420151001219 子件:00000000888 ...
- Vue父子,子父,非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
- Helium文档9-WebUI自动化-find_all获取页面table数据
前言 find_all关键字根据官方介绍的作用是查找所有出现GUI元素,并且返回list,下面通过举例说明 入参介绍 def find_all(predicate): ""&quo ...
- 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值
多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容
父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...
- vue父组件获取子组件页面的数组 以城市三级联动为例
父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...
- 在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。
在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的 ...
- vue 父子通信过程
1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...
- vue 给嵌套的iframe子页面传数据 postMessage
Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...
随机推荐
- pytorch的三种量化方式详解
pytorch的三种量化方式详解 这篇博客详细介绍了pytorch官方教程提到的三种量化方式的原理,详细解释了三种量化方式的区别: 1. 静态量化 :torch.quantize_per_tensor ...
- linux run/media/wang/centos_磁盘爆满
在使用iso安装了linux系统后,会有个 /run/media/wang/CentOS 7 x86_64 无法删除,这个是我们安装程序时的安装驱动, 登陆用户后将他卸载就可
- IEEE 802.66( WiMax)的衰亡
1.什么是WiMax WiMAX全称为,World Interoperability for Microwave Access,即全球微波接入互操作性,是一项基于IEEE 802.16标准的宽带无线接 ...
- Delphi 格式化函数Format、FormatDateTime与FormatFloat详解
目录 Format函数 %d 代表一个整数 %u 代表一个无负号整数 %s 代表字符串 %f 代表浮点数(保留或凑够两位小数点 ) %g 代表浮点数(会去掉多余的 0) %n 代表浮点数(整数部分使用 ...
- twenty-three
Vue(用于构建用户界面的前端框架) Vue框架的特性,主要有 ① 数据驱动试图 ②双向数据绑定 js数据的变化,会被自动渲染到页面上 页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新 ...
- (一)从路由器和IP地址开始折腾
我们应当知道的一点是,由于IP地址只有32bit, 所以很快就面临着不够用的情况,现在之所以大家还在正常使用IPv4, 就是因为采用了公有地址和私有地址的概念:所谓的私有地址是从当时公有地址中还没有分 ...
- 微信小程序-自定义tabbar配置及注意事项
1.选中要创建tabbar组件的目录,右键选定新建Componen 2.然后编写wxml代码和wxss样式 <cover-view class="tab-bar"> & ...
- python代码规范PEP8
1.引言 本文档给出了 Python 编码规约,主要 Python 发行版中的标准库即遵守该规约.对于 C 代码风格的 Python 程序,请参阅配套的 C 代码风格指南. 本文档和 PEP 257( ...
- 记慢慢实现学习cocos 制作游戏
以下皆为记录所用 现在根据官方教程,我已经实现了一个小东西可以上下跳动 了解了Sprite挂载脚本,以及编辑脚本,还有动画的一些入门东西 还了解了如何设置监听键盘按下的输入,这个是没问题的 问题一 如 ...
- https原理(二)服务端公钥有没有被CA私钥加密
https://www.dianjilingqu.com/387084.html 在https原理中,一大争议就是服务端是否用CA私钥加密服务器公钥 是-自签名证书浏览器没有CA公钥,无法解密公钥,而 ...