通用表格

基础

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

序号列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    }
  ]
})
const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

多选列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px '
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address'
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 20,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const handleSelectChange = (selectedRowKeys: Array<string | number>, selectedRows: Array<any>) => {
  console.log('handleSelectChange', selectedRowKeys, selectedRows)
  if (table.elementProps && table.elementProps.rowSelection) {
    table.elementProps.rowSelection.selectedRowKeys = selectedRowKeys
  }
}

const handleStar = () => {
  console.log('handleStar', table.elementProps?.rowSelection?.selectedRowKeys)
}

const handleUnstar = () => {
  console.log('handleUnstar', table.elementProps?.rowSelection?.selectedRowKeys)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false,
  customCommands: [
    {
      text: '关注',
      command: 'handleStar',
      disableValidator: () => table.elementProps?.rowSelection?.selectedRowKeys?.length === 0
    },
    {
      text: '取消关注',
      command: 'handleUnstar',
      disableValidator: () => table.elementProps?.rowSelection?.selectedRowKeys?.length === 0
    }
  ],
  elementProps: {
    rowSelection: {
      selectedRowKeys: [],
      onChange: handleSelectChange,
      fixed: 'left',
      columnWidth: '60px'
    }
  },
  emitRegister: {
    handleStar,
    handleUnstar
  }
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

超链接列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" :emit-register="emitRegister" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px'
      }
    },
    {
      type: 'link',
      label: '编号',
      dataField: 'code',
      elementProps: {
        width: '100px',
        align: 'center'
      },
      extendProps: {
        linkCommand: 'handleLink'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '80px'
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address'
    }
  ]
})
const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        code: '101',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        code: '102',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        code: '103',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false
})

const handleLink = ({ row, index }) => {
  console.log('handleLink', row, index)
}

const emitRegister = {
  handleLink
}
getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

状态列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, SelectItem, TableField } from '#/castor-antdv'

const optionsMap = reactive<Record<string, SelectItem[]>>({
  status: [
    {
      value: 4,
      label: '未开始',
      color: '#4a90e2'
    },
    {
      value: 1,
      label: '进行中',
      color: '#f5a623'
    },
    {
      value: 2,
      label: '已驳回',
      color: '#d0021b'
    },
    {
      value: 3,
      label: '已完成',
      color: '#3d1ab7'
    }
  ]
})

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'status',
      label: '状态',
      dataField: 'status',
      elementProps: {
        width: '120px'
      },
      extendProps: {
        options: optionsMap['status']
      }
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        status: 1
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        status: 2
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        status: 3
      },
      {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1520 弄',
        status: 4
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

图片列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'image',
      label: '图片',
      dataField: 'status',
      elementProps: {
        width: '120px'
      },
      extendProps: {
        subElementProps: {
          width: 50,
          height: 50,
          src: 'https://q2.itc.cn/q_70/images03/20241013/47ff05019e93455abd85cd47612fbf7b.jpeg'
        }
      }
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        status: 1
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        status: 2
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        status: 3
      },
      {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1520 弄',
        status: 4
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

操作列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px '
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '200px'
      }
    },
    {
      type: 'commands',
      label: '操作',
      dataField: 'commands',
      elementProps: {
        fixed: 'right',
        width: '100px'
      },
      extendProps: {
        commands: [
          {
            text: '编辑',
            command: 'handleEdit',
            disableValidator: ({ row }) => row.id === 2,
            visibleValidator: ({ row }) => row.id >= 2
          },
          {
            text: '删除',
            command: 'handleDelete',
            elementProps: {
              danger: true
            }
          }
        ]
      }
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
    return table.dataSource
  }, 200)
}

const handleEdit = ({ index, row }) => {
  console.log('handleEdit', index, row)
}
const handleDelete = ({ index, row }) => {
  console.log('handleDelete', index, row)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false,
  emitRegister: {
    handleEdit,
    handleDelete
  }
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

自定义组件列

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, shallowRef } from 'vue'
import CustomInfo from './components/CustomInfo.vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '120px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '240px'
      }
    },
    {
      type: 'custom',
      label: '备注',
      dataField: 'custom-info',
      elementProps: {
        width: '200px'
      },
      extendProps: {
        componentKey: 'customInfo'
      }
    }
  ]
})

const getList = () => {
  table.loading = true
  setTimeout(() => {
    table.dataSource = [
      {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: false,
  customComponents: {
    customInfo: shallowRef(CustomInfo)
  }
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

分页

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px '
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    }
  ]
})

const getList = () => {
  console.log('getList', table.pagination)
  table.loading = true
  setTimeout(() => {
    const baseIndex =
      (((table.pagination || {}).current || 1) - 1) * ((table.pagination || {}).pageSize || 10)
    let tableList: Array<object> = []
    for (let i = 1; i <= ((table.pagination || {}).pageSize || 10); i++) {
      tableList.push({
        id: baseIndex + i,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      })
    }
    table.dataSource = tableList
    table.loading = false
  }, 200)
}

const handleChange = (newPagination, filters, sorter, extra) => {
  console.log('handleChange', newPagination, filters, sorter, extra)
  ;(table.pagination || {}).current = newPagination.current
  ;(table.pagination || {}).pageSize = newPagination.pageSize
  getList()
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: {
    current: 1,
    pageSize: 10,
    total: 500,
    showTotal: (total: number) => `共${total}条`,
    showSizeChanger: true,
    showQuickJumper: true
  },
  elementProps: {
    onChange: handleChange
  }
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

排序

<template>
  <div class="common-table-container">
    <ca-common-table v-bind="table" />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonSorter, CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px '
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px',
        sorter: true
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px',
        sorter: true
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    }
  ]
})

const getList = () => {
  console.log('getList', table.pagination)
  table.loading = true
  setTimeout(() => {
    const baseIndex =
      (((table.pagination || {}).current || 1) - 1) * ((table.pagination || {}).pageSize || 10)
    table.dataSource = [
      {
        id: baseIndex + 1,
        date: '2016-05-02',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 2,
        date: '2016-05-04',
        name: '钱小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: baseIndex + 3,
        date: '2016-05-01',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        id: baseIndex + 4,
        date: '2016-05-03',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        id: baseIndex + 5,
        date: '2016-05-02',
        name: '周小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 6,
        date: '2016-05-04',
        name: '钱小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: baseIndex + 7,
        date: '2016-05-01',
        name: '郑小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        id: baseIndex + 8,
        date: '2016-05-03',
        name: '冯小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        id: baseIndex + 9,
        date: '2016-05-02',
        name: '陈小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 10,
        date: '2016-05-04',
        name: '褚小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }
    ]
    // 模拟后排序
    const sortField = (table.sorter || {}).sortField
    if (sortField) {
      if ((table.sorter || {}).sortOrder === 'ascend') {
        table.dataSource.sort((a, b) => {
          if (a[sortField] < b[sortField]) {
            return -1
          } else if (a[sortField] > b[sortField]) {
            return 1
          } else {
            return 0
          }
        })
      } else {
        table.dataSource.sort((a, b) => {
          if (a[sortField] < b[sortField]) {
            return 1
          } else if (a[sortField] > b[sortField]) {
            return -1
          } else {
            return 0
          }
        })
      }
    }
    table.loading = false
  }, 200)
}

const handleChange = (newPagination, filters, sorter, extra) => {
  console.log('handleChange', newPagination, filters, sorter, extra)
  ;(table.pagination || {}).current = newPagination.current
  ;(table.pagination || {}).pageSize = newPagination.pageSize
  if (sorter.field) {
    ;((table.sorter || {}) as CommonSorter).sortField = sorter.field
    ;((table.sorter || {}) as CommonSorter).sortOrder = sorter.order
  }
  getList()
}

const table = reactive<CommonTable>({
  loading: false,
  dataSource: [] as Array<any>,
  columns,
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: false
  },
  sorter: {
    sortField: '',
    sortOrder: 'decend'
  },
  elementProps: {
    onChange: handleChange
  }
})

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>

新增

<template>
  <div class="common-table-container">
    <ca-common-table
      v-bind="{
        ...table,
        emitRegister
      }"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { CommonTable, TableField } from '#/castor-antdv'

const columns = computed<Array<TableField>>(() => {
  return [
    {
      type: 'index',
      label: '序号',
      dataField: 'index',
      elementProps: {
        width: '60px '
      }
    },
    {
      type: 'default',
      label: '日期',
      dataField: 'date',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '姓名',
      dataField: 'name',
      elementProps: {
        width: '100px'
      }
    },
    {
      type: 'default',
      label: '地址',
      dataField: 'address',
      elementProps: {
        width: '120px'
      }
    }
  ]
})

const onTableChange = (newPagination, filters, sorter, extra) => {
  console.log('onTableChange', newPagination, filters, sorter, extra)
  ;(table.pagination || {}).current = newPagination.current
  ;(table.pagination || {}).pageSize = newPagination.pageSize
  getList()
}

const table = reactive<CommonTable>({
  loading: false,
  title: '测试表格',
  dataSource: [] as Array<any>,
  columns,
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0
  },
  addCommand: {
    text: '新建',
    command: 'handleAdd',
    visibleValidator: () => true,
    disableValidator: () => {}
  },
  elementProps: {
    onChange: onTableChange
  }
})

const getList = () => {
  console.log('getList', table.pagination || {})
  table.loading = true
  setTimeout(() => {
    const baseIndex =
      (((table.pagination || {}).current || 1) - 1) * ((table.pagination || {}).pageSize || 10)
    table.dataSource = [
      {
        id: baseIndex + 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: baseIndex + 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        id: baseIndex + 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        id: baseIndex + 5,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 6,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: baseIndex + 7,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        id: baseIndex + 8,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        id: baseIndex + 9,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: baseIndex + 10,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }
    ]
    table.loading = false
  }, 200)
}

const handleAdd = () => {
  console.log('handleAdd')
}

const emitRegister = {
  handleAdd
}

getList()
</script>

<style lang="scss" scoped>
.common-table-container {
  background: white;
  padding: 12px;
}
</style>