hwmom-ui/src/views/boardGenerate/nodes/form/scrollTableNode.vue

<template>
  <div
    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
    <NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
                 @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
      <div style="background-color: #094170"
           :style="{ height:props.data.options.thHeight, color:props.data.options.thColor,backgroundColor:props.data.options?.thBgColor }">
        <div class="scrollTable" style="font-weight: bold;"
             :style="{width: i.width || '100px',textAlign:i.align || 'left'}"
             v-for="i in props.data.options.tableOptions">
          {{ i.name }}
        </div>
      </div>
      <vue3ScrollSeamless
        :classOptions="props.data.options.tableClassOption ||{}"
        :dataList="props.inputData.tableData"
        v-if="scrollShow"
        style=" overflow: hidden"
        :style="{height: `calc(100% - ${props.data.options.thHeight || '0px'})`}"
      >
        <div
          :style="{color:props.data.options.tdColor[index % props.data.options.tdColor?.length],backgroundColor:(props.data.options?.tdBgColor||[])[index % props.data.options.tdBgColor?.length]}"
          v-for="(data,index) in props.inputData.tableData" :key="index ">
          <div class="scrollTable" style="font-weight: bold;"
               :style="{width: i.width || '100px',height:props.data.options.tdHeight,lineHeight:props.data.options.tdHeight,textAlign:i.align || 'left' }"
               v-for="(i,k) in props.data.options.tableOptions">
            <span v-if="i.type === '文本'">{{ ((props.inputData.tableData || [])[k] || {})[i.field] }}</span>
            <el-tag type="primary" v-else-if="i.type === '标签'">
              {{ ((props.inputData.tableData || [])[k] || {})[i.field] }}
            </el-tag>
            <el-image :preview-src-list="[((props.inputData.tableData || [])[k] || {})[i.field]]"
                      v-else-if="i.type === '图片'" style="width: 100%;" :style="{height:props.data.options.tdHeight}"
                      :src="((props.inputData.tableData || [])[k] || {})[i.field]" fit="contain" />

            <span v-else>{{ ((props.inputData.tableData || [])[k] || {})[i.field] }}</span>

          </div>
        </div>
      </vue3ScrollSeamless>
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';

const scrollShow = ref(true);

const classOptions = ref({
  limitMoveNum: 5
});
const props = defineProps({
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
console.log(props.inputData);

watch(() => JSON.parse(JSON.stringify([props.inputData?.tableData || '', props.data.options])), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    scrollShow.value = false;
    nextTick(() => {
      scrollShow.value = true;
    });
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  position: absolute;
}

.scrollTable {
  display: inline-block;
  vertical-align: top;
}
</style>