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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
javascript实现日期按月份加减
May 15 Javascript
Javascript中的arguments对象
Jun 20 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 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制作静态网站的模板框架(三)
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
理解javascript正则表达式
2016/03/08 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
js模糊查询实例分享
2016/12/26 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
Python中__name__的使用实例
2015/04/14 Python
Python实现Linux中的du命令
2017/06/12 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python机器学习之决策树分类详解
2017/12/20 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
高中考试作弊检讨书
2014/01/14 职场文书
青年教师培训方案
2014/02/06 职场文书
公司担保书范文
2014/05/21 职场文书
员工工作自我评价
2014/09/26 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Python如何加载模型并查看网络
2022/07/15 Python