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

html：

点击弹窗按钮

js：

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错误

包含子组件的标签需要放在中第一个子标签的子标签中，而且需要设置ref属性，通过该属性调用子组件的方法或者属性，例如

...

this.$refs.modal.show() //子组件有show方法，调用方式`.方法名()`

2.出现is not a function的错误

2.1.子组件需要import,import是请确保路径正确

2.2.import之后还需要在父组件的component中进行注册

import OrderEdit from './form/OrderEdit' //1.导入编辑表单子组件组件

export default {

name: 'OrderList',

//2注册子组件OrderEdit

components:{

OrderEdit

}

//.....

}

以上这篇vue实现点击按钮“查看详情”弹窗展示详情列表操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。