web_dist/src/components/xiao-chan/xc-table-v2/XcTableV2.vue

<template>
  <div class="xc-table_v2"
       ref="tableRef">
    <div class="header"
         ref="headerRef">
      <template v-for="(item,index) in props.columns">
        <div class="th"
             @click="headerClick(item)"
             :style="fixedStyle(item,index)">
          <template v-if="item.type">
            <component :is="typeEnum[item.type].header()"/>
          </template>
          {{ item.name }}
        </div>
      </template>

    </div>
    <div v-bind="containerProps"
         class="xc-body_v2"
         :style="{height : props.height + 'px'}">
      <div v-bind="wrapperProps"
           ref="dataRef">
        <div v-for="item in list"
             :key="props.rowKey === null ?  item.index : props.rowKey"
             @contextmenu.prevent.stop="contextmenu(item.data,item.index,$event)"
             :style="rowStyle(item.data, item.index)"
             @dblclick.stop="dbRowClick(item.data, $event, item.index)"
             @click="rowClick(item.data, $event, item.index)"
             class="row">
          <template v-for="(he,heindex) in props.columns">
            <div :title="item.data[he.code]"
                 class="cell"
                 :style="fixedStyle(he,heindex)">
              <template v-if="he.type">
                <component :is="typeEnum[he.type].body(item)"/>
              </template>
              <template v-else-if="he.cellRenderer">
                <component :is="he.cellRenderer({data: item.data,index:item.index,cellData: item.data[he.code]})"/>
              </template>
              <template v-else>
                {{ item.data[he.code] }}
              </template>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name='XcTableV2' lang="tsx">
import {useVirtualList} from "@vueuse/core";
import {computed, nextTick, onMounted, ref, Ref} from 'vue'
import {ElCheckbox} from "element-plus";

const props = defineProps({
  data: Array,
  columns: Array,
  height: {
    type: Number,
    default: 300
  },
  rowStyle: {
    type: Function,
    default: null
  },
  rowKey: {
    type: String,
    default: null
  }
})

const tempData = computed(() => {
  return props.data
})

const emits = defineEmits(['rowClick', 'dbRowClick', 'contextmenu'])

const {list, containerProps, wrapperProps, scrollTo} = useVirtualList(
    tempData,
    {
      itemHeight: 24,
    },
)

const headerClick = (item) => {
  if (item.headerFunc) {
    item.headerFunc()
  }
}

const rowStyle = (data, index) => {
  if (props.rowStyle === null) return
  return props.rowStyle(data, index)
}

let timer = null
const rowClick = (item, event, index) => {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    emits('rowClick', item, index, event)
  }, 300)
}

const dbRowClick = (item, event, index) => {
  if (timer) {
    clearTimeout(timer)
  }
  emits('dbRowClick', item, index, event)
}

const contextmenu = (data, index, event) => {
  emits('contextmenu', data, index, event)
}

const tableRef: Ref<HTMLElement | null> = ref(null)
const dataRef: Ref<HTMLElement | null> = ref(null)
const headerRef: Ref<HTMLElement | null> = ref(null)


const checkAll: Ref<boolean> = ref(false)
const isIndeterminate = computed(() => {
  if (selectedData.value.length > 0) {
    return true
  } else if (selectedData.value.length === selectedData.value.length) {
    return false
  }
})
const selectedData: Ref<Array<any>> = ref([])

const typeEnum = {
  "selected": {
    header: () => {
      return (<ElCheckbox modelValue={checkAll.value}
                          onclick={(e) => {
                            clickSelectedAll(e)
                          }}
                          indeterminate={isIndeterminate.value}/>)
    },
    body: ({data}) => {
      return (<ElCheckbox
          modelValue={data.tempCheckbox}
          onclick={(e) => clickSelected(data, e)}/>)
    }
  },
  "index": {
    header: () => (<span>排序</span>),
    body: ({index}) => (
        <span>{index + 1}</span>
    )
  }
}

const clickSelected = (data, e: Event) => {
  if (e !== null) {
    e.preventDefault()
    e.stopImmediatePropagation();
  }
  data.tempCheckbox = !data.tempCheckbox
  if (data.tempCheckbox) {
    selectedData.value.push(data)
  } else {
    let index = selectedData.value.findIndex((item) => {
      return item === data
    })
    selectedData.value.splice(index, 1)
  }
}


const clickSelectedAll = (e: Event) => {
  e.preventDefault()
  e.stopPropagation()
  checkAll.value = !checkAll.value

  if (checkAll.value) {
    selectedData.value = []
    tempData.value.forEach(item => {
      item.tempCheckbox = true
    })
  } else {
    selectedData.value = tempData.value
    selectedData.value = []
    tempData.value.forEach(item => {
      item.tempCheckbox = false
    })
  }
}

const selectedRow = (data) => {
  clickSelected(data, null)
}

const getSelectedData = () => {
  return selectedData.value
}

const scrollToByData = (data) => {
  let temp = JSON.stringify(data)
  let index = -1
  for (let i = 0, len = tempData.value.length; i < len; i++) {
    let item = JSON.stringify(tempData.value[i])
    if (item === temp) {
      index = i
      break;
    }
  }
  if (index > 0) {
    scrollTo(index)
  }
}

const scrollToByKey = (key) => {
  if (props.rowKey === null) {
    throw new Error('请先选择一个 key')
  }
  let index = -1
  for (let i = 0, len = tempData.value.length; i < len; i++) {
    if (tempData.value[i][props.rowKey] == key) {
      index = i
      break;
    }
  }
  if (index > 0) {
    scrollTo(index - 2)
  }
  return index
}

const fixedStyle = (item, index) => {
  let str = {width: item.width + 'px'}
  let px = 0
  if (index > 0) {
    for (let i = 0; i < index; i++) {
      let he = props.columns[i]
      if (he.fixed && he.fixed === item.fixed) {
        px += he.width
      }
    }
  }
  if (item.fixed) {
    str['position'] = 'sticky!important';
    str[item.fixed] = px + 'px'
    str['z-index'] = 2
    str['background'] = '#f5f5f5'
  }
  return str
}

const clearSelected = () => {
  if (selectedData.value.length > 0) {
    selectedData.value.forEach(item => {
      item.tempCheckbox = false
    })
    selectedData.value = []
  }
}


onMounted(async () => {
  await nextTick()
  containerProps.ref.value.addEventListener('scroll', () => {
    headerRef.value.scrollLeft = containerProps.ref.value.scrollLeft
  })
})

defineExpose({
  selectedRow,
  getSelectedData,
  scrollToByData,
  scrollToByKey,
  scrollTo,
  clearSelected
})


</script>

<style lang="scss">

.xc-table_v2 {
  overflow-x: hidden;
  color: black;

  .header {
    height: max-content;
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
    overflow-x: hidden;

    .th {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-grow: 0;
      flex-shrink: 0
    }
  }

  .xc-body_v2 {

    &::-webkit-scrollbar {
      height: 6px;
    }

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

    .cell {
      overflow: hidden;
      border-bottom: 1px solid #fff;
      border-top: 1px solid #fff;
      display: flex;
      align-items: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 100%;
      flex-grow: 0;
      flex-shrink: 0;
    }

  }
}


</style>