关于 Ant Design Vue Modal 对话框组件的相关使用

具体任务：路由跳转完毕后，向后台发送请求，拿到数据，把数据渲染到表格中，表格最右侧有个查看按钮，点击后，浮出一个弹窗，然后展示相关的详细信息

一、接上次路由跳转完毕之后干一票大事，使用下 antdesign 的组件完成老大交给的另一个需求

1，首先引入请求后台数据的相关接口

import { listNotice } from '@/api/system/notice'

2， antdesign 相关引入已经在项目中了，需要引入的大家可以去看下相关文档，当然相关组件的使用，也离不开各组件的相关 API 了

我的步骤很简单，先看自己需要什么功能样式的组件了，根据自己的需求先找个类似的组件展开他的代码一顿 C V 操作，然后，就是滚到最下面看相关的 API 根据自己的需求找到合适的 API 来更改为自己想要的效果。 下面以我的需求为例。。

3、 我需要个表格展示我的数据

先找个差不多滴

然后考皮代码（代码如下 一个封装好的 vue 组件）

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template slot="name" slot-scope="text">
      <a>{{ text }}</a>
    </template>
    <template slot="title" slot-scope="currentPageData">
      Header
    </template>
    <template slot="footer" slot-scope="currentPageData">
      Footer
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>
<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>

这些代码，style 可以暂且不管，修改修改 script 和 template 里面的内容看看变化的效果你就大概知道自己需要改动什么来完成自己的需求了，代码中看不懂的还是直接滚到最下面看 API 肯定有这个单词是用来干哈的，然后再进一步根据自己的需求取舍或者修改。
下面的代码是我根据自己的需求做的修改，最终效果图我会放到最后

<template>
  <div>
    <a-table :columns="columns" :data-source="data" bordered>
      <span slot="operation" slot-scope="text, record">
        <a @click="showModal(record)">
          <a-icon type="eye" /> 查看
        </a>
      </span>
    </a-table>
    <a-table :columns="columns2" :data-source="data2" bordered>
      <span slot="operation" slot-scope="text, record">
        <a @click="showModal(record)">
          <a-icon type="eye" /> 查看
        </a>
      </span>
    </a-table>
    <a-modal v-model="visible" :title="noticeTitle" :footer="null">
      <p>{{ noticeContent }}</p>
    </a-modal>
  </div>
</template>

<script>
import { listNotice } from '@/api/system/notice'
const columns = [
  {
    title: '通知',
    dataIndex: 'noticeTitle'
  },
  {
    title: '发布时间',
    dataIndex: 'createTime'
  },
  // {
  //   title: '详情信息',
  //   dataIndex: 'noticeContent'
  // }
  {
    title: '操作',
    // key: 'operation',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
const columns2 = [
  {
    title: '公告',
    dataIndex: 'noticeTitle'
  },
  {
    title: '发布时间',
    dataIndex: 'createTime'
  },
  // {
  //   title: '详情信息',
  //   dataIndex: 'noticeContent'
  // },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  name: 'NoticeTwo',
  data() {
    return {
      data: [],
      data2: [],
      columns,
      columns2,

      // 存放请求回来的数据，还没处理为想要的格式
      data3: [],
      visible: false,
      bodyStyle: {
        width: 900
      },
      title: '',
      noticeTitle: '',
      noticeContent: ''
    }
  },
  methods: {
     /** 查看按钮操作 */
    showModal(record) {
      this.visible = true
      console.log('eeeeeeeeeeee', record);
      this.noticeTitle = record.noticeTitle
      this.noticeContent = record.noticeContent
    },
    // handleOk(e) {
    //   console.log(e)
    //   this.visible = false
    // },
    getList() {
      listNotice().then((response) => {
        console.log('发Ajax请求的后台数据===', response)
        this.data3 = response.rows
        console.log('data33333333', this.data3)
      })
    },
    // 处理为符合组件渲染条件的 数据格式
    processData() {
      this.data3.forEach((item) => {
        if (item.noticeType === '1') {
          this.data.push({
            noticeTitle: item.noticeTitle,
            createTime: item.createTime,
            // 使用正则表达式，可以快速获取到除Html标签以外的内容
            // var result = str.replace(/<\/?.+?>/g,"").replace(/ /g,"");
            noticeContent: item.noticeContent.replace(/<\/?.+?>/g, '').replace(/ /g, '')
          })
        } else if (item.noticeType === '2') {
          this.data2.push({
            noticeTitle: item.noticeTitle,
            createTime: item.createTime,
            noticeContent: item.noticeContent.replace(/<\/?.+?>/g, '').replace(/ /g, '')
          })
        }
      })
    }
  },
  // 组件挂载完毕请求数据，并在一秒后处理数据
  mounted() {
    this.getList()
    setTimeout(() => {
      this.processData()
    }, 1000)
  }
}
</script>

<style>
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>

我的代码里又嵌套了另一个 ant 的组件 Modal 对话框（一会我会详细讲这个组件的使用，铺垫这么多本来就是想简单介绍这个组件的使用的，结果一不小心，输出过多了 哈哈哈）

老样子先找个这个组件

考皮相关代码

<a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>

上面代码就是要用到组件，这个东西 v-model = “visible” visible在模板代码下面打data数据有写，是个 false 意思很简单就是这个组件上来不展示，是隐藏的。

<a-button type="primary" @click="showModal">
      Open Modal
    </a-button>

上面代码就是关于修改 visible 为 true 让对话框展示出来（然后你需要做的就是把这个点击事件放到你自己的需求的元素身上，点击后这个对话框展示出来）

<a @click="showModal(record)">
          <a-icon type="eye" /> 查看
        </a>

我放到了我的 a 标签上面了 并且我给了个参数，后面我会用这个参数，因为需要点击不同的 a 后我需要展示出来他的详细信息，表格中每个列信息肯定都是独自的，所以需要用到这个参数

/** 查看按钮操作 */
    showModal(record) {
      this.visible = true
      console.log('eeeeeeeeeeee', record);
      this.noticeTitle = record.noticeTitle
      this.noticeContent = record.noticeContent
    }

整体的代码上面已经有展示了，可以去翻到上面看，这里就把关键代码再展示一下子（点击后的事件函数）

data() {
    return {
      data: [],
      data2: [],
      columns,
      columns2,

      // 存放请求回来的数据，还没处理为想要的格式
      data3: [],
      visible: false,
      bodyStyle: {
        width: 900
      },
      title: '',
      noticeTitle: '',
      noticeContent: ''
    }
  }

我这里把数据先管理起来 然后就是在 a-modal 组件需要用到的地方给原本的模板的数据替换掉，换成我自己需求里需要展示的数据

API 如下

懂我的意思了吧

最后 （效果图）