基于Ant Design Vue的table表格的获取与展示

<template>
 <div style="width: 100%;height: calc(100vh - 207px);background: #ffffff;margin-top: 20px;">
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 20 }"
        :scroll="{ y: clientHeight - 350 }"
      >
        <span slot="action" slot-scope="text, record">
          <a-button type="primary" @click="showModal(true,record)">修改</a-button>
          <a-divider type="vertical"/>
          <a-button type="danger" @click="showDeleteConfirm(text)">删除</a-button>
        </span>
      </a-table>
    </div>
  </template>
  <script>
  const columns = [
    {
      title: '角色',
      dataIndex: 'role.role_name',
      // dataIndex: 'role_name',
      width: 300,
    },
    {
      title: '有效状态',
      dataIndex: 'age',
      width: 150,
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
      width: 300,
    },
  ];
  export default {
    name: "role_management",
    data() {
      return {
        data:[],
        columns, 
        clientHeight: 0,     // 设置默认值
      };
    },
    mounted() {
      // 在DOM渲染数据时，设置下区域高度为浏览器可视区域高度．
      this.clientHeight = document.body.clientHeight;
      this.div_height = document.body.clientHeight - 300;
      // 监听window的resize事件．在浏览器窗口变化时再设置下区域高度．
      // console.log(this.clientHeight);
      const _this = this;
      window.onresize = function temp() {
        _this.clientHeight = document.body.clientHeight;
        _this.div_height = document.body.clientHeight - 300;
      };
    },
    created(){
    	this.getRoleList();
    },
    methods:{
      //角色列表的展示
      getRoleList(){
        this.$axios.get('/ztg/role/showall').then(res =>{
          this.data = res.data.data;
        })
      },
    }

效果图：