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及jquey实现多个数组的合并操作
Sep 06 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
angularjs实现table增加tr的方法
Feb 27 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
如何在vue中使用jointjs过程解析
May 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读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
新手简单了解vue
2019/05/29 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python MD5加密实例详解
2017/08/02 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python 获取div标签中的文字实例
2018/12/20 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Django之模板层的实现代码
2019/09/09 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
基于Python绘制个人足迹地图
2020/06/01 Python
is_file和file_exists效率比较
2021/03/14 PHP
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
高中物理教学反思
2016/02/19 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript