ant-design-vue/antdv-demo/docs/table/demo/size.md

1.1 KiB

#### į´§å‡‘åž‹ ä¸¤į§į´§å‡‘åž‹įš„åˆ—čĄ¨īŧŒå°åž‹åˆ—襨åĒᔍäēŽå¯šč¯æĄ†å†…。 #### size There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
<template>
  <div id="components-table-demo-size">
    <h4>Middle size table</h4>
    <a-table :columns="columns" :data-source="data" size="middle" />
    <h4>Small size table</h4>
    <a-table :columns="columns" :data-source="data" size="small" />
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>
<style>
#components-table-demo-size h4 {
  margin-bottom: 16px;
}
</style>