vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作
更新時間：2020年09月09日 15:29:19 作者：所愛隔山海海
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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()">點(diǎn)擊彈窗按鈕</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;
}
補(bǔ)充知識：vue通過this.$refs引用子組件出現(xiàn)undefined或者is not a function的錯誤
1.出現(xiàn)undefined錯誤
包含子組件的標(biāo)簽需要放在<template></template>中第一個子標(biāo)簽的子標(biāo)簽中，而且需要設(shè)置ref屬性，通過該屬性調(diào)用子組件的方法或者屬性，例如
<template> <a-card :bordered="false"> <s-table> ... </s-table> <order-edit ref="modal" @ok="handleOk" /> <!-使用子組件--> </a-card> </template>
this.$refs.modal.show() //子組件有show方法，調(diào)用方式`.方法名()`
2.出現(xiàn)is not a function的錯誤
2.1.子組件需要import,import是請確保路徑正確
2.2.import之后還需要在父組件的component中進(jìn)行注冊
<script>
import OrderEdit from './form/OrderEdit' //1.導(dǎo)入編輯表單子組件組件
export default {
name: 'OrderList',
//2注冊子組件OrderEdit
components:{
OrderEdit
}
//.....
}
</script>
以上這篇vue實(shí)現(xiàn)點(diǎn)擊按鈕“查看詳情”彈窗展示詳情列表操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這段時間一直在弄vue，當(dāng)然也遇到很多問題，這里就來跟大家分享一些注冊自定義模板組件的心得 ,需要的朋友可以參考下2019-04-04
Vue2.0+ElementUI實(shí)現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
本篇文章主要介紹了詳解Nuxt.js Vue服務(wù)端渲染摸索，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了vue中 this.$set的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue 切換頁面(路由)時如何保持滾動條回到頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue 動態(tài)組件用法,結(jié)合實(shí)例形式總結(jié)分析了vue 動態(tài)組件基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
關(guān)于vant的日歷組件,在iPhonex上可選日期空白
這篇文章主要介紹了關(guān)于vant的日歷組件,在iPhonex上可選日期空白，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解
頁面刷新白屏其實(shí)是因?yàn)関uex引起的,由于刷新頁面vuex數(shù)據(jù)會丟失,這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新出現(xiàn)空白頁的原因與最優(yōu)解的相關(guān)資料,需要的朋友可以參考下2023-11-11
require是一個node方法，用于引入模塊，JSON或本地文件，這篇文章主要介紹了vue中動態(tài)引入圖片為什么要是require,需要的朋友可以參考下2022-10-10
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03