web_dist/src/components/xiao-chan/sd-table/table-body/SdTableBody.vue

<template>
  <div v-bind="containerProps" style="height: 200px" class="sd-body">
    <div v-bind="wrapperProps">
      <div v-for="item in list"
           :key="item.index"
           class="row"
           :class="rowClass(item)"
           @mouseenter="isHoverIndex = item.index"
           @mouseleave="isHoverIndex = -1"
           @click="rowClick(item)"
           style="height: 23px">
        <template v-for="(he,heindex) in tempColumns">
          <div class="cell"
               :style="he.fixedStyle"
               :title="getTitle(item,he)">

            <template v-if="he.type">
              <template v-if="he.type === 'selected'">
                <el-checkbox v-model="item.data.$selected"/>
              </template>

              <template v-else-if="he.type === 'index'">
                {{ item.index + 1 }}
              </template>

            </template>


            <template v-else>
              <component :is="createTd(item,he)"/>
            </template>

          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup name='SdTableBody' lang="tsx">
import {defineProps, ref, onMounted, nextTick} from 'vue'
import {useVirtualList} from "@vueuse/core";

const {data, tempColumns, columns, sdMitt} = defineProps({
  data: {
    type: Array,
    default: []
  },
  tempColumns: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  sdMitt: {
    type: Object
  },
  scrollConfig: {
    type: Object,
    default: {
      x: '9px',
      y: '9px'
    }
  }
})

const {list, containerProps, wrapperProps, scrollTo} = useVirtualList(
    data,
    {
      itemHeight: 23,
    },
)


const createTd = (row, columnRow): any => {
  let {data, index} = row

  if (columnRow.editCell) {
    try {
      return <div>{columnRow.renderCell(data, index)}</div>;
    } catch {
      return <div>{data[columnRow.code]}</div>
    }
  } else {
    return <div>{data[columnRow.code]}</div>
  }
}

const getTitle = ({data, index}, columnRow) => {
  try {
    return data[columnRow.code];
  } catch {
    return '';
  }
}

let oldRow = {
  data: {$edit: false}
}
const rowClick = (item) => {
  oldRow.data.$edit = false
  item.data.$edit = true
  oldRow = item
}

const isHoverIndex = ref(0)
const rowClass = ({data, index}) => {
  if (isHoverIndex.value === index) {
    return 'is-hovered'
  }
}

let scrollTop = 0;

onMounted(async () => {
  await nextTick()

  sdMitt.on('setScrollTop', () => {
    containerProps.ref.value.scrollTop = scrollTop
  })


  containerProps.ref.value.addEventListener('scroll', (val) => {
    scrollTop = containerProps.ref.value.scrollTop
    sdMitt.emit('changeScrollX', containerProps.ref.value.scrollLeft)
  })

})

const changeData = async () => {
  await nextTick()
  sdMitt.emit('changeScrollY', containerProps.ref.value.scrollHeight > containerProps.ref.value.clientHeight)
}

defineExpose({
  changeData
})

</script>

<style lang="scss">
.sd-body {
  background-color: white;

  &::-webkit-scrollbar {
    height: v-bind('scrollConfig.x');
    width: v-bind('scrollConfig.y');
    cursor: pointer;
  }

  .is-hovered {
    .cell {
      background-color: #f5f7fa !important;
    }
  }

  .row {
    height: 22px;
    display: flex;
    align-items: center;


    .cell {
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 100%;
      flex-grow: 0;
      flex-shrink: 0;
      background-color: inherit;
      color: inherit;
      border-bottom: 1px solid #ebeef5;
      padding: 0 5px;
    }
  }

}


</style>