> 表格组件

```vue
<def-table
  :data="tableData"
  :list="tableColumnList"
  v-bind="tableOptions"
  @cellConfirm="handleCellConfirm"
  @rowAdd="handleRowAdd"
  @rowConfirm="handleRowConfirm"
  @rowDelete="handleRowDelete">
  <template #name="{row, $index}">
    {{row['name']}} &#45;&#45; {{$index}}
  </template>
</def-table>
```

```js
export interface ITableData {
  id: string | number
  date: string | Date
  name: string
  address: string
}
// 表格数据
const tableData = ref<ITableData[]>([])
// 表格项配置
const tableColumnList: ITableColumn[] = [
  {
    label: '时间',
    prop: 'date',
    icon: 'timer'
  },
  {
    label: '姓名',
    prop: 'name',
    icon: 'user',
    editable: true
  },
  {
    label: '地址',
    prop: 'address'
  },
  {
    label: '操作项',
    prop: 'action',
    action: true
  }
]
// 表单配置
const tableOptions: IElTable = {
  stripe: true,
  border: true
}
setTimeout(() => {
  tableData.value = [
    {
      id: '001',
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '002',
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '003',
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '004',
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
}, 200)
const handleCellConfirm = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleCellConfirm', row)
}
const handleRowAdd = () => {
  console.log('父组件触发 - handleRowAdd')
}
const handleRowConfirm = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleRowConfirm', row)
}
const handleRowDelete = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleRowDelete', row)
}
```