H5前端表格组件

前言

主要应用在H5页面中，适用于需要大量重复的表格，但是对表格样式追求不高的页面

子组件中的属性

1. dataSource（table头部数据）
   数据格式eg：

   [{alarmcode: "托模未到定位",alarmtimes: "6501",},{alarmcode: "背面安全门未关",alarmtimes: "1859", }]
   

2. headsData（表格内部body数据）
   key和name是必传字段（key是对应的表格头部的字段，style是该列的对齐方式，默认居中对齐），如果想要该列的对齐方式可以自定义在该列属性style，可选以下图片内的属性设置对齐方式（flex布局中justify-content属性设置）
   

   数据格式eg：

   [ {name: "警报内容", key: "alarmcode", style: "flex-start",},{name: "警报次数",key: "alarmtimes",}]
   

组件完整代码

<!-- 表格循环组件 -->
<template>
  <div class="table-box">
    <table class="table-hover table-border">
      <thead>
        <tr>
          <!-- 循环出表头-->
          <th
            v-for="(item, index) in headsData"
            :key="index"
            class="table-border table-header"
          >
            {{ item.name }}
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- 循环出有多少行数据，即 list 中有多少条数据，得到 list 中的每个元素 -->
        <tr v-for="(item, index) in tableInfo" :key="index">
          <!-- 循环取到元素的每个属性-->
          <td
            v-for="part in headsInfo"
            :key="part.key"
            class="table-border table-body"
          >
            <!-- style是改列的对齐方式，默认居中对齐-->
            <div class="text-ellip" :style="'justify-content:' + part.style">
              <span class="text-portion">
                {{ item[part.key] }}
              </span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref, watch } from "vue";
export default {
  props: {
    //父组件的table数据
    dataSource: {
      type: Array,
      default: () => [],
    },

  //父组件的table头部数据，key和name是必传字段（key是对应的表格头部的字段，style是改列的对齐方式，默认居中对齐）
    headsData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const headsInfo = ref();
    const tableInfo = ref();
    watch(
      () => props,
      (val) => {
        tableInfo.value = val.dataSource;
        headsInfo.value = val.headsData;
      },
      { deep: true, immediate: true }
    );
    return {
      headsInfo,
      tableInfo,
    };
  },
};
</script>

<style scope>
.table-hover {
  width: 100%;
}
.table-border {
  border: 1px solid #ededed;
}
.table-header {
  background: #f7f7f7;
  height: 70px;
  text-align: center;
  vertical-align: middle;
}
.table-body {
  height: 70px;
  vertical-align: middle;
  width: 140px;
}
.text-ellip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin: 0 4px;
}
.text-portion {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>

表格样式