vue 단추를 누르면 "상세한 내용 보기"창에서 상세한 목록을 보여 줍니다.

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',
   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는 버튼'상세한 내용 보기'를 누르면 창에 상세한 목록을 보여 줍니다. 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주시기 바랍니다.

좋은 웹페이지 즐겨찾기