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