web_dist/src/views/data-base/page-editor-help-v2/components/PageHelpTable.vue

<template>
  <vxe-grid v-bind="tableGridComputed" :ref="setMainTableRef">

  </vxe-grid>
  <!--  <vxe-table-->
  <!--      :data="data"-->
  <!--      :ref="setMainTableRef"-->
  <!--      border-->
  <!--      :export-config="{}"-->
  <!--      height="auto"-->
  <!--      auto-resize-->
  <!--      sync-resize-->
  <!--      :column-config="{resizable: true}"-->
  <!--      style="{width: 100%}"-->
  <!--      :row-config="{height: 48 , isCurrent: true,isHover:true, useKey: true} "-->
  <!--      :scroll-x="{enabled: false}"-->
  <!--      :scroll-y="{gt: 0 ,enabled: true}"-->
  <!--      show-overflow-->
  <!--      v-bind="tableBind"-->
  <!--  >-->
  <!--    <VxeColumn-->
  <!--        v-for="(item,index) in props.columns"-->
  <!--        v-bind="columnBind(item)"-->
  <!--    >-->
  <!--      <template-->
  <!--          #header-->
  <!--          v-if="props.store.props.isEditor">-->
  <!--        <el-input-->
  <!--            v-model="columns[index].title"-->
  <!--            @focus="handleFocus(columns?.[index].field)"-->
  <!--        />-->
  <!--      </template>-->
  <!--      <template-->
  <!--          #default="{row , $rowIndex}"-->
  <!--          v-if="item!.func && item!.func.default"-->
  <!--      >-->
  <!--        <Component-->
  <!--            :is="handleTableColumnDefault?.(row, $rowIndex, item)"-->
  <!--        />-->
  <!--      </template>-->
  <!--    </VxeColumn>-->
  <!--  </vxe-table>-->
</template>

<script setup lang="tsx">
import {ComputedRef} from "vue";
import {PageHelpTableName, PageStore} from "@/views/data-base/page-editor-help-v2/page-help-v2";
import XEUtils from "xe-utils";
import {VxeGridProps} from 'vxe-table'
import {VxeGridPropTypes,} from "vxe-pc-ui/types/components/grid";
import {ElInput} from 'element-plus'

const props = defineProps<{
  data: any[];
  columns: any[];
  store: PageStore,
  tableRefName: PageHelpTableName,
  tableBind: any,
  getSlotsData: (code: string) => any
}>()

function handleSlots(slots, tmp) {
  for (let key in slots) {
    tmp.slots[key] = ({row, rowIndex}) => {
      const code = slots[key]
      return props.getSlotsData(row, rowIndex, code)
    }
  }
}

// @ts-ignore
const columnBindComputed: ComputedRef<VxeGridPropTypes.Columns> = computed(() => {
  // @ts-ignore
  return XEUtils.eachAndReturnList(props!.columns, (item, index) => {
    const {func, slots, ...temp} = item

    let tmp: any = {...temp, slots: {}}
    if (props.store?.props.isEditor) {
      tmp.slots.header = () => {
        return <ElInput
            modelValue={props?.columns[index]?.title}
            onUpdate:modelValue={(value) => {
              props.columns[index].title = value
            }}
            onFocus={() => handleFocus(props.columns?.[index].field)}
        />
      }
    }
    handleSlots(slots, tmp)
    return tmp
  });

})

// @ts-ignore
const tableGridComputed: ComputedRef<VxeGridProps> = computed(() => {
  console.log(columnBindComputed.value)
  return {
    data: props.data,
    columns: columnBindComputed.value,
    expandConfig: {},
    height: 'auto',
    autoResize: true,
    syncResize: false,
    columnConfig: {resizable: true},
    style: {
      width: '100%',
    },
    rowConfig: {height: 48, isCurrent: true, isHover: true, useKey: true},
    scrollX: {enabled: false},
    scrollY: {gt: 0, enabled: true},
    showOverflow: true,
    ...props.tableBind
  }
})

function setMainTableRef(el: any) {
  if (typeof props.store !== 'undefined') {
    props.store[props.tableRefName].value = el
  }
}

function handleFocus(field: string) {
  if (typeof props.store !== 'undefined') {
    props.store!.mainTableRef.value.scrollToColumn(field)
  }
}

</script>