ylst-h5/src/components/YlTable/yl-table-h.vue

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { showImagePreview } from 'vant';

const prop = defineModel<any[]>('prop');
const data = defineModel<any[]>('data');
const tableWidth = ref(0);
const doc_content = ref();
let startX = 0;
const isHorizontal = ref(false);

function handleTouchStart(event: TouchEvent) {
  startX = event.touches[0].clientX;
  isHorizontal.value = false;
}
function handleImageClick(e: Event) {
  if (e.target instanceof HTMLImageElement) {
    const imgSrc = e.target.src;
    showImagePreview({
      images: [imgSrc],
      closeable: true
    });
  }
}
function handleTouchMove(event: TouchEvent) {
  const deltaX = event.touches[0].clientX - startX;

  // 如果是横向滑动，则阻止冒泡
  if (Math.abs(deltaX) > 10) {
    isHorizontal.value = true;
    event.stopPropagation(); // 阻止事件冒泡到 van-swipe
  }
}
watch(
  () => data.value,
  (newVal) => {
    tableWidth.value = prop.value.length * 100;
    //   tableWidth.value 判断是否铺满横屏 没有就铺满
    let docWidth = document.documentElement.clientWidth;
    console.log(docWidth);
    if (docWidth - tableWidth.value > 100) {
      tableWidth.value = docWidth;
      console.log(tableWidth.value);
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div
    style="overflow: auto; width: 100%"
    ref="doc_content"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
  >
    <div
      :style="{
        width: tableWidth + 'px',
        overflow: 'auto'
      }"
    >
      <table style="width: 100%; text-align: center; border: none" class="el-table">
        <thead class="tableThead el-table__header">
          <tr>
            <th v-for="item in prop" class="el-table__cell">
              <div class="cell" style="font-size: 13px">{{ item.label }}</div>
            </th>
          </tr>
        </thead>
        <tr v-for="(item, index) in data" :key="index">
          <template v-for="(t, index) in prop">
            <td :key="index" v-if="item[index] !== '未知行'" class="el-table__cell">
              <div
                class="cell table-view-html"
                v-html="item[t.prop]"
                v-if="item[index] !== '未知行'"
                @click="handleImageClick"
              ></div>
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<style>
.table-view-html {
  img {
    width: 50px;
    height: 100%;
    margin-right: 10px;
  }
}
</style>
<style scoped lang="scss">
.tableThead {
  background: #f2f8ee;
  font-size: 12px;

  & tr {
    background: #f2f8ee;
    font-size: 12px;
    & th {
      background: #f2f8ee;
      font-size: 10px;
    }
  }
}
table {
  border-collapse: collapse; // 合并边框
  border-spacing: 0; // 清除默认间距
  margin: 0;
  padding: 0;
  border-radius: 8px;
  & tr {
    padding: 10px;
  }
}
//.table-view-html {
//  display: flex;
//  //align-items: center;
//  flex-direction: row;
//
//
//}
</style>