vue 단추를 누르면 "상세한 내용 보기"창에서 상세한 목록을 보여 줍니다.
<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',
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 오류 발생
하위 구성 요소를 포함하는 라벨은 의 첫 번째 하위 라벨의 하위 라벨에 놓여야 하며, 이 속성을 통해 하위 구성 요소를 호출하는 방법이나 속성을 설정해야 한다. 예를 들어
<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는 버튼'상세한 내용 보기'를 누르면 창에 상세한 목록을 보여 줍니다. 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.