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

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

本文主要介绍vue实现点击按钮“查看详情”弹出窗口显示详情列表操作,有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

html:

模板

差异

' modal v-model=' class status ' width=' 900 ' title=' Details:':styles=' { top:' 80px ' } '

表条带class=' task-Table ':columns=' columns name 4 ':data=' tasktaillist '/Table

/Modal

Div @click='showtaskDetail()'单击弹出按钮/div

/div

/模板

js:

脚本

从' @/assets/http.js '导入http

导出默认值{

姓名:' xx ',

data () {

返回{

列名4: [

{

标题:“序列号”,

密钥:“id”,

对齐:“居中”,

宽度:70

},

{

标题:'姓名',

关键字:“名称”,

对齐:“居中”,

宽度:80

}

],

任务详细列表:[],

classStatus: false

}

},

方法:{

showtaskDetail () {

this.classStatus=true

},

}

css:。任务表{

页边距-顶部:10px

边距-底部:50px

}

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

1.出现undefined错误

包含子组件的标签需要放在template/template中第一个子选项卡的子选项卡中,并且需要设置ref属性,通过它可以调用子组件的方法或属性,例如

模板

a卡:bordered='false '

s表.

/s-表

order-edit ref=' modal ' @ ok=' handle ok '/!-使用子组件-

/a卡

/模板

这个。$refs.modal.show() //子组件有一个show方法,由“”调用。方法名()`。

2.出现is not a function的错误

2.1.导入,子组件需要导入,因此请确保路径正确。

2.2.2.2.import之后,需要在父组件的组件中注册。

脚本

Import从'订购它。/form/ordered it'//1。导入并编辑表单子组件。

导出默认值{

名称:'订单列表',

//2注册子组件OrderEdit

组件:{

订单编辑

}

//.

}

/脚本

以上vue实现点击按钮“查看详情”弹出窗口显示详情列表操作,是边肖分享的所有内容。希望能给你一个参考,多多支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: