动态表格

// template
// <DataTable :scroll-x="600 v-bind="config"  @actions="actions" />

// 表格配置
const { config, setRowKey, setColumns, setRequest, setToolbar, setAction } = useDataTable()

// 设置行主键
setRowKey('id')

// 请求数据
setRequest(
  (param: any) => {
    return mockLists(param)
  },
  {
    defaultParams: [
      {
        page: 1,
        pagesize: 30,
      },
    ],
  },
)

// 工具栏
setToolbar(['new', 'reload', 'columns', {
  title: '导出',
  icon: 'i-bx:export',
  action: () => {
    window.$message.info('点击了导出')
  },
}])


// 添加操作按钮
setAction([
  {
    text: '其他',
    type: 'warning',
    key: 'other',
  },
])

// 自定义渲染操作栏
// setAction((row) => {
//   return h('div', '定义操作栏')
// })

// 自定义渲染整个操作栏（包括头部）
// setAction({
//   title: '操作',
//   key: 'more',
//   align: 'center',
//   render(row) {
//     return h('div', '自定义操作')
//   },
// })

// 点击了对应行操作
function actions(data: any) {
  console.log('action', data)
  showDrawer.value = true
  drawerAction.value = data.action
}

setColumns([
  {
    title: '编号',
    key: 'id',
    width: 70,
    align: 'left',
    // align: 'center',
  },
  {
    title: '用户名',
    key: 'username',
  },
  {
    title: '邮箱',
    key: 'email',
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: '创建时间',
    key: 'created_at',
    ellipsis: {
      tooltip: true,
    },
  },
])