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的变量作用域深入理解
Oct 25 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue实现跨域的方法分析
May 21 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
详解TypeScript中的类型保护
Apr 29 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
js运动应用实例解析
2015/12/28 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python continue继续循环用法总结
2018/06/10 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
监理员的岗位职责
2013/11/13 职场文书
解除劳动合同协议书
2014/04/14 职场文书
2014年国庆节寄语
2014/09/19 职场文书
Nginx快速入门教程
2021/03/31 Servers
react国际化react-intl的使用
2021/05/06 Javascript
如何使用pdb进行Python调试
2021/06/30 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers