table组件修复懒加载搜索bug

UI/VA.Vue_V1.0/src/components/table/VbDataTable.vue

@@ -29,6 +29,7 @@ const props = withDefaults(
     checkPageMultiple?: boolean //是否跨页多选
     hasCheckbox?: boolean //是否有选择框 (checkMultiple 和 checkPageMultiple 为true 时不起作用)
     rowClickFun?: (r: any) => void
+    rowDbClickFun?: (r: any) => void
     sortField?: string //排序字段
     sortOrder?: "asc" | "desc"
     pagination?: boolean //是否分页
@@ -39,6 +40,7 @@ const props = withDefaults(
     fixedRightNumber?: number //右边固定列数
     emptyTableText?: string
     maxVisibleButtons?: number // 显示分页按钮数量
+    tableTitle?: string //排序字段
     tableBoxClass?: string
     tableClass?: string
     headerClass?: string
@@ -55,11 +57,13 @@ const props = withDefaults(
     childrenField?: string
     leafField?: string
     isLazy?: boolean
+    isLazySearch?: boolean
     rootId?: string
     searchFormRowItems?: Array<VbFormRowItem>
     searchFormItems?: Array<VbFormItem>
     searchFormSpan?: number
     showToolbar?: boolean //是否显示toolbar
+    showSearchBar?: boolean //是否显示Searchbar
     showRightToolbar?: boolean //是否显示右边的toolbar
     showRightSearchBtn?: boolean //初始是否显示搜索栏
     showRightColumnBtn?: boolean //是否显示右边toolbar的选择列按钮
@@ -108,6 +112,7 @@ const props = withDefaults(
     isTree: false,
     childrenField: "children",
     showToolbar: true,
+    showSearchBar: true,
     showRightToolbar: true,
     showRightColumnBtn: true,
     showRightSearchBtn: true,
@@ -131,7 +136,7 @@ const emits = defineEmits<{
   (e: "on-items-all-change", isChecked: boolean, rows: Array<any>): void
 }>()
 const id = ref("")
-const checkboxField = ref(props.keyField ? props.keyField : props.header[0].field)
+const keyField = ref(props.keyField ? props.keyField : props.header[0].field)
 const currentPage = ref(props.currentPage)
 const itemsInTable = ref(props.pagination ? props.pageArray[0] : 1000)
 const selectedIds = ref(props.selectedIds)
@@ -167,7 +172,7 @@ const dataToDisplay = computed(() => {
   }
 })
 const totalItems = computed(() => {
-  if (props.url) {
+  if (props.remoteFun || props.url) {
     return remoteTotal.value
   } else if (props.data) {
     if (props.data.length <= itemsInTable.value) {
@@ -232,14 +237,21 @@ function remote(id?: string) {
   let curData: any = {}
   if (props.isLazy) {
     curData = treeAllData.find((v: any) => {
-      return v[checkboxField.value] == id
+      return v[keyField.value] == id
     })
+
     if (!id && !curData) {
       throw new Error("懒加载模式,未获取到 parentId ,请检查")
     }
+
     if (curData?.children && curData?.children.length) {
-      return
+      if (props.isLazySearch) {
+        curData.children = []
+      } else {
+        return Promise.resolve(0)
+      }
     }
+
     if (!props.keyField) {
       throw new Error("懒加载模式,请配置 keyField")
     }
@@ -247,58 +259,87 @@ function remote(id?: string) {
   }
   tableLoading.value = true
 
-  if (props.remoteFun) {
-    props.remoteFun(params).then((res: any) => {
-      processData(res.rows || res.data, res.total)
-    })
-  } else if (props.url) {
-    const queryParam = props.method.toLocaleLowerCase() == "get" ? { params } : { data: params }
-
-    const configs = Object.assign(
-      { url: props.url, method: props.method, successAlert: false },
-      props.configs,
-      queryParam
-    )
-    Rs.request(configs)
-      .then((res: any) => {
+  return new Promise((r) => {
+    if (props.remoteFun) {
+      props.remoteFun(params).then((res: any) => {
         processData(res.rows || res.data, res.total)
       })
-      .catch(() => {
-        tableLoading.value = false
-      })
-  }
+    } else if (props.url) {
+      const queryParam = props.method.toLocaleLowerCase() == "get" ? { params } : { data: params }
 
-  function processData(data: any, total: number) {
-    remoteTotal.value = total || 0
-    tableLoading.value = false
-    if (props.isLazy) {
-      if (curData) {
-        curData.children = data
-        treeAllData.push(...curData.children)
-      } else {
-        treeData.push(...data)
-        treeAllData.push(...treeData)
-      }
-      remoteData.value = JSON.parse(JSON.stringify(treeData))
-    } else {
-      remoteData.value = data
+      const configs = Object.assign(
+        { url: props.url, method: props.method, successAlert: false },
+        props.configs,
+        queryParam
+      )
+      Rs.request(configs)
+        .then((res: any) => {
+          processData(res.rows || res.data, res.total)
+        })
+        .catch(() => {
+          tableLoading.value = false
+        })
     }
-    if (props.checkPageMultiple) {
-      remoteData.value.forEach((v: any) => {
-        if (
-          !allData.value.find((vv: any) => {
-            return vv[checkboxField.value] == v[checkboxField.value]
+
+    function processData(data: any, total: number) {
+      remoteTotal.value = total || 0
+      tableLoading.value = false
+      let all: any = []
+      if (props.isLazy) {
+        if (props.isLazySearch) {
+          Object.keys(queryParams.value).forEach((v) => {
+            queryParams.value[v] = undefined
           })
-        ) {
-          allData.value.push(v)
+          if (!data.length) {
+            const item = {}
+            item[props.iconField ?? ""] = "没有查询到字节点"
+            item[props.leafField ?? ""] = true
+            item[props.parentField ?? ""] = id
+            data.push(item)
+          }
+          r(1)
         }
-      })
-    } else {
-      allData.value = remoteData.value
-    }
 
-    nextTick(bindEvent)
-  }
+        if (curData) {
+          curData.children = []
+          data.forEach((v: any) => {
+            const index = treeAllData.findIndex((vv: any) => {
+              return vv[keyField.value] == v[keyField.value]
+            })
+            if (index < 0) {
+              treeAllData.push(v)
+              curData.children.push(treeAllData[treeAllData.length - 1])
+            } else {
+              curData.children.push(treeAllData[index])
+            }
+          })
+        } else {
+          treeData.push(...data)
+          treeAllData.push(...treeData)
+        }
+        remoteData.value = JSON.parse(JSON.stringify(treeData))
+        all = treeAllData
+      } else {
+        remoteData.value = data
+        all = data
+      }
+      if (props.checkPageMultiple) {
+        all.forEach((v: any) => {
+          if (
+            !allData.value.find((vv: any) => {
+              return vv[keyField.value] == v[keyField.value]
+            })
+          ) {
+            allData.value.push(v)
+          }
+        })
+      } else {
+        allData.value = all
+      }
+
+      nextTick(bindEvent)
+    }
+  })
 }
 
 function lazyLoad(id: string) {
@@ -320,7 +361,7 @@ const defaultHandleFuns = {
       return
     }
     if (props.getEntiyFun) {
-      props.getEntiyFun(row[checkboxField.value]).then((res) => {
+      props.getEntiyFun(row[keyField.value]).then((res) => {
         emits("update:formData", res.data)
         if (props.modal) {
           props.modal.show()
@@ -345,7 +386,7 @@ const defaultHandleFuns = {
       message.alertError("删除接口方法未配置，请联系管理员")
       return
     }
-    const ids = rows.map((v: any) => v[checkboxField.value])
+    const ids = rows.map((v: any) => v[keyField.value])
     message
       .confirm('是否确认删除编号为"' + ids.join("，") + '"的数据项？')
       .then(() => {
@@ -422,7 +463,7 @@ function search() {
   query()
 }
 function bindEvent() {
-  if (props.rowClickFun) {
+  if (props.rowClickFun || props.rowDbClickFun) {
     const tableBox = document.getElementById(id.value)
     const table = tableBox?.querySelector("table")
     const tableBody = table?.querySelector("tbody")
@@ -430,12 +471,18 @@ function bindEvent() {
     trs?.forEach((v) => {
       const trId = v.id.replace("tr_", "")
       const row = allData.value.find((vv: any) => {
-        return vv[checkboxField.value] == trId
-      })
-
-      v.addEventListener("click", () => {
-        props.rowClickFun && props.rowClickFun(row)
+        return vv[keyField.value] == trId
       })
+      if (props.rowClickFun) {
+        v.addEventListener("click", () => {
+          props.rowClickFun && props.rowClickFun(row)
+        })
+      }
+      if (props.rowDbClickFun) {
+        v.addEventListener("dbclick", () => {
+          props.rowDbClickFun && props.rowDbClickFun(row)
+        })
+      }
     })
   }
 }
@@ -447,10 +494,11 @@ function getSelected() {
   return items[0]
 }
 function getSelecteds() {
+  console.log("GETS", selectedIds.value, keyField.value, allData.value)
   const selectedArr: Array<any> = []
   selectedIds.value.forEach((v) => {
     const item = allData.value.find((vv: any) => {
-      return vv[checkboxField.value] == v
+      return vv[keyField.value] == v
     })
     selectedArr.push(item)
   })
@@ -513,9 +561,11 @@ defineExpose({ search, getSelectedIds, getSelected, getSelecteds, getData, defau
     <TableToolbar
       v-if="showToolbar"
       :selected-rows="selectedIds.length"
+      :show-search-bar="showSearchBar"
       :show-right-toolbar="showRightToolbar"
       :show-right-search-btn="showRightSearchBtn"
       :show-right-column-btn="showRightColumnBtn"
+      :table-title="tableTitle"
       :header="header"
       :queryParams="queryParams"
       :searchFormItems="searchFormItems"
@@ -538,7 +588,7 @@ defineExpose({ search, getSelectedIds, getSelected, getSelecteds, getData, defau
       :header="displayColumns"
       :data="dataToDisplay"
       v-model:selected-ids="selectedIds"
-      :checkbox-field="checkboxField"
+      :key-field="keyField"
       :check-multiple="checkMultiple || checkPageMultiple"
       :has-checkbox="checkMultiple || checkPageMultiple || hasCheckbox"
       :empty-table-text="emptyTableText"
@@ -558,12 +608,12 @@ defineExpose({ search, getSelectedIds, getSelected, getSelecteds, getData, defau
       :is-tree="isTree"
       :interval-left="intervalLeft"
       :icon-field="iconField"
-      :key-field="keyField"
       :parent-field="parentField"
       :children-field="childrenField"
       :leaf-field="leafField"
       :expand-depth="expandDepth"
       :lazy-load="isLazy ? lazyLoad : undefined"
+      :lazy-search="isLazySearch"
     >
       <template v-for="(_, name) in $slots" #[name]="{ row: item }">
         <slot :name="name" :row="item" />

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/TableContent.vue

@@ -11,8 +11,8 @@ const props = withDefaults(
     header: Array<Header>
     data: Array<any>
     selectedIds?: Array<unknown>
+    keyField: string
     hasCheckbox?: boolean //是否有选择框
-    checkboxField?: string //选择框字段
     checkMultiple?: boolean //是否多选
     multiplePageCheck?: boolean //跨页多选
     sortField?: string //排序字段
@@ -33,11 +33,11 @@ const props = withDefaults(
     expandDepth?: number
     intervalLeft?: number
     iconField?: string
-    keyField?: string
     parentField?: string
     childrenField?: string
     leafField?: string
-    lazyLoad?: (v: string) => void
+    lazyLoad?: (v: string) => Promise<any>
+    lazySearch?: boolean
   }>(),
   {
     selectedIds: () => {
@@ -172,10 +172,10 @@ defineExpose({
       :table="table"
       :header="header"
       :data="data"
+      :key-field="keyField"
       v-model:selected-items="selectedIds"
       :fixed-number="fixedNumber"
       :check-all="checkAll"
-      :checkbox-field="checkboxField"
       :has-checkbox="hasCheckbox"
       :check-multiple="checkMultiple"
       :multiple-page-check="multiplePageCheck"
@@ -190,12 +190,12 @@ defineExpose({
       :is-tree="isTree"
       :interval-left="intervalLeft"
       :icon-field="iconField"
-      :key-field="keyField"
       :children-field="childrenField"
       :parent-field="parentField"
       :leaf-field="leafField"
       :expand-depth="expandDepth"
       :lazy-load="lazyLoad"
+      :lazy-search="lazySearch"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="{ row: item }">
         <slot :name="name" :row="item" />
@@ -240,7 +240,7 @@ defineExpose({
           :data="data"
           :header="header"
           :has-checkbox="hasCheckbox"
-          :checkbox-field="checkboxField"
+          :key-field="keyField"
           :fixed-column="fixedColumn"
           :fixed-number="fixedNumber"
           :fixed-right-number="fixedRightNumber"
@@ -250,12 +250,12 @@ defineExpose({
           :is-tree="isTree"
           :interval-left="intervalLeft"
           :icon-field="iconField"
-          :key-field="keyField"
           :parent-field="parentField"
           :children-field="childrenField"
           :leaf-field="leafField"
           :expand-depth="expandDepth"
           :lazy-load="lazyLoad"
+          :lazy-search="lazySearch"
         >
           <template v-for="(_, name) in $slots" v-slot:[name]="{ row: item }">
             <slot v-if="!name.toString().endsWith('_header')" :name="name" :row="item" />
@@ -296,6 +296,7 @@ defineExpose({
       :expand-depth="expandDepth"
       :leaf-field="leafField"
       :lazy-load="lazyLoad"
+      :lazy-search="lazySearch"
     >
       <template v-for="(_, name) in $slots" #[name]="{ row: item }">
         <slot :name="name" :row="item" />

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-body/TableBodyRow.vue

@@ -7,6 +7,7 @@ const props = withDefaults(
   defineProps<{
     header: Array<Header>
     data: Array<any>
+    keyField: string
     hasCheckbox?: boolean //是否有选择框
     checkMultiple?: boolean //是否多选
     checkboxField?: string //选择框字段
@@ -19,12 +20,12 @@ const props = withDefaults(
     expandDepth?: number
     intervalLeft?: number
     iconField?: string
-    keyField?: string
     parentField?: string
     childrenField?: string
     leafField?: string
-    lazyLoad?: (v: string) => void
+    lazyLoad?: (v: string) => Promise<any>
     isLazy?: boolean
+    lazySearch?: boolean
   }>(),
   {
     currentlySelectedItems: () => {
@@ -32,7 +33,6 @@ const props = withDefaults(
     },
     checkboxEnabled: true,
     checkMultiple: true,
-    checkboxField: "",
     fixedColumn: false,
     fixedNumber: 0,
     fixedRightNumber: 0,
@@ -48,7 +48,7 @@ const emits = defineEmits<{
 const onChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   const row = props.data.find((v: any) => {
-    return v[props.checkboxField] == target.value
+    return v[props.keyField] == target.value
   })
 
   emits("on-change", target.checked, target.value, row)
@@ -61,22 +61,30 @@ const onSelectItemsChange = (isChecked: boolean, selectedValue: string, row: any
 function iconClick(e: Event) {
   const target = (e.target as HTMLElement).closest(".icon") as HTMLElement
   const parent = target.closest("tr") as HTMLElement
-  const id = parent?.id
-  if (parent == null || !id) {
+  const elId = parent?.id
+  if (parent == null || !elId) {
     return
   }
   if (props.lazyLoad) {
     // 已有children可展开的直接展开,不在调用懒加载
     if (parent.className.search("hasChildren") >= 0) {
-      toggle(parent, target, id)
-    } else {
-      const parentId = id.replace("tr_", "")
-      props.lazyLoad(parentId)
-      parent.className = parent.className.replace("tr-collapse", "tr-expand")
-      target.children[0].className = target.children[0].className.replace("ki-add-folder", "ki-minus-folder")
+      if (parent.className.search("tr-expand") >= 0 || !props.lazySearch) {
+        toggle(parent, target, elId)
+        return
+      }
     }
+    const parentId = elId.replace("tr_", "")
+    props.lazyLoad(parentId).then((res) => {
+      if (res == 1 && props.lazySearch) {
+        nextTick(() => {
+          showChildren(elId)
+        })
+      }
+    })
+    parent.className = parent.className.replace("tr-collapse", "tr-expand")
+    target.children[0].className = target.children[0].className.replace("ki-add-folder", "ki-minus-folder")
   } else {
-    toggle(parent, target, id)
+    toggle(parent, target, elId)
   }
   function toggle(parent: HTMLElement, el: HTMLElement, id: string) {
     if (parent.className.search("tr-expand") >= 0) {
@@ -95,8 +103,10 @@ function iconClick(e: Event) {
       children.forEach((v) => {
         v.className = v.className.replace("show", "hide")
         v.className = v.className.replace("tr-expand", "tr-collapse")
-        const iconEl = v.children[0].children[0].children[0]
-        iconEl.className = iconEl.className.replace("ki-minus-folder", "ki-add-folder")
+        const iconEl = v.querySelector(".tree-icon")?.children[0].children[0]
+        if (iconEl) {
+          iconEl.className = iconEl.className.replace("ki-minus-folder", "ki-add-folder")
+        }
         hideChildren(v.id)
       })
     }
@@ -148,7 +158,6 @@ onMounted(init)
           :expand-depth="expandDepth"
           :check-multiple="checkMultiple"
           :has-checkbox="hasCheckbox"
-          :checkbox-field="checkboxField"
           :td-tr-class="tdTrClass"
           :row-span-suffix="rowSpanSuffix"
           :is-lazy="lazyLoad != null"
@@ -159,10 +168,10 @@ onMounted(init)
           </template>
         </TableTreeRow>
       </template>
-      <tr v-else :class="tdTrClass" :id="`tr_${row[checkboxField]}`">
+      <tr v-else :class="tdTrClass" :id="`tr_${row[keyField]}`">
         <td v-if="hasCheckbox" class="check-box">
           <div class="form-check form-check-sm form-check-custom form-check-solid">
-            <input class="form-check-input" type="checkbox" :value="row[checkboxField]" @change="onChange" />
+            <input class="form-check-input" type="checkbox" :value="row[keyField]" @change="onChange" />
           </div>
         </td>
         <template v-for="(column, i) in header" :key="i">

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-body/TableBodyTd.vue

@@ -19,7 +19,6 @@ const props = withDefaults(
   }>(),
   {
     isTree: false,
-    checkboxField: "id",
     iconField: "name",
     leafField: "isLeaf",
     depth: 0,
@@ -28,7 +27,7 @@ const props = withDefaults(
 )
 
 const isLeaf = computed(() => {
-  return !!props.row[props.leafField]
+  return props.isLazy ? !!props.row[props.leafField] : false
 })
 
 const tooltip = (col: Header) => {
@@ -73,7 +72,7 @@ onMounted(init)
       :class="{ icon: !isLeaf }"
       :style="`margin-left: ${intervalLeft * depth}px!important`"
     >
-      <template v-if="hasChildren || !isLeaf">
+      <template v-if="hasChildren || (!isLeaf && props.isLazy)">
         <KTIcon
           v-if="isLazy ? false : isExpand"
           icon-name="minus-folder"

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-body/TableTreeRow.vue

@@ -8,25 +8,22 @@ const props = withDefaults(
   defineProps<{
     header: Array<Header>
     row: any
+    keyField: string
     depth?: number
     expandDepth?: number
     currentlySelectedItems?: Array<any>
     hasCheckbox?: boolean //是否有选择框
     checkMultiple?: boolean //是否多选
-    checkboxField?: string //选择框字段
     tdTrClass?: string
     rowSpanSuffix?: string //rowsapn 的字段后缀 后台应该组成 `${字段}${后缀}`
     intervalLeft?: number
     iconField?: string
-    keyField?: string
     parentField?: string
     childrenField?: string
     leafField?: string
     isLazy?: boolean
   }>(),
   {
-    checkboxField: "id",
-    keyField: "id",
     parentField: "parent_id",
     childrenField: "children",
     iconField: "name",
@@ -78,7 +75,7 @@ onMounted(() => {
     <tr :class="trClass" :id="`tr_${row[keyField]}`" :data-parent="`tr_${row[parentField]}`">
       <td v-if="hasCheckbox" class="check-box">
         <div class="form-check form-check-sm form-check-custom form-check-solid">
-          <input class="form-check-input" type="checkbox" :value="row[checkboxField]" @change="onChange" />
+          <input class="form-check-input" type="checkbox" :value="row[keyField]" @change="onChange" />
         </div>
       </td>
       <template v-for="(column, i) in header" :key="i">
@@ -130,13 +127,12 @@ onMounted(() => {
         :row="child"
         :header="header"
         :depth="depth + 1"
+        :key-field="keyField"
         :expand-depth="expandDepth"
         :has-checkbox="hasCheckbox"
-        :checkbox-field="checkboxField"
         :td-tr-class="tdTrClass"
         :row-span-suffix="rowSpanSuffix"
         :icon-field="iconField"
-        :key-field="keyField"
         :check-multiple="checkMultiple"
         :parent-field="parentField"
         :children-field="childrenField"

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-body/TableTreeRowChild.vue

@@ -12,7 +12,6 @@ const props = withDefaults(
     expandDepth?: number
     hasCheckbox?: boolean //是否有选择框
     checkMultiple?: boolean //是否多选
-    checkboxField?: string //选择框字段
     tdTrClass?: string
     rowSpanSuffix?: string //rowsapn 的字段后缀 后台应该组成 `${字段}${后缀}`
     intervalLeft?: number
@@ -24,7 +23,6 @@ const props = withDefaults(
     isLazy?: boolean
   }>(),
   {
-    checkboxField: "id",
     keyField: "id",
     parentField: "parent_id",
     childrenField: "children",
@@ -77,7 +75,7 @@ onMounted(() => {
     <tr :class="trClass" :id="`tr_${row[keyField]}`" :data-parent="`tr_${row[parentField]}`">
       <td v-if="hasCheckbox" class="check-box">
         <div class="form-check form-check-sm form-check-custom form-check-solid">
-          <input class="form-check-input" type="checkbox" :value="row[checkboxField]" @change="onChange" />
+          <input class="form-check-input" type="checkbox" :value="row[keyField]" @change="onChange" />
         </div>
       </td>
       <template v-for="(column, i) in header" :key="i">
@@ -128,14 +126,13 @@ onMounted(() => {
         :key="i"
         :row="child"
         :header="header"
+        :key-field="keyField"
         :depth="depth + 1"
         :expand-depth="expandDepth"
         :has-checkbox="hasCheckbox"
-        :checkbox-field="checkboxField"
         :td-tr-class="tdTrClass"
         :row-span-suffix="rowSpanSuffix"
         :icon-field="iconField"
-        :key-field="keyField"
         :check-multiple="checkMultiple"
         :parent-field="parentField"
         :children-field="childrenField"

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-fixed/TableFixed.vue

@@ -10,9 +10,9 @@ const props = withDefaults(
     header: Array<Header>
     data: Array<any>
     fixedNumber: number
+    keyField: string
     checkAll?: boolean //是否全部选中
     hasCheckbox?: boolean //是否有选择框
-    checkboxField?: string //选择框字段
     checkMultiple?: boolean //是否多选
     multiplePageCheck?: boolean //跨页多选
     sortField?: string //排序字段
@@ -28,11 +28,11 @@ const props = withDefaults(
     expandDepth?: number
     intervalLeft?: number
     iconField?: string
-    keyField?: string
     parentField?: string
     childrenField?: string
     leafField?: string
-    lazyLoad?: (v: string) => void
+    lazyLoad?: (v: string) => Promise<any>
+    lazySearch?: boolean
   }>(),
   {
     hasCheckbox: true,
@@ -125,20 +125,20 @@ onBeforeUnmount(() => {
         :check-multiple="checkMultiple"
         :data="data"
         :header="header"
+        :key-field="keyField"
         :has-checkbox="hasCheckbox"
-        :checkbox-field="checkboxField"
         :body-class="bodyClass"
         :td-tr-class="tdTrClass"
         :row-span-suffix="rowSpanSuffix"
         :is-tree="isTree"
         :interval-left="intervalLeft"
         :icon-field="iconField"
-        :key-field="keyField"
         :children-field="childrenField"
         :parent-field="parentField"
         :leaf-field="leafField"
         :expand-depth="expandDepth"
         :lazy-load="lazyLoad"
+        :lazy-search="lazySearch"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="{ row: item }">
           <slot v-if="!name.toString().endsWith('_header')" :name="name" :row="item" />

UI/VA.Vue_V1.0/src/components/table/table-partials/table-content/table-fixed/TableRightFixed.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
     header: Array<Header>
     data: Array<any>
     fixedNumber: number
+    keyField: string
     sortField?: string //排序字段
     sortOrder?: "asc" | "desc"
     tableBoxClass?: string
@@ -23,11 +24,11 @@ const props = withDefaults(
     expandDepth?: number
     intervalLeft?: number
     iconField?: string
-    keyField?: string
     parentField?: string
     childrenField?: string
     leafField?: string
-    lazyLoad?: (v: string) => void
+    lazyLoad?: (v: string) => Promise<any>
+    lazySearch?: boolean
   }>(),
   {
     hasCheckbox: true,
@@ -122,6 +123,7 @@ onBeforeUnmount(() => {
         :leaf-field="leafField"
         :expand-depth="expandDepth"
         :lazy-load="lazyLoad"
+        :lazy-search="lazySearch"
       >
         <template v-for="(_, name) in $slots" v-slot:[name]="{ row: item }">
           <slot v-if="!name.toString().endsWith('_header')" :name="name" :row="item" />

UI/VA.Vue_V1.0/src/components/table/table-partials/table-toolbar/TableRightToolbar.vue

@@ -4,14 +4,14 @@ import configs from "@/core/config"
 const props = withDefaults(
   defineProps<{
     showSearch: boolean
-    search: boolean
+    showSearchBtn: boolean
     gutter: number
     columns: Array<Header>
     showColumnBtn?: boolean
   }>(),
   {
     showSearch: true,
-    search: true,
+    showRightSearchBtn: true,
     gutter: 10,
     showColumnBtn: true,
   }
@@ -91,7 +91,7 @@ onMounted(() => {
 <template>
   <div :style="style">
     <el-row>
-      <vb-tooltip class="item" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+      <vb-tooltip v-if="showSearchBtn" class="item" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
         <el-button class="btn btn-light-primary p-3" circle @click="toggleSearch()">
           <KTIcon icon-name="magnifier" icon-type="solid"></KTIcon>
         </el-button>

UI/VA.Vue_V1.0/src/components/table/table-partials/table-toolbar/TableToolbar.vue

@@ -7,7 +7,9 @@ import type { Header, ToolBtn } from "@/components/table/table-partials/models"
 const props = withDefaults(
   defineProps<{
     header: Array<Header>
+    tableTitle?: string
     selectedRows: number
+    showSearchBar?: boolean
     showRightToolbar?: boolean
     showRightColumnBtn?: boolean
     showRightSearchBtn?: boolean
@@ -20,13 +22,14 @@ const props = withDefaults(
     customBtns?: Array<ToolBtn>
   }>(),
   {
+    showSearchbar: true,
     showRightToolbar: true,
     showRightSearchBtn: true,
   }
 )
 
 const { selectedRows } = toRefs(props)
-const showSearchToolbar = ref(props.showRightSearchBtn)
+const showSearchToolbar = ref(props.showSearchBar)
 
 function customSearch() {
   props.queryTable && props.queryTable()
@@ -34,6 +37,14 @@ function customSearch() {
 </script>
 <template>
   <div class="table-tool" :gutter="10">
+    <template v-if="$slots.tableTitle">
+      <div class="table-title ps-5 pb-3">
+        <slot name="tableTitle"></slot>
+      </div>
+    </template>
+    <div v-else-if="tableTitle" class="table-title ps-5 pb-3 fs-2 fw-bold">
+      {{ tableTitle }}
+    </div>
     <transition-group name="fade">
       <TableSearchFrom
         v-if="($slots[`table-search-form`] || searchFormItems || searchFormRowItems) && showSearchToolbar"
@@ -59,7 +70,9 @@ function customSearch() {
           v-if="showRightToolbar"
           :show-column-btn="showRightColumnBtn"
           v-model:showSearch="showSearchToolbar"
-          :search="!!($slots[`table-search-form`] || searchFormItems || searchFormRowItems)"
+          :show-search-btn="
+            showRightSearchBtn && !!($slots[`table-search-form`] || searchFormItems || searchFormRowItems)
+          "
           :columns="header"
           @queryTable="customSearch"
         ></TableRightToolbar>