需求:在父件中点击按钮。子件弹框中,table列根据条件显示不同的数据

实现思路:点击按钮,执行不同的方法,方法中参数值不同,从而展示不同的columns。

父件按钮如下图:

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

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

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

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

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

注:我是一个前端大白,现在是属于边工作边积累的一个状态。这对于前端开发人员来说很简单,但我才开始接触前端,所以主要还是想记录一下这些东西。俗话说:好记性不如烂笔头,我希望自己可以通过这种方式有所进步。

vue父子件,子件页面table数据列按条件显示不同的内容的更多相关文章

  1. ABAP-增强-MRP运行-根据工厂/父件/子件/供应商拆分采购申请

    最近有个业务需要,MRP运行过程中需要根据生产计划订单/子件/供应商对应关系来拆解采购申请. 1.具体实例: a.基础数据 整车物料:NL1G58420151001219 子件:00000000888 ...

  2. Vue父子,子父,非父子组件之间传值

    Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...

  3. Helium文档9-WebUI自动化-find_all获取页面table数据

    前言 find_all关键字根据官方介绍的作用是查找所有出现GUI元素,并且返回list,下面通过举例说明 入参介绍 def find_all(predicate): ""&quo ...

  4. 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值

    多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  6. vue父组件获取子组件页面的数组 以城市三级联动为例

    父组件调用子组件 <Cselect ref="registerAddress"></Cselect> import Cselect from '../../ ...

  7. 在Vue前端界面中,几种数据表格的展示处理,以及表格编辑录入处理操作。

    在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的 ...

  8. vue 父子通信过程

    1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...

  9. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  10. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

随机推荐

  1. 15、java递归解决迷宫问题

    递归真是一个.看着简单,听着简单,写不出来,想不到.以前也不是不理解递归,也不是看不懂递归的代码,但说实话真的很难想到自己去用这个递归也很难理清楚这个递归到底从哪里开始到哪里结束,将哪个步骤作为 一个 ...

  2. 处理uniapp激励广告

    使用uniapp查看广告 激励视频广告组件.激励视频广告组件是一个原生组件,并且是一个全局单例.层级比上屏 Canvas 高,会覆盖在上屏 Canvas 上.激励视频 广告组件默认是隐藏的,需要调用 ...

  3. python34

    Python成员运算符 除了以上的一些运算符之外,Python还支持成员运算符,测试实例中包含了一系列的成员,包括字符串,列表或元组. 运算符 描述 实例 in 如果在指定的序列中找到值返回 True ...

  4. python基础 补漏

    输出 -----------定义变量类型 类型 集合 mongodb的用法和redis差不多一样的 NoSQL 数据库之一 https://www.runoob.com/python3/python- ...

  5. WPF窗体图标设置

    WPF程序在编写结束后,界面没有图标,影响美观性.今天在添加图标的时候,一直报错,然后通过查找资料,将这个问题解决,现在将主要步骤记录如下; 准备好图标文件,注意文件格式应该为ico格式文件.有一个在 ...

  6. app对接微信支付(app支付)

    (先补充一下,app唤醒微信支付失败的话,在确保没错的情况下,建议换一个手机或者重新下载微信,不知道是微信缓存还是什么原因) 1.先申请好开发环境 app支付不需要公众号,所以申请好开发商号和开发平台 ...

  7. 像MIUI一样做Zabbix二次开发(3)——Zabbix深度定制的意义

    深度定制的意义 综合来讲,Zabbix是一个非常强大的监控平台,简单拿来完成监控一些Hosts,没有什么问题,而且,目前国内大部分客户都是这么做的,基本上是安装完后,网上找到一些相关模板,配置后把Ho ...

  8. nginx auth_basic uwsgi 目录简易认证。

    mkdir /etc/nginx/conf.d/auth_pwd touch /etc/nginx/conf.d/auth_pwd/xx.pwd htpasswd -c -d /etc/nginx/c ...

  9. Supervisor安装及配置

    Supervisor安装 # 安装 easy_install supervisor # 生成默认配置文件 echo_supervisord_conf > /etc/supervisord.con ...

  10. fastapi loguru

    使用loguru记录日志 安装 pip install loguru 基本使用 那么这个库怎么来用呢?我们先用一个实例感受下: In [1]: from loguru import logger .. ...