Table 表格

基本用法

简单的数据展示表格

Table表格 - 图1

  1. <at-table :columns="columns1" :data="data1"></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age'
  15.           },
  16.           {
  17.             title: '地址',
  18.             key: 'address'
  19.           }
  20.         ],
  21.         data1: [
  22.           {
  23.             name: '库里',
  24.             age: 18,
  25.             address: '深圳市宝安区创业一路'
  26.           },
  27.           {
  28.             name: '詹姆斯',
  29.             age: 25,
  30.             address: '广州市天河区岗顶'
  31.           },
  32.           {
  33.             name: '科比',
  34.             age: 24,
  35.             address: '上海市浦东新区'
  36.           },
  37.           {
  38.             name: '杜兰特',
  39.             age: 22,
  40.             address: '深圳市南山区深南大道'
  41.           },
  42.           {
  43.             name: '威斯布鲁克',
  44.             age: 21,
  45.             address: '北京市朝阳区'
  46.           },
  47.           {
  48.             name: '邓肯',
  49.             age: 26,
  50.             address: '深圳市罗湖区万象城'
  51.           },
  52.           {
  53.             name: '帕克',
  54.             age: 25,
  55.             address: '深圳市福田区中心书城'
  56.           },
  57.           {
  58.             name: '欧文',
  59.             age: 20,
  60.             address: '广州市番禺区大学城'
  61.           },
  62.           {
  63.             name: '托马斯',
  64.             age: 19,
  65.             address: '北京市朝阳区'
  66.           }
  67.         ]
  68.       }
  69.     }
  70.   }
  71. </script>

斑马线风格

设置属性 stripe，可让表格间隔显示不同的颜色，用于区分不同的行

Table表格 - 图2

  1. <at-table :columns="columns1" :data="data1" stripe></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age'
  15.           },
  16.           {
  17.             title: '地址',
  18.             key: 'address'
  19.           }
  20.         ],
  21.         data1: [
  22.           {
  23.             name: '库里',
  24.             age: 18,
  25.             address: '深圳市宝安区创业一路'
  26.           },
  27.           {
  28.             name: '詹姆斯',
  29.             age: 25,
  30.             address: '广州市天河区岗顶'
  31.           },
  32.           {
  33.             name: '科比',
  34.             age: 24,
  35.             address: '上海市浦东新区'
  36.           },
  37.           {
  38.             name: '杜兰特',
  39.             age: 22,
  40.             address: '深圳市南山区深南大道'
  41.           },
  42.           {
  43.             name: '威斯布鲁克',
  44.             age: 21,
  45.             address: '北京市朝阳区'
  46.           },
  47.           {
  48.             name: '邓肯',
  49.             age: 26,
  50.             address: '深圳市罗湖区万象城'
  51.           },
  52.           {
  53.             name: '帕克',
  54.             age: 25,
  55.             address: '深圳市福田区中心书城'
  56.           },
  57.           {
  58.             name: '欧文',
  59.             age: 20,
  60.             address: '广州市番禺区大学城'
  61.           },
  62.           {
  63.             name: '托马斯',
  64.             age: 19,
  65.             address: '北京市朝阳区'
  66.           }
  67.         ]
  68.       }
  69.     }
  70.   }
  71. </script>

带边框风格

默认不带列边框，设置属性 border 可添加列表框

Table表格 - 图3

  1. <at-table :columns="columns1" :data="data1" border></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age'
  15.           },
  16.           {
  17.             title: '地址',
  18.             key: 'address'
  19.           }
  20.         ],
  21.         data1: [
  22.           {
  23.             name: '库里',
  24.             age: 18,
  25.             address: '深圳市宝安区创业一路'
  26.           },
  27.           {
  28.             name: '詹姆斯',
  29.             age: 25,
  30.             address: '广州市天河区岗顶'
  31.           },
  32.           {
  33.             name: '科比',
  34.             age: 24,
  35.             address: '上海市浦东新区'
  36.           },
  37.           {
  38.             name: '杜兰特',
  39.             age: 22,
  40.             address: '深圳市南山区深南大道'
  41.           },
  42.           {
  43.             name: '威斯布鲁克',
  44.             age: 21,
  45.             address: '北京市朝阳区'
  46.           },
  47.           {
  48.             name: '邓肯',
  49.             age: 26,
  50.             address: '深圳市罗湖区万象城'
  51.           },
  52.           {
  53.             name: '帕克',
  54.             age: 25,
  55.             address: '深圳市福田区中心书城'
  56.           },
  57.           {
  58.             name: '欧文',
  59.             age: 20,
  60.             address: '广州市番禺区大学城'
  61.           },
  62.           {
  63.             name: '托马斯',
  64.             age: 19,
  65.             address: '北京市朝阳区'
  66.           }
  67.         ]
  68.       }
  69.     }
  70.   }
  71. </script>

固定高度

设置属性 height，可自定义表格的高度，此时表头会自动 Fixed 在顶部

Table表格 - 图4

  1. <at-table :columns="columns1" :data="data1" height="220"></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age'
  15.           },
  16.           {
  17.             title: '地址',
  18.             key: 'address'
  19.           }
  20.         ],
  21.         data1: [
  22.           {
  23.             name: '库里',
  24.             age: 18,
  25.             address: '深圳市宝安区创业一路'
  26.           },
  27.           {
  28.             name: '詹姆斯',
  29.             age: 25,
  30.             address: '广州市天河区岗顶'
  31.           },
  32.           {
  33.             name: '科比',
  34.             age: 24,
  35.             address: '上海市浦东新区'
  36.           },
  37.           {
  38.             name: '杜兰特',
  39.             age: 22,
  40.             address: '深圳市南山区深南大道'
  41.           },
  42.           {
  43.             name: '威斯布鲁克',
  44.             age: 21,
  45.             address: '北京市朝阳区'
  46.           },
  47.           {
  48.             name: '邓肯',
  49.             age: 26,
  50.             address: '深圳市罗湖区万象城'
  51.           },
  52.           {
  53.             name: '帕克',
  54.             age: 25,
  55.             address: '深圳市福田区中心书城'
  56.           },
  57.           {
  58.             name: '欧文',
  59.             age: 20,
  60.             address: '广州市番禺区大学城'
  61.           },
  62.           {
  63.             name: '托马斯',
  64.             age: 19,
  65.             address: '北京市朝阳区'
  66.           }
  67.         ]
  68.       }
  69.     }
  70.   }
  71. </script>

多选

设置属性 optional 可开启多选功能；选中某一项会触发 on-selection-change 事件，点击「全选按钮」会触发 on-select-all 事件

Table表格 - 图5

  1. <at-table :columns="columns1" :data="data2" optional></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age'
  15.           },
  16.           {
  17.             title: '地址',
  18.             key: 'address'
  19.           }
  20.         ],
  21.         data2: [
  22.           {
  23.             name: '库里',
  24.             age: 18,
  25.             address: '深圳市宝安区创业一路'
  26.           },
  27.           {
  28.             name: '詹姆斯',
  29.             age: 25,
  30.             address: '广州市天河区岗顶'
  31.           },
  32.           {
  33.             name: '科比',
  34.             age: 24,
  35.             address: '上海市浦东新区'
  36.           },
  37.           {
  38.             name: '杜兰特',
  39.             age: 22,
  40.             address: '深圳市南山区深南大道'
  41.           }
  42.         ]
  43.       }
  44.     }
  45.   }
  46. </script>

排序

如需对某一列数据进行排序，可给 columns 的数据项设置 sortType 属性，传入 normal 则表示该列不进行排序，但展示排序的操作按钮

sortType 支持的参数：normal (不排序), desc (降序), asc (升序)

Table表格 - 图6

  1. <at-table :columns="columns2" :data="data2"></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns1: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age',
  15.             sortType: 'normal'
  16.           },
  17.           {
  18.             title: '地址',
  19.             key: 'address'
  20.           }
  21.         ],
  22.         data2: [
  23.           {
  24.             name: '库里',
  25.             age: 18,
  26.             address: '深圳市宝安区创业一路'
  27.           },
  28.           {
  29.             name: '詹姆斯',
  30.             age: 25,
  31.             address: '广州市天河区岗顶'
  32.           },
  33.           {
  34.             name: '科比',
  35.             age: 24,
  36.             address: '上海市浦东新区'
  37.           },
  38.           {
  39.             name: '杜兰特',
  40.             age: 22,
  41.             address: '深圳市南山区深南大道'
  42.           }
  43.         ]
  44.       }
  45.     }
  46.   }
  47. </script>

自定义列模板

给 columns 的数据项设置一个函数 render，可以自定义该列的渲染模板，可以渲染自定义的组件，它是基于 Vue 的 Render 函数。

render 函数接收两个参数 h, object，object 包含 item, column, index，分别指当前单元格的数据，当前列的标题数据，当前的行号

Table表格 - 图7

  1. <at-table :columns="columns3" :data="data2" sort></at-table>
  3. <script>
  4.   export default {
  5.     data () {
  6.       return {
  7.         columns3: [
  8.           {
  9.             title: '姓名',
  10.             key: 'name'
  11.           },
  12.           {
  13.             title: '年龄',
  14.             key: 'age',
  15.             sortType: 'normal'
  16.           },
  17.           {
  18.             title: '地址',
  19.             key: 'address'
  20.           },
  21.           {
  22.             title: '操作',
  23.             render: (h, params) => {
  24.               return h('div', [
  25.                 h('AtButton', {
  26.                   props: {
  27.                     size: 'small',
  28.                     hollow: true
  29.                   },
  30.                   style: {
  31.                     marginRight: '8px'
  32.                   },
  33.                   on: {
  34.                     click: () => {
  35.                       this.$Message(params.item.name)
  36.                     }
  37.                   }
  38.                 }, '查看姓名'),
  39.                 h('AtButton', {
  40.                   props: {
  41.                     size: 'small',
  42.                     hollow: true
  43.                   },
  44.                   on: {
  45.                     click: () => {
  46.                       this.$Message(params.item.address)
  47.                     }
  48.                   }
  49.                 }, '查看地址')
  50.               ])
  51.             }
  52.           }
  53.         ],
  54.         data2: [
  55.           {
  56.             name: '库里',
  57.             age: 18,
  58.             address: '深圳市宝安区创业一路'
  59.           },
  60.           {
  61.             name: '詹姆斯',
  62.             age: 25,
  63.             address: '广州市天河区岗顶'
  64.           },
  65.           {
  66.             name: '科比',
  67.             age: 24,
  68.             address: '上海市浦东新区'
  69.           },
  70.           {
  71.             name: '杜兰特',
  72.             age: 22,
  73.             address: '深圳市南山区深南大道'
  74.           }
  75.         ]
  76.       }
  77.     }
  78.   }
  79. </script>

尺寸

设置属性 size 可调整表格的尺寸大小，提供三种尺寸：small, normal, large，默认为 normal

Table表格 - 图8

  1. <at-table :columns="columns3" :data="data2" size="large" sort></at-table>
  3. <at-table style="margin-top: 24px;" :columns="columns4" :data="data2" size="small" sort></at-table>
  5. <script>
  6.   export default {
  7.     data () {
  8.       return {
  9.         columns3: [
  10.           {
  11.             title: '姓名',
  12.             key: 'name'
  13.           },
  14.           {
  15.             title: '年龄',
  16.             key: 'age',
  17.             sortType: 'normal'
  18.           },
  19.           {
  20.             title: '地址',
  21.             key: 'address'
  22.           },
  23.           {
  24.             title: '操作',
  25.             render: (h, params) => {
  26.               return h('div', [
  27.                 h('AtButton', {
  28.                   props: {
  29.                     size: 'small',
  30.                     hollow: true
  31.                   },
  32.                   style: {
  33.                     marginRight: '8px'
  34.                   },
  35.                   on: {
  36.                     click: () => {
  37.                       this.$Message(params.item.name)
  38.                     }
  39.                   }
  40.                 }, '查看姓名'),
  41.                 h('AtButton', {
  42.                   props: {
  43.                     size: 'small',
  44.                     hollow: true
  45.                   },
  46.                   on: {
  47.                     click: () => {
  48.                       this.$Message(params.item.address)
  49.                     }
  50.                   }
  51.                 }, '查看地址')
  52.               ])
  53.             }
  54.           }
  55.         ],
  56.         columns4: [
  57.           {
  58.             title: '姓名',
  59.             key: 'name'
  60.           },
  61.           {
  62.             title: '年龄',
  63.             key: 'age',
  64.             sortType: 'normal'
  65.           },
  66.           {
  67.             title: '地址',
  68.             key: 'address'
  69.           },
  70.           {
  71.             title: '操作',
  72.             render: (h, params) => {
  73.               return h('div', [
  74.                 h('AtButton', {
  75.                   props: {
  76.                     size: 'smaller',
  77.                     hollow: true
  78.                   },
  79.                   style: {
  80.                     marginRight: '8px'
  81.                   },
  82.                   on: {
  83.                     click: () => {
  84.                       this.$Message(params.item.name)
  85.                     }
  86.                   }
  87.                 }, '查看姓名'),
  88.                 h('AtButton', {
  89.                   props: {
  90.                     size: 'smaller',
  91.                     hollow: true
  92.                   },
  93.                   on: {
  94.                     click: () => {
  95.                       this.$Message(params.item.address)
  96.                     }
  97.                   }
  98.                 }, '查看地址')
  99.               ])
  100.             }
  101.           }
  102.         ],
  103.         data2: [
  104.           {
  105.             name: '库里',
  106.             age: 18,
  107.             address: '深圳市宝安区创业一路'
  108.           },
  109.           {
  110.             name: '詹姆斯',
  111.             age: 25,
  112.             address: '广州市天河区岗顶'
  113.           },
  114.           {
  115.             name: '科比',
  116.             age: 24,
  117.             address: '上海市浦东新区'
  118.           },
  119.           {
  120.             name: '杜兰特',
  121.             age: 22,
  122.             address: '深圳市南山区深南大道'
  123.           }
  124.         ]
  125.       }
  126.     }
  127.   }
  128. </script>

分页

设置属性 pagination 可启用表格的分页功能

Table表格 - 图9

<at-table :columns="columns2" :data="data3" pagination></at-table>

<script>
  export default {
    data () {
      return {
        columns1: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age',
            sortType: 'normal'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data3: this.makePageData()
      }
    },
    methods: {
      makePageData () {
        const data = [
          {
            name: '库里',
            age: 18,
            address: '深圳市宝安区创业一路'
          },
          {
            name: '詹姆斯',
            age: 25,
            address: '广州市天河区岗顶'
          },
          {
            name: '科比',
            age: 24,
            address: '上海市浦东新区'
          },
          {
            name: '杜兰特',
            age: 22,
            address: '深圳市南山区深南大道'
          },
          {
            name: '威斯布鲁克',
            age: 21,
            address: '北京市朝阳区'
          },
          {
            name: '邓肯',
            age: 26,
            address: '深圳市罗湖区万象城'
          },
          {
            name: '帕克',
            age: 25,
            address: '深圳市福田区中心书城'
          },
          {
            name: '欧文',
            age: 20,
            address: '广州市番禺区大学城'
          },
          {
            name: '托马斯',
            age: 19,
            address: '北京市朝阳区'
          }
        ]
        let pageData = []

        for (let i = 0; i < 5; i++) {
          pageData = pageData.concat(data)
        }

        return pageData
      }
    }
  }
</script>

Table 参数

参数说明类型可选值默认值
size表格的尺寸Stringsmall, normal, largenormal
stripe是否启用斑马线风格Boolean-false
border是否显示列边框Boolean-false
data表单的内容数据Array-[]
columns表单的标题数据Array-[]
optional是否支持选择Boolean-false
pagination是否显示分页Boolean-false
page-size每页的数据量Number-10
show-page-total是否显示数据总数Boolean-true
show-page-sizer是否显示更改每页展示数的选择框Boolean-false
show-page-quickjump是否显示快速跳转Boolean-false
height指定表格的高度Number / String--

Table 事件

事件名称说明返回值
on-selection-change选中值有变化时触发选中的行的对象数组
on-select-all只有全选时才会触发所有行组成的对象数组
on-page-change页码改变时触发的回调页码
on-page-size-change切换每页显示的条数时触发的回调每页的条目数