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;
}