vue實現點選按鈕“檢視詳情”彈窗展示詳情列表操作
阿新 • • 發佈:2020-09-10
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',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實現點選按鈕“檢視詳情”彈窗展示詳情列表操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。