vue实现点击按钮“查看详情”弹窗展示详情列表操作


Posted in Javascript onSeptember 09, 2020

html:

<template>
 <div>
 <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}">
  <Table stripe class="task-table" :columns="columnsName4" :data="taskDetailList"></Table>
 </Modal>
 <div @click="showtaskDetail()">点击弹窗按钮</div>
 </div>
</template>

js:

<script>
import http from '@/assets/http.js'
export default {
 name: 'xx',
 data () {
 return {
  columnsName4: [
  {
   title: '序号',
   key: 'id',
   align: 'center',
   width: 70
  },
  {
   title: '姓名',
   key: 'name',
   align: 'center',
   width: 80
  }
  ],
  taskDetailList: [],
  classStatus: false
 }
},
methods: {
 showtaskDetail () {
  this.classStatus = true
 },
 }

css:

.task-table {
 margin-top: 10px;
 margin-bottom: 50px;
}

补充知识:vue通过this.$refs引用子组件出现undefined或者is not a function的错误

1.出现undefined错误

包含子组件的标签需要放在<template></template>中第一个子标签的子标签中,而且需要设置ref属性,通过该属性调用子组件的方法或者属性,例如

<template>
 <a-card :bordered="false">
 <s-table>  ...
 </s-table>
 
 <order-edit ref="modal" @ok="handleOk" /> <!-使用子组件-->
 </a-card>
</template>

this.$refs.modal.show() //子组件有show方法,调用方式`.方法名()`

2.出现is not a function的错误

2.1.子组件需要import,import是请确保路径正确

2.2.import之后还需要在父组件的component中进行注册

<script>
import OrderEdit from './form/OrderEdit' //1.导入编辑表单子组件组件
export default {
 name: 'OrderList',
 //2注册子组件OrderEdit
 components:{
 OrderEdit
 }
 //..... 

}
</script>

以上这篇vue实现点击按钮“查看详情”弹窗展示详情列表操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
js精度溢出解决方案
Dec 02 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
vue路由的配置和页面切换详解
Sep 09 #Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 #Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 #Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 #Javascript
You might like
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
jQuery实现自定义下拉列表
2015/01/05 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python松散正则表达式用法分析
2016/04/29 Python
Python字符串处理实例详解
2017/05/18 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
自我鉴定思想方面
2013/10/07 职场文书
公司离职证明样本
2014/09/13 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python