ff-ui-plus 2.0.7

package/packages/components/table/src/index.vue

@@ -0,0 +1,926 @@
+<template>
+  <div class="t-table" ref="TTableBox" v-loading="tableLoading" :element-loading-text="loadingTxt">
+    <div
+      class="header_wrap"
+      :style="{
+        paddingBottom:
+          tableTitle ||
+          title ||
+          isShow('title') ||
+          isShow('toolbar') ||
+          isSlotToolbar ||
+          columnSetting ||
+          densitySeting
+            ? '10px'
+            : 0
+      }"
+    >
+      <div class="header_title" v-if="tableTitle || title || $slots.title || isSlotTitle">
+        <template v-if="$slots.title || isSlotTitle">
+          <slot name="title" />
+        </template>
+        <template v-else>
+          <span v-if="tableTitle">{{ tableTitle }}</span>
+          <span v-else>{{ title }}</span>
+        </template>
+      </div>
+      <div class="toolbar_top">
+        <slot name="toolbar"></slot>
+        <div
+          class="header_right_wrap"
+          :style="{
+            marginLeft: isShow('toolbar') || isSlotToolbar ? '10px' : 0
+          }"
+        >
+          <slot name="btn" />
+          <column-set
+            v-if="columnSetting && !isTableHeader"
+            v-bind="$attrs"
+            :title="title || tableTitle"
+            :columns="renderColumns"
+            ref="columnSetRef"
+            @columnSetting="v => (state.columnSet = v)"
+          />
+          <div
+            :style="{
+              marginLeft: columnSetting ? '10px' : 0
+            }"
+          >
+            <density-set
+              v-if="densitySeting"
+              v-bind="$attrs"
+              :default-size="state.size"
+              @click-density="handleClickDensity"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="title-tip" v-if="isShow('titleTip')">
+      <slot name="titleTip" />
+    </div>
+    <el-table
+      ref="TTable"
+      :data="state.tableData"
+      :class="{
+        cursor: isCopy,
+        row_sort: isRowSort,
+        row_sort_none: isRowSortIcon,
+        tree_style: isTree,
+        highlightCurrentRow: highlightCurrentRow,
+        radioStyle: radioStyleClass || props.rowClickCheckbox,
+        multile_head_column: isTableHeader,
+        t_table_use_virtual: useVirtual
+      }"
+      :highlight-current-row="highlightCurrentRow"
+      :border="border || table.border || isTableBorder || useVirtual"
+      :size="state.size"
+      v-bind="$attrs"
+      @cell-dblclick="cellDblclick"
+      @row-click="rowClick"
+    >
+      <el-table-column
+        v-if="isRowSortIcon"
+        v-bind="{
+          width: rowSortIconBind.width || 55,
+          'min-width': rowSortIconBind['min-width'] || rowSortIconBind.minWidth,
+          label: rowSortIconBind.label || t('plus.table.dragTxt'),
+          fixed: rowSortIconBind.fixed,
+          align: rowSortIconBind.align || align,
+          ...rowSortIconBind
+        }"
+      >
+        <template #default>
+          <el-icon class="row_drag" :color="rowSortIconBind.color" :size="rowSortIconBind.size">
+            <Rank />
+          </el-icon>
+        </template>
+      </el-table-column>
+      <first-column
+        :table="table"
+        v-model:radioVal="radioVal"
+        :align="align"
+        :isPaginationCumulative="isPaginationCumulative"
+        :isShowPagination="isShowPagination"
+        @radio-change="radioHandleChange"
+      >
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data"></slot>
+        </template>
+      </first-column>
+      <template v-for="(item, index) in renderColumns">
+        <template v-if="!item.children">
+          <el-table-column
+            v-if="typeof item.isShowCol == 'function' ? item.isShowCol(item) : !item.isShowCol"
+            :key="index + 'i'"
+            :type="item.type"
+            :label="item.label"
+            :prop="item.prop"
+            :min-width="item['min-width'] || item.minWidth"
+            :width="item.width"
+            :sortable="item.sortable || item.sort || sortable"
+            :align="item.align || align"
+            :fixed="item.fixed"
+            :formatter="item.formatter"
+            v-bind="
+              typeof item.bind == 'function'
+                ? item.bind(item)
+                : { 'show-overflow-tooltip': true, ...item.bind }
+            "
+          >
+            <template #header v-if="item.headerRequired || item.renderHeader || item.isClickEdit">
+              <render-header v-if="item.renderHeader" :column="item" :render="item.renderHeader" />
+              <div style="display: inline" v-if="item.headerRequired && emptyDataRequired">
+                <span style="color: #f56c6c; font-size: 16px; margin-right: 3px">*</span>
+                <span>{{ item.label }}</span>
+              </div>
+              <div
+                v-if="item.isClickEdit"
+                class="click_edit"
+                :style="{ justifyContent: item.editIconAlign || align || 'center' }"
+              >
+                <span>{{ item.label }}</span>
+                <el-icon v-if="!item.isShowEditIcon" v-bind="{ size: 14, ...item.editIconBind }">
+                  <Edit />
+                </el-icon>
+              </div>
+            </template>
+            <template #default="scope">
+              <!-- render渲染 -->
+              <template v-if="item.render">
+                <render-col
+                  :column="item"
+                  :row="scope.row"
+                  :render="item.render"
+                  :index="scope.$index"
+                />
+              </template>
+              <!-- 自定义插槽 -->
+              <template v-if="item.slotName">
+                <slot :name="item.slotName" :scope="scope"></slot>
+              </template>
+              <!-- 单个单元格编辑 -->
+              <template
+                v-if="typeof item.canEdit == 'function' ? item.canEdit(scope) : item.canEdit"
+              >
+                <el-form
+                  :model="state.tableData[scope.$index]"
+                  :rules="isEditRules ? table.rules : {}"
+                  class="t_edit_cell_form"
+                  :class="{
+                    t_edit_cell_form_rules: isEditRules
+                  }"
+                  :ref="(el:any) => handleRef(el, scope,item)"
+                  @submit.prevent
+                >
+                  <single-edit-cell
+                    :configEdit="item.configEdit"
+                    v-model="scope.row[item.prop]"
+                    :prop="item.prop"
+                    :scope="scope"
+                    :indexColumns="index"
+                    :ref="(el:any) => handleEditTableRef(el, scope,item)"
+                    @handleEvent="handleEvent($event, scope.$index)"
+                    @keyup-handle="handleKeyup"
+                    v-bind="$attrs"
+                  >
+                    <template v-for="(_index, name) in slots" v-slot:[name]="data">
+                      <slot :name="name" v-bind="data"></slot>
+                    </template>
+                  </single-edit-cell>
+                </el-form>
+              </template>
+              <!-- 单击单元格编辑 -->
+              <template v-if="item.isClickEdit">
+                <single-edit
+                  :isClickEdit="item.isClickEdit"
+                  :configEdit="item.configEdit"
+                  v-model="scope.row[scope.column.property]"
+                  v-bind="$attrs"
+                  ref="editClickCell"
+                >
+                  <template v-for="(_index, name) in slots" v-slot:[name]="data">
+                    <slot :name="name" v-bind="data"></slot>
+                  </template>
+                </single-edit>
+              </template>
+              <!-- 字典过滤 -->
+              <template v-if="item.filters && item.filters.list">
+                {{
+                  constantEscape(
+                    scope.row[item.prop],
+                    table.listTypeInfo[item.filters.list],
+                    item.filters.key || "value",
+                    item.filters.label || "label"
+                  )
+                }}
+              </template>
+              <div
+                v-if="
+                  !item.render &&
+                  !item.slotName &&
+                  !item.canEdit &&
+                  !item.filters &&
+                  !item.isClickEdit &&
+                  !item.formatter
+                "
+              >
+                <span>{{ scope.row[item.prop] }}</span>
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 表头合并单元格 -->
+        <t-table-column
+          v-else
+          :key="index + 'm'"
+          :item="item"
+          :align="align"
+          v-bind="$attrs"
+          :sortable="sortable"
+        >
+          <template v-for="(_index, name) in slots" v-slot:[name]="data">
+            <slot :name="name" v-bind="data"></slot>
+          </template>
+        </t-table-column>
+      </template>
+      <slot></slot>
+      <Operator
+        :table="table"
+        :btnPermissions="btnPermissions"
+        :tableData="state.tableData"
+        :align="align"
+      />
+      <template #append>
+        <slot name="append"></slot>
+      </template>
+      <template #empty>
+        <slot name="empty"></slot>
+      </template>
+    </el-table>
+    <!-- 分页器 -->
+    <el-pagination
+      v-if="state.tableData && state.tableData.length && isShowPagination"
+      v-model:current-page="table.currentPage"
+      @current-change="handlesCurrentChange"
+      :page-sizes="table.pageSizes || [10, 20, 50, 100]"
+      v-model:page-size="table.pageSize"
+      :layout="table.layout || 'total,sizes, prev, pager, next, jumper'"
+      :prev-text="table.prevText"
+      :next-text="table.nextText"
+      :total="table.total || 0"
+      :size="table.size || 'small'"
+      v-bind="$attrs"
+      background
+    >
+      <slot name="pagination"></slot>
+    </el-pagination>
+    <footer
+      class="handle_wrap"
+      :style="{ textAlign: footerBtnAlign as any }"
+      v-if="isShowFooterBtn && state.tableData && state.tableData.length > 0"
+    >
+      <slot name="footer" />
+      <div v-if="!slots.footer">
+        <el-button type="primary" @click="save">{{ saveBtnTxt }}</el-button>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  watch,
+  useSlots,
+  reactive,
+  onMounted,
+  onUpdated,
+  onBeforeUnmount
+} from "vue"
+import { Rank, Edit } from "@element-plus/icons-vue"
+import { ElMessage } from "element-plus"
+import type { ComponentSize } from "element-plus/es/constants"
+import Sortable from "sortablejs"
+import TTableColumn from "@ff-ui-plus/components/table/src/TTableColumn.vue"
+import SingleEditCell from "@ff-ui-plus/components/table/src/singleEditCell.vue"
+import SingleEdit from "@ff-ui-plus/components/table/src/singleEdit.vue"
+import ColumnSet from "@ff-ui-plus/components/table/src/ColumnSet.vue"
+import RenderCol from "@ff-ui-plus/components/table/src/renderCol.vue"
+import Operator from "@ff-ui-plus/components/table/src/operator.vue"
+import RenderHeader from "@ff-ui-plus/components/table/src/renderHeader.vue"
+import FirstColumn from "@ff-ui-plus/components/table/src/firstColumn.vue"
+import DensitySet from "@ff-ui-plus/components/table/src/densitySet.vue"
+// 虚拟滚动
+import { useVirtualized } from "./useVirtualized"
+const {
+  scrollContainerEl,
+  updateRenderedItemCache,
+  updateOffset,
+  getDom,
+  saveDATA,
+  getItemHeightFromCache
+} = useVirtualized()
+import { useExpose } from "./useExpose"
+const {
+  TTable,
+  clearSelection,
+  getSelectionRows,
+  toggleRowSelection,
+  toggleAllSelection,
+  toggleRowExpansion,
+  setCurrentRow,
+  clearSort,
+  clearFilter,
+  doLayout,
+  sort,
+  scrollTo,
+  setScrollTop,
+  setScrollLeft
+} = useExpose()
+import { tableProps } from "./tableProps"
+const props = defineProps(tableProps)
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "TTable"
+})
+// 初始化数据
+let state = reactive({
+  size: props.defaultSize,
+  tableData: props.table.data,
+  columnSet: [],
+  copyTableData: [] // 键盘事件
+})
+// 空数据时表头是否显示校验红点
+const emptyDataRequired = computed(() => {
+  if (props.isEmptyDataRequired) {
+    return state.tableData.length > 0
+  } else {
+    return true
+  }
+})
+// 单选框
+const radioVal = ref<number | any>("")
+// 判断单选选中及取消选中
+const forbidden = ref(true)
+// 获取t-table ref
+const TTableBox = ref<HTMLElement | any>(null)
+// 获取columnSet Ref
+const columnSetRef = ref<HTMLElement | any>(null)
+// 获取form ref
+const formRef = ref({})
+// 动态form ref
+const handleRef = (
+  el: any,
+  scope: { $index: number; column: { property: string } },
+  item: { prop: any }
+) => {
+  if (el) {
+    formRef.value[`formRef-${scope.$index}-${item.prop || scope.column.property}`] = el
+  }
+}
+// 获取所有单元格编辑组件 ref
+const editTableRef: any = ref({})
+// 动态单元格编辑组件 ref
+const handleEditTableRef = (
+  el: any,
+  scope: { $index: number; column: { property: string } },
+  item: { prop: any }
+) => {
+  if (el) {
+    editTableRef.value[`singleEditRef-${scope.$index}-${item.prop || scope.column.property}`] = el
+  }
+}
+// 抛出事件
+const emits = defineEmits([
+  "save",
+  "page-change",
+  "handleEvent",
+  "radioChange",
+  "rowSort",
+  "validateError"
+])
+// 获取所有插槽
+const slots = useSlots()
+watch(
+  () => props.table.data,
+  val => {
+    // console.log(111, val)
+    if (props.useVirtual) {
+      saveDATA.value = val
+      updateRenderData(0)
+    } else {
+      state.tableData = val
+    }
+  },
+  { deep: true }
+)
+watch(
+  () => props.isRowSort,
+  val => {
+    if (val) {
+      initSort()
+    }
+  }
+)
+onMounted(() => {
+  // console.log('onMounted', props.table.firstColumn)
+  // 设置默认选中项（单选）
+  if (props.defaultRadioCol) {
+    defaultRadioSelect(props.defaultRadioCol)
+  }
+  initSort()
+  if (props.useVirtual) {
+    saveDATA.value = props.table.data
+    getDom()
+    scrollContainerEl.value?.addEventListener("scroll", handleScroll)
+  }
+})
+// 更新实际渲染数据
+const updateRenderData = (scrollTop: number) => {
+  let startIndex = 0
+  let offsetHeight = 0
+  for (let i = 0; i < saveDATA.value.length; i++) {
+    offsetHeight += getItemHeightFromCache(i)
+    if (offsetHeight >= scrollTop) {
+      startIndex = i
+      break
+    }
+  }
+  // 计算得出的渲染数据
+  state.tableData = saveDATA.value.slice(startIndex, startIndex + props.virtualShowSize)
+  // 缓存最新的列表项高度
+  updateRenderedItemCache(startIndex)
+  // 更新偏移值
+  updateOffset(offsetHeight - getItemHeightFromCache(startIndex))
+}
+// 滚动事件
+const handleScroll = (e: any) => {
+  // 渲染正确的数据
+  updateRenderData(e.target.scrollTop)
+  // console.log("滚动事件---handleScroll")
+}
+// 移除滚动事件
+onBeforeUnmount(() => {
+  // console.log("移除滚动事件")
+  if (props.useVirtual) {
+    scrollContainerEl.value?.removeEventListener("scroll", handleScroll)
+  }
+})
+onUpdated(() => {
+  TTable.value.doLayout()
+})
+// 默认选中（单选项）---index必须是大于等于1（且只能默认选中第一页的数据）
+const defaultRadioSelect = (index: number | any) => {
+  radioVal.value = index
+  emits("radioChange", state.tableData[index - 1], radioVal.value)
+}
+// 行拖拽
+const initSort = () => {
+  if (!props.isRowSort) return
+  const el = TTableBox.value?.querySelector(".el-table__body-wrapper tbody")
+  // console.log('3333', el)
+  const handle = props.isRowSortIcon ? ".row_drag" : ".el-table__row"
+  Sortable.create(el, {
+    animation: 150, // 动画
+    handle, // 指定拖拽目标，点击此目标才可拖拽元素(此例中设置操作按钮拖拽)
+    // filter: '.disabled', // 指定不可拖动的类名（el-table中可通过row-class-name设置行的class）
+    // dragClass: 'dragClass', // 设置拖拽样式类名
+    // ghostClass: 'ghostClass', // 设置拖拽停靠样式类名
+    // chosenClass: 'chosenClass', // 设置选中样式类名
+    onEnd: (evt: { oldIndex: any; newIndex: any }) => {
+      // console.log("拖拽结束---11", evt.oldIndex, evt.newIndex)
+      const curRow = state.tableData.splice(evt.oldIndex, 1)[0]
+      state.tableData.splice(evt.newIndex, 0, curRow)
+      emits("rowSort", state.tableData, evt.oldIndex, evt.newIndex)
+    }
+  })
+}
+
+// 过滤字典
+/**
+ * 下拉数据回显中文过滤器
+ * @param [String,Number] value 需要转中文的key值
+ * @param {String} list  数据源
+ * @param [String,Number] key  数据源的key字段（默认：value）
+ * @param {String} label  数据源的label字段（默认：label）
+ */
+const constantEscape = (value: any, list: any[], key: string | number, label: string | number) => {
+  const res = list.find(item => {
+    return item[key] === value
+  })
+  return res && res[label]
+}
+// // 第一列单选显示类
+const radioStyleClass = computed(() => {
+  if (Array.isArray(props.table.firstColumn)) {
+    return props.table.firstColumn.some((item: { type: string }) => item.type === "radio")
+  } else {
+    return props.table.firstColumn && props.table.firstColumn.type === "radio"
+  }
+})
+// 单元格编辑是否存在校验
+const isEditRules = computed(() => {
+  return (
+    (props.table.rules && Object.keys(props.table.rules).length > 0) ||
+    props.columns.some((item: any) => item?.configEdit?.rules)
+  )
+})
+// 所有列（表头数据）
+const renderColumns = computed(() => {
+  if (state.columnSet.length === 0) {
+    return props.columns
+  }
+  const columnByProp: any = props.columns.reduce((acc: any, cur: any) => {
+    acc[cur.prop] = cur
+    return acc
+  }, {})
+  return state.columnSet.filter((cur: any) => !cur.hidden).map((cur: any) => columnByProp[cur.prop])
+})
+
+// 判断是否是多级表头
+const isTableHeader = computed(() => {
+  return renderColumns.value.some((item: any) => item.children)
+})
+// 判断如果有表头合并就自动开启单元格缩放
+const isTableBorder = computed(() => {
+  return props.columns.some((item: any) => item.children)
+})
+// 单元格编辑键盘事件
+const handleKeyup = (event: { keyCode: number }, index: number, key: string) => {
+  if (!props.isKeyup) return
+  const copyTableData = JSON.parse(JSON.stringify(state.tableData))
+  const doms = document.getElementsByClassName(key)
+  const focusNextElement = (nextIndex: number) => {
+    const nextDom =
+      doms[nextIndex]?.getElementsByTagName("input")[0] ||
+      doms[nextIndex]?.getElementsByTagName("textarea")[0]
+    if (nextDom) nextDom.focus()
+  }
+  switch (event.keyCode) {
+    case 38: // 向上键
+      if (!index) index = copyTableData.length
+      focusNextElement(index - 1)
+      break
+    case 40: // 向下键
+      if (index === copyTableData.length - 1) index = -1
+      focusNextElement(index + 1)
+      break
+    case 13: // 回车键
+      let keyName = props.columns.map((val: any) => val.prop)
+      let num = keyName.indexOf(key)
+      if (num === -1) {
+        num = 0
+      } else if (num === keyName.length - 1) {
+        if (index === state.copyTableData.length - 1) {
+          index = 0
+        } else {
+          ++index
+        }
+      } else {
+        ++num
+      }
+      let doms = document.getElementsByClassName(keyName[num])
+      if (doms.length) {
+        let dom =
+          doms[index].getElementsByTagName("input")[0] ||
+          doms[index].getElementsByTagName("textarea")[0]
+        dom.focus()
+      }
+      break
+  }
+}
+
+// forbidden取值（选择单选或取消单选）
+const isForbidden = () => {
+  forbidden.value = false
+  setTimeout(() => {
+    forbidden.value = true
+  }, 0)
+}
+// 单选抛出事件radioChange
+const radioClick = (row: any, index: any) => {
+  forbidden.value = !forbidden.value
+  const isCurrentlySelected = radioVal.value === index
+  if (isCurrentlySelected) {
+    radioVal.value = null
+  } else {
+    radioVal.value = index
+  }
+  isForbidden()
+  emits("radioChange", radioVal.value ? row : null, radioVal.value)
+}
+
+// 点击单选框单元格触发事件
+const radioHandleChange = (row: any, index: any) => {
+  if (row?.isRadioDisabled) return
+  if (props.rowClickRadio) {
+    return
+  }
+  if (radioVal.value === index) {
+    emits("radioChange", row, index)
+    return
+  }
+
+  radioClick(row, index)
+}
+// 点击某行事件
+const rowClick = (row: any) => {
+  if (row.isRadioDisabled) return
+  // 单选框点击事件
+  if (props.rowClickRadio) {
+    radioClick(row, state.tableData.indexOf(row) + 1)
+  } else {
+    return false
+  }
+  // 多选框点击事件
+  if (props.rowClickCheckbox) {
+    TTable.value.toggleRowSelection(row)
+  } else {
+    return false
+  }
+}
+// 清除单选框选中状态
+const clearRadioHandle = () => {
+  radioVal.value = null
+  TTable.value.setCurrentRow(-1)
+}
+// 密度
+const handleClickDensity = (size: ComponentSize) => {
+  state.size = size
+}
+// 复制内容到剪切板
+const copyToClipboard = async (text: any) => {
+  // 确保传入的内容是字符串类型
+  if (typeof text !== "string" || text.trim() === "") {
+    throw new Error(t("plus.copy.invalidCopyContent"))
+  }
+  try {
+    // 使用现代剪贴板 API 进行复制
+    await navigator.clipboard.writeText(text)
+  } catch (error) {
+    throw new Error(t("plus.copy.copyFail"))
+  }
+}
+
+// 显示消息提示
+const showMessage = (type: "success" | "error", message: string) => {
+  if (type === "success") {
+    ElMessage.success(message)
+  } else {
+    ElMessage.error(message)
+  }
+}
+
+// 双击复制单元格内容
+const cellDblclick = async (row: { [x: string]: any }, column: { property: string | number }) => {
+  if (!props.isCopy) {
+    return false
+  }
+  const value = row[column.property]
+  try {
+    // 调用复制函数
+    await copyToClipboard(String(value)) // 确保值转换为字符串
+    showMessage("success", t("plus.copy.copySuccess"))
+  } catch (error: any) {
+    // 捕获并显示错误信息
+    showMessage("error", error.message || t("plus.copy.copyFail"))
+  }
+}
+// 判断是否使用了某个插槽
+const isShow = (name: string) => {
+  return Object.keys(slots).includes(name)
+}
+const save = (): Promise<any> => {
+  return new Promise(resolve => {
+    if (!isEditRules.value) {
+      emits("save", state.tableData)
+      resolve(state.tableData)
+      return
+    }
+
+    // 表单规则校验
+    let successLength = 0
+    let rulesList: string[] = []
+    let rulesError: (string | number)[] = []
+    let propError: string[] = []
+    let propLabelError = [] as any
+
+    // 获取所有的form ref
+    const refList = Object.keys(formRef.value).filter(item => item.includes("formRef"))
+
+    // 获取单独设置规则项
+    const arr = renderColumns.value
+      .filter((val: { configEdit: { rules: any } }) => {
+        if (val.configEdit?.rules) {
+          return val
+        }
+      })
+      .map((item: { prop: any }) => item.prop)
+
+    // 获取整体设置规则
+    const arr1 = (props.table.rules && Object.keys(props.table.rules)) ?? []
+
+    // 获取最终设置了哪些规则（其值是设置的--prop）
+    const newArr = [...arr, ...arr1]
+
+    // 最终需要校验的ref
+    newArr.map(val => {
+      refList.map((item: any) => {
+        if (typeof item === "string" && item.includes(val)) {
+          rulesList.push(item)
+        }
+      })
+    })
+
+    // 表单都校验
+    rulesList.map((val: string | number) => {
+      formRef.value[val].validate((valid: boolean) => {
+        if (valid) {
+          successLength = successLength + 1
+        } else {
+          rulesError.push(val)
+        }
+      })
+    })
+
+    setTimeout(() => {
+      // 所有表单都校验成功
+      if (successLength == rulesList.length) {
+        if (isEditRules.value) {
+          emits("save", state.tableData)
+          resolve(state.tableData)
+        }
+      } else {
+        // 校验未通过的prop
+        rulesError.map(item => {
+          newArr.map(val => {
+            if (typeof item === "string" && item.includes(val)) {
+              propError.push(val)
+            }
+          })
+        })
+
+        // 去重获取校验未通过的prop--label
+        Array.from(new Set(propError)).map(item => {
+          renderColumns.value.map((val: { prop: string; label: string }) => {
+            if (item === val.prop) {
+              propLabelError.push(val.label)
+            }
+          })
+        })
+        // console.log("校验未通过的prop--label", propLabelError)
+        emits("validateError", propLabelError)
+      }
+    }, 300)
+  })
+}
+// 单个编辑事件
+const handleEvent = ({ type, val }: any, index: any) => {
+  emits("handleEvent", type, val, index)
+}
+// 当前页码
+const handlesCurrentChange = (val: any) => {
+  emits("page-change", val)
+}
+/**
+ * 公共方法
+ */
+// 单元格编辑调用save方法返回数据
+const saveMethod = (callback: (arg0: any) => any) => {
+  if (!isEditRules.value) {
+    callback && callback(state.tableData)
+    return
+  }
+  // 表单规则校验
+  let successLength = 0
+  let rulesList: any = []
+  let rulesError: any = []
+  let propError: any = []
+  let propLabelError: any = []
+  // 获取所有的form ref
+  const refList = Object.keys(formRef.value).filter(item => item.includes("formRef"))
+  // 获取单独设置规则项
+  const arr = renderColumns.value
+    .filter((val: { configEdit: { rules: any } }) => {
+      if (val.configEdit?.rules) {
+        return val
+      }
+    })
+    .map((item: { prop: any }) => item.prop)
+  // 获取整体设置规则
+  const arr1 = (props.table.rules && Object.keys(props.table.rules)) ?? []
+  // 获取最终设置了哪些规则（其值是设置的--prop）
+  const newArr = [...arr, ...arr1]
+  // 最终需要校验的ref
+  newArr.map(val => {
+    refList.map((item: any) => {
+      if (item.includes(val)) {
+        rulesList.push(item)
+      }
+    })
+  })
+  // console.log('最终需要校验的数据', rulesList, formRef.value)
+  // 表单都校验
+  rulesList.map((val: string | number) => {
+    formRef.value[val].validate((valid: any) => {
+      if (valid) {
+        successLength = successLength + 1
+      } else {
+        rulesError.push(val)
+      }
+    })
+  })
+  setTimeout(() => {
+    // 所有表单都校验成功
+    if (successLength == rulesList.length) {
+      if (isEditRules.value) {
+        // console.log('所有表单都校验成功--', state.tableData)
+        callback && callback(state.tableData)
+      }
+    } else {
+      // 校验未通过的prop
+      rulesError.map((item: string | any[]) => {
+        newArr.map(val => {
+          if (item.includes(val)) {
+            propError.push(val)
+          }
+        })
+      })
+      // 去重获取校验未通过的prop--label
+      Array.from(new Set(propError)).map(item => {
+        renderColumns.value.map((val: { prop: unknown; label: any }) => {
+          if (item === val.prop) {
+            propLabelError.push(val.label)
+          }
+        })
+      })
+      // console.log("校验未通过的prop--label", propLabelError)
+      emits("validateError", propLabelError)
+    }
+  }, 300)
+}
+// 清空校验规则
+const clearValidate = () => {
+  const refList = Object.keys(formRef.value).filter(item => item.includes("formRef"))
+  refList.length > 0 &&
+    refList.map(val => {
+      formRef.value[val].clearValidate()
+    })
+}
+// 表单进行重置并移除校验结果
+const resetFields = () => {
+  const refList = Object.keys(formRef.value).filter(item => item.includes("formRef"))
+  refList.length > 0 &&
+    refList.map(val => {
+      formRef.value[val].resetFields()
+    })
+  // 重置下拉表格
+  const refEditList = Object.keys(editTableRef.value).filter(item => item.includes("singleEditRef"))
+  refEditList.length > 0 &&
+    refEditList.map(val => {
+      editTableRef.value[val].resetTselectTableFields()
+    })
+}
+// 重置下拉表格--单元格编辑
+const resetTselectTable = () => {
+  // 重置下拉表格
+  const refEditList = Object.keys(editTableRef.value).filter(item => item.includes("singleEditRef"))
+  refEditList.length > 0 &&
+    refEditList.map(val => {
+      editTableRef.value[val].resetTselectTableFields()
+    })
+}
+// 获取columnSet缓存数据
+const reSetColumnSet = () => {
+  return columnSetRef.value?.reSetColumnSet()
+}
+// 暴露方法出去
+defineExpose({
+  defaultRadioSelect,
+  clearSelection,
+  getSelectionRows,
+  toggleRowSelection,
+  toggleAllSelection,
+  toggleRowExpansion,
+  setCurrentRow,
+  clearSort,
+  clearFilter,
+  doLayout,
+  sort,
+  scrollTo,
+  setScrollTop,
+  setScrollLeft,
+  state,
+  radioVal,
+  clearValidate,
+  resetFields,
+  save,
+  saveMethod,
+  reSetColumnSet,
+  clearRadioHandle,
+  resetTselectTable
+})
+</script>