Table

内置数据表格组件，需要和怪兽框架配合使用。

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <dk-table ref="DkTableRef" table-api="/gs_know/admin.test?abc=1" :cache-table="false">
    <template #switch_slot="{ row }">
      <span>{{ row.switch }}22</span>
    </template>
  </dk-table>
  <el-button type="primary" @click="test()">测试</el-button>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const DkTableRef = ref()
const test = () => {
  console.log('DkTableRef', DkTableRef.value)
}
onMounted(() => {
  DkTableRef.value.DkTable.onClickButton((event, data) => {
    console.log('event', event, data)
  })
})
</script>

组件配置

Table Props

属性	说明	类型	默认值
tableApi	表格API对象的引用，用于操作表格	String	''
cacheTable	是否启用表格数据缓存功能	Boolean	true
tableBefore	在表格初始化或数据更新前执行的回调函数，返回一个对象供表格组件使用	Function returning Object	() => { return {} }
tableAfter	在表格初始化或数据更新后执行的回调函数，返回一个对象供表格组件使用	Function returning Object	() => { return {} }
buttons	表格工具栏中显示的按钮列表，包括：刷新、新增、导出CSV、编辑、删除、复杂搜索、快速搜索、列显示控制、回收站	Array of Strings	['refresh', 'add', 'export_csv', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay', 'recycle']
hideButtons	指定隐藏的工具栏按钮列表，这些按钮将不会在表格中显示	Array of Strings	[]

TableBefore 和 TableAfter

tableBefore 和 tableAfter 是两个回调函数，用于在表格初始化或数据更新前后执行一些操作。

比如对标签进行分组，内嵌展示组内标签，以下为示例代码：

<template>
  <div class="">
    <dk-table ref="DkTableRef" :table-api="tableApi" :table-before="tableBefore" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getDev } from '@/utils/auth'

defineOptions({
  name: 'RouteTagList'
})
const DkTableRef = ref()
const tableApi = '/table-api'
// 假如为内嵌表格，可以通过props传递groupId，然后在tableBefore中配置请求参数
const props = defineProps({
  groupId: {
    default: 0,
    type: Number
  }
})

const tableBefore = ref({
  // 表示在表格所有Api请求之前执行的回调函数
  api: () => {
    // 配置请求参数
    DkTableRef.value.DkTable.api.configureRequest({
      params: {
        // 传递groupId参数
        groupId: props.groupId
      }
    })
  },
  // 表格顶栏按钮事件统一响应之前执行的回调函数
  onTableHeaderAction: () => {
    const actionUrl = DkTableRef.value.DkTable.api.actionUrl
    // 配置表单请求地址
    actionUrl.set('form', tableApi + '/form?groupId=' + props.groupId)
  },
  // 表格内的事件统一响应之前执行的回调函数
  onTableAction: () => {
    const actionUrl = DkTableRef.value.DkTable.api.actionUrl
    // 配置表单请求地址
    actionUrl.set('form', tableApi + '/form?groupId=' + props.groupId)
  }
})
</script>
<style></style>

TableBefore

回调函数名	说明	参数
api	所有的API请求前执行	{name}
getIndex	获取表格数据
getTable	获取表格信息
getRecycleTable	获取回收站表格信息
getRecycleIndex	获取回收站表格数据
showRecycleTable	显示回收站弹窗
onTableAction	表格内的事件统一响应	{ event, data }
postDel	执行删除
onTableDblclick	双击表格行数据	{ row, column }
onTableHeaderAction	表格顶栏按钮事件统一响应	{ event, data }

WARNING

注意：回调名为api中的name不仅仅含有默认的，getIndex获取表格数据、getTable获取表格信息、getRecycleIndex获取回收站数据 、getRecycleTable获取回收站表格信息、fieldChange参数值改变例如switch开关调用、postDel删除行、toggleForm打开表单，通常时候用api就可以省略很多事情

TableAfter

回调函数名	说明	参数
getIndex	获取表格数据	res：请求到的值
getTable	获取表格信息	res：请求到的值（缓存/非缓存）
onTableAction	表格内的事件统一响应	{ event, data }
postDel	执行删除	res：请求到的值
onTableDblclick	双击表格行数据	{ row, column }
onTableHeaderAction	表格顶栏按钮事件统一响应	{ event, data }

Table Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

Table Slots

当前表格的插槽分为多个位置，具体如下：

插槽名	说明
refreshPrepend	表格顶栏刷新按钮前面插槽
refreshAppend	表格顶栏刷新按钮后面插槽
AddButtonAppend	表格顶栏添加按钮后面插槽
ExportButtonAppend	表格顶栏导出按钮后面插槽
EditButtonAppend	表格顶栏编辑按钮后面插槽
DeleteButtonAppend	表格顶栏删除按钮后面插槽
UnfoldButtonAppend	表格顶栏展开按钮后面插槽
RecycleButtonAppend	表格顶栏回收站按钮后面插槽
columnPrepend	表格内系统 el-table-column 前
columnAppend	表格内系统 el-table-column 后
自定义	可通过怪兽框架自定义slot，使用后，将替换掉默认的column内容

<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" table-api="/table-api">
      <!--在回收站后面添加一个自定义的按钮-->
      <template #RecycleButtonAppend>
        <el-button type="warning" class="m-l-1" @click="onCheck()">同步收益</el-button>
      </template>
      <!--自定义slot-->
      <template #is_share_slot="{ row }">
        <el-tag v-if="row.is_share" type="danger">是</el-tag>
        <el-tag v-else>否</el-tag>
      </template>
      <template #ad_count_slot="{ row }">
        <el-tag v-if="row.ad_count > 0" type="danger">{{ row.ad_count }}</el-tag>
        <el-tag v-else>{{ row.ad_count }}</el-tag>
      </template>
    </dk-table>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  defineOptions({
    name: 'SharingList'
  })
  const DkTableRef = ref()
  const showUpdateIncome = ref(false)
  const chooseItem: any = ref({})
  const onCheck = (row) => {
    // 顶部按钮事件
    chooseItem.value = row
    showUpdateIncome.value = true
  }
</script>

<style></style>

Table Exposes

名称	说明	Type
DkTable	表格使用到的Table类	Class
FormRef	数据表格中使用的DkForm的Ref
TableRef	Element Table的默认Ref

DkTable

表格组件内部状态或方法对象，包含了一系列属性和方法。按照属性/方法名、类型（或值）和简要说明进行归纳

属性/方法名	类型/值	说明
after	{}	初始化或数据更新后的回调函数返回的对象
api	dkTableApi {controllerUrl: '/adminapi/table_test/', actionUrl: Map(11), requestConfig: {…}}	表格API对象，包含控制器URL、动作URL映射表和请求配置信息
before	{}	初始化或数据更新前的回调函数返回的对象
buttonCallback	(event, data) => {...}	处理表格按钮点击事件的回调函数
comSearch	Proxy(Object) {form: {…}, fieldData: Map(14)}	复杂搜索相关对象，包含表单数据和字段数据映射
dragSort	() => {...}	用于拖拽排序的方法
exportCsv	() => {...}	导出表格数据为CSV格式的方法
form	Proxy(Object) {ref: Proxy(Object), operateIds: Array(0), edit_id: 0}	表单相关对象，包含表单引用、操作ID数组和编辑ID
getIndex	() => {...}	获取当前表格索引的方法
getRecycleIndex	() => {...}	获取回收站表格索引的方法
getRecycleTable	(cache = false) => {...}	获取回收站表格数据的方法，可选择是否使用缓存
getTable	(cache = false) => {...}	获取当前表格数据的方法，可选择是否使用缓存
initComSearch	(query = {}) => {...}	初始化复杂搜索的方法，接受查询参数
onSubmit	() => {...}	提交表单的方法
onTableAction	(event, data) => {...}	处理表格行操作事件的回调函数
onTableDblclick	(row, column) => {...}	处理表格单元格双击事件的回调函数，接收行数据和列信息
onTableHeaderAction	(event, data) => {...}	处理表格头部操作事件的回调函数
postDel	(ids) => {...}	发送删除请求的方法，接收待删除记录的ID数组
recycleTable	Proxy(Object) {ref: undefined, pk: 'id', data: Array(0), loading: true, columnLoading: true, …}	回收站表格相关对象，包含表格引用、主键字段、数据、加载状态等
table	Proxy(Object) {ref: Proxy(Object), pk: 'id', data: Array(10), remark: null, loading: false, …}	当前表格相关对象，包含表格引用、主键字段、数据、备注、加载状态等
toggleForm	(operate = "", operateIds = []) => {...}	切换表单显示状态的方法，接受操作类型和操作ID数组
url	"/adminapi/table_test"	表格数据请求的基础URL

类型定义

组件导出以下类型定义

import type { TableProps } from '@vipl520/dk-ui'

样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称	默认值
--dk-table-background	-