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 相关文章推荐
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
js实现简单商品筛选功能
Feb 02 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
新52大事件
2020/03/03 欧美动漫
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP4实际应用经验篇(8)
2006/10/09 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
DWR Ext 加载数据
2009/03/22 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
用Python抢过年的火车票附源码
2015/12/07 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
用Python开发app后端有优势吗
2020/06/29 Python
Django如何批量创建Model
2020/09/01 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
大学毕业感言200字
2014/03/09 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
经营场所证明范本
2015/06/19 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers