antd vue tablelist 模板

<template>

  <a-table :columns="columns" :data-source="data" :scroll="{ x: 1300,y:1500}" class="tb_list" ref="table"
        :pagination="{
          current: table.pageNumber,
          defaultPageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: [‘10‘, ‘20‘, ‘30‘, ‘40‘],
          showTotal: (total,range) => `共${total}条`,
          onShowSizeChange: (current, pageSize) =>{table.pageSize = pageSize; table.pageNumber = 1},
          onChange: (pageNumber) => table.pageNumber = pageNumber
      }"
      :row-selection="rowSelection"
      :rowKey="record=>record.id"
  >

  <span slot="action" slot-scope="text, record" class="sup">
    <a-button type="link" @click="showModal(record)">Edit</a-button>
    <!-- <a-divider type="vertical" /> -->

    <a-button type="link">Delete</a-button>
  </span>
  </a-table>

</template>
      

<script>



const columns = [
  { title: ‘id‘, dataIndex: ‘id‘, key: ‘id‘, width: 150,},
  { title: ‘地址‘, dataIndex: ‘address‘, key: ‘address‘ ,width: 150},
  { title: ‘age‘, dataIndex: ‘age‘, key: ‘age‘,width: 150 },
  { title: ‘name‘, dataIndex: ‘name‘, key: ‘name‘,width: 150 },

  {title: ‘operate‘,key: ‘operation‘,fixed: ‘right‘, width:‘auto‘,scopedSlots: { customRender: ‘action‘ },
  },
];

const data = [
  {
    id: ‘1‘,
    name: ‘John Brown‘,
    age: 32,
    address: ‘New York Park‘,
  },
  {
    id: ‘2‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘3‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘4‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘5‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘6‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘7‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘8‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘9‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘10‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
  {
    id: ‘11‘,
    name: ‘Jim Green‘,
    age: 40,
    address: ‘London Park‘,
  },
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, ‘selectedRows: ‘, selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

export default {
  name:‘tablelist‘,
  data() {
    return {
      // visible: fasle,
      data,
      columns,
      table:{
      pageNumber:1,
      pageSize:10
  },
  rowSelection
    };
  },
  methods: {
    // editchange(record){
    //   console.log(record.id+"  "+record.name+" ",record.age);
    // },
    showModal(record) {
      this.visible = true;
      console.log(record.id+"  "+record.name+" ",record.age);
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
};
</script>
<style lang="less" scoped>
.sup{
  margin-left: -13px;
  
}
</style>