#### 基础样例

包含：翻页、查询、排序功能

```vue
<template>
  <sd-data-table
    data-url="api/framework/v1/user-manager/all/users_query"
    :columns="columns"
    :row-key="'account'"
    :search-fields="['name', 'account']"
  >
  </sd-data-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          sorter: true,
          dataIndex: 'account',
          title: 'ID',
        },
        {
          title: '状态',
          dataIndex: 'status',
        },
      ],
    }
  },
}
</script>
```

#### 复杂样例

在基础样例上增加了：自定义列格式、操作按钮、复选框控制、点击行事件的处理等

```vue
<template>
  <sd-data-table
    ref="dataTable"
    data-url="api/framework/v1/user-manager/all/users_query"
    :columns="columns"
    :show-selection="
      (record) => {
        // 只有部分行有复选框
        return record.account.includes('a')
      }
    "
    :actions="actions"
    :row-key="'account'"
    :search-fields="['name', 'account']"
    @rowClick="rowClick"
  >
    <template v-slot:name="text">
      <a>{{ text }} -后缀</a>
    </template>
  </sd-data-table>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'

export default {
  methods: {
    rowClick(record, { rowIndex }) {
      alert(`记录内容：${JSON.stringify(record)}
rowIndex：${rowIndex}`)
    },
  },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          sorter: true,
          sortDirections: ['ascend'],
          defaultSortOrder: 'ascend',
          sdClickable: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          sorter: true,
          title: 'ID',
          dataIndex: 'account',
          width: '20%',
        },
        {
          title: '状态',
          dataIndex: 'status',
          sdRender: TableColumnTypes.statusBadge, // 特殊处理的列，红绿灯
        },
        {
          title: '注册时间',
          sdClickable: true,
          sdRender: TableColumnTypes.dateTime, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
          dataIndex: 'registerTime',
          width: '20%',
        },
      ],
      actions: [
        {
          label: '批量操作',
          id: 'batch',
          type: TableActionTypes.batch, // 批处理按钮，选中文档时才能点击
          permission: 'oaBaseBusinessType-create', // data-table 的权限，需要写完整的
          callback: (keys) => {
            alert('选中记录\n' + JSON.stringify(keys))
            // 操作完成后，清除已选中的条目
            this.$refs.dataTable.clearSelection()
          },
        },
        {
          label: '刷新',
          title: '刷新按钮的说明信息',
          id: 'refresh', // 没写type，一般按钮
          permission: null, // 纯前端操作，不需要权限控制
          callback: () => {
            // 返回一个promise，按钮会进入loading状态
            return this.$refs.dataTable.refresh(true)
          },
          children: [
            {
              label: '另一个刷新',
              title: '刷新按钮的说明信息',
              id: 'refresh2',
              permission: null, // 纯前端操作，不需要权限控制
              callback: () => {
                // 返回一个promise，按钮会进入loading状态
                return new Promise((resolve) => {
                  setTimeout(resolve, 3000)
                })
              },
            },
          ],
        },
        {
          label: '测试',
          title: '测试按钮的说明信息',
          id: 'test',
          type: TableActionTypes.inline, // 数据行内的按钮，回调参数为record, {rowIndex}
          callback: this.rowClick,
        },
        {
          label: '已读',
          id: 'read',
          type: TableActionTypes.inline,
          callback: this.rowClick,
          hidden(record, rowIndex) {
            // 按条件隐藏按钮
            return rowIndex % 2 === 0
          },
        },
      ],
    }
  },
}
</script>
```

#### 导出 Excel

表格自带导出 Excel 功能：导出所有行，搜索条件、排序列均生效

```vue
<template>
  <sd-data-table
    data-url="api/framework/v1/user-manager/all/users_query"
    ref="dataTable"
    :columns="columns"
    :actions="actions"
    :row-key="'account'"
  >
  </sd-data-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          sorter: true,
          dataIndex: 'account',
          title: 'ID',
        },
        {
          title: '状态',
          dataIndex: 'status',
        },
      ],
      actions: [
        {
          label: '导出',
          id: 'export',
          permission: null,
          callback: () => this.$refs.dataTable.exportExcel(),
        },
      ],
    }
  },
}
</script>
```
