UI3/src/components/Table/VbTreeTable.vue

<script setup lang="ts">
import { ref, withDefaults } from "vue"
import VbDataTable from "./VbDataTable.vue"
import type { Sort, Header, Scroll } from "@/components/Table/table-partials/models"
import type { AxiosRequestConfig } from "axios"
const props = withDefaults(
  defineProps<{
    expandDepth?: number
    intervalLeft?: number
    iconField?: string
    keyField?: string
    parentField?: string
    childrenField?: string
    header: Array<Header>
    url?: string
    method?: string
    configs?: AxiosRequestConfig
    queryParams?: any
    data?: Array<any>
    total?: number //总数
    selectedItems?: Array<any>
    scroll?: Scroll
    pagination?: boolean //是否分页
    currentPage?: number //当前页数
    //itemsPerPage?: number //每页数量
    pageArray?: Array<number> //下拉选择每页数量
    pageDropdown?: boolean //是否下拉选择
    maxVisibleButtons?: number // 显示分页按钮数量
    hasCheckbox?: boolean //是否有选择框
    checkboxField?: string //选择框字段
    checkMultiple?: boolean //是否多选
    sortField?: string //排序字段
    sortOrder?: "asc" | "desc"
    loading?: boolean //加载中
    fixedColumn?: boolean //固定列
    fixedNumber?: number //左边固定列数
    fixedRightNumber?: number //右边固定列数
    emptyTableText?: string
    tableBoxClass?: string
    tableClass?: string
    headerClass?: string
    bodyClass?: string
    thTrClass?: string
    tdTrClass?: string
    rowSpanSuffix?: string //rowsapn 的字段后缀 后台应该组成 `${字段}${后缀}`
  }>(),
  {
    currentPage: 1,
    method: "get",
    selectedItems: () => {
      return []
    },

    hasCheckbox: false,
    checkMultiple: false,
    sortOrder: "asc",
    pagination: false,
  }
)
const emits = defineEmits<{
  (e: "update:selectedItems", v: Array<any>): void
  (e: "update:currentPage", v: number): void
  (e: "page-change", v: number): void
  (e: "on-items-per-page-change", v: number): void
  (e: "on-sort", v: Sort): void
  (e: "on-items-change", isChecked: boolean, v: any, row: any): void
  (e: "on-items-select", row: any): void
  (e: "on-items-all-change", isChecked: boolean, rows: Array<any>): void
}>()
const selectedItems = ref(props.selectedItems)
const currentPage = ref(props.currentPage)

const pageChange = (page: number) => {
  emits("update:currentPage", page)
  emits("page-change", page)
}
const onSort = (sort: Sort) => {
  emits("on-sort", sort)
}
const onSelectAll = (isChecked: boolean, rows: Array<any>) => {
  emits("on-items-all-change", isChecked, rows)
}
const onItemChange = (isChecked: boolean, v: any, row: any) => {
  emits("update:selectedItems", selectedItems.value)
  emits("on-items-change", isChecked, v, row)
}
const onItemSelect = (row: any) => {
  emits("on-items-select", row)
}
const onItemsPerPageChange = (v: number) => {
  emits("on-items-per-page-change", v)
}
const treeTable = ref()
function search() {
  treeTable.value.search()
}
defineExpose({ search })
</script>
<template>
  <VbDataTable
    ref="treeTable"
    v-model:selected-items="selectedItems"
    :isTree="true"
    :header="header"
    :interval-left="intervalLeft"
    :icon-field="iconField"
    :key-field="keyField"
    :children-field="childrenField"
    :parent-field="parentField"
    :expand-depth="expandDepth"
    :data="data"
    :url="url"
    :configs="configs"
    :method="method"
    :query-params="queryParams"
    :scroll="scroll"
    :loading="loading"
    :pagination="pagination"
    v-model:current-page="currentPage"
    :max-visible-buttons="maxVisibleButtons"
    :items-per-page-dropdown-enabled="pageDropdown"
    :items-per-page-dropdown-array="pageArray"
    :hasCheckbox="hasCheckbox"
    :checkboxField="checkboxField"
    :checkMultiple="checkMultiple"
    :sortField="sortField"
    :sortOrder="sortOrder"
    :fixedColumn="fixedColumn"
    :fixedNumber="fixedNumber"
    :fixedRightNumber="fixedRightNumber"
    :emptyTableText="emptyTableText"
    :tableBoxClass="tableBoxClass"
    :tableClass="tableClass"
    :headerClass="headerClass"
    :bodyClass="bodyClass"
    :thTrClass="thTrClass"
    :tdTrClass="tdTrClass"
    :rowSpanSuffix="rowSpanSuffix"
    @page-change="pageChange"
    @on-items-change="onItemChange"
    @on-items-all-change="onSelectAll"
    @on-sort="onSort"
    @on-items-select="onItemSelect"
    @on-items-per-page-change="onItemsPerPageChange"
    v-bind="$attrs"
  >
    <template v-for="(_, name) in $slots" #[name]="{ row: item }">
      <slot :name="name" :row="item" />
    </template>
  </VbDataTable>
</template>