本文主要介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。