使用vue开发简单的table表格插件，表头固定，内容区可滚动

开发背景就不过多赘述了，直接先来几张效果图吧

 首先编写组件 tablePY.vue 代码如下：

<template>
  <div>
    <div class="table-head">
      <table class="layui-table" style="">
        <colgroup>
          <col v-for="(colItem, idx) in cols" :key="'col-' + idx" :style="{width: getColWidth(colItem)}"/>
        </colgroup>
        <thead>
          <tr>
            <th 
            v-for="(colItem, idx2) in cols" 
            :key="'th-' + idx2" 
            :style="{textAlign: getAlign(colItem)}"
            >{{ colItem.title }}</th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="table-body" :style="{height: getHeight()}">
      <table class="layui-table" style="background: #000127;">
        <colgroup>
          <col v-for="(colItem, idx3) in cols" :key="'col2-' + idx3" :style="{width: getColWidth(colItem)}"/>
        </colgroup>
        <tbody v-if="data && data.length > 0" >
          <tr v-for="(dtItem, idx5) in data" :key="'dt-' + idx5" :class="[idx5%2 == 1 ? 'color1' : '']">
            <td v-for="(colItem, idx6) in cols" :key="'col3-' + idx6" :style="{textAlign: getAlign(colItem)}">
              <div v-if="colItem.type && colItem.type == 'num'">{{ idx5 + 1 }}</div>
              <div v-else>{{ dtItem[colItem.field] }}</div>
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr class="color1">
            <td :colspan="cols.length" style="text-align: center;">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div :class="[isShow==5?'load_more':'load_more1']" v-if="isload">
      <div @click="loadMore()">加载更多<img src="../assets/images/loadMore.png" alt=""></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    "cols": {
      type: Array,
      default: [
        {type: "num", title: '序号'},
        {field: "field1", title: '字段1'},
        {type: "field2", title: '字段2'},
      ]
    }, 
    "data": {
      type: Array,
      default: []
    }, 
    "isload": {
      type: Boolean,
      default: false
    }, 
    "height": {
      type: String|Number,
      default: 190
    }
  },
  data() {
    return {
      datas: []
    }
  },
  methods: {
    loadMore() {
      this.$emit('loadMore');
      return false;
    },
    getTitle(colItem) {
      const title = colItem.title;
      if (title) {
        return title;
      } else {
        if (colItem.type && colItem.type == 'num') {
          return '序号';
        } else {
          return colItem.field;
        }
      }
    },
    getColWidth(colItem) {
      const type = colItem.type;
      const width = colItem.width;
      if (width) {
        if ((width + '').slice(-1) == '%' || (width + '').slice(-2) == 'px') {
          return width;
        } else {
          return width + 'px';
        }
      } else {
        if (type && 'num' == type) {
          return 80 + 'px';
        } else {
          return 'auto';
        }
      }
    },
    getAlign(colItem) {
      const align = colItem.align;
      if (align && ('center' == align || 'left' == align || 'right' == align)) {
        return align;
      } else {
        return left;
      }
    },
    getHeight() {
      if ((this.height + '').slice(-1) == '%' || (this.height + '').slice(-2) == 'px') {
        return this.height;
      } else {
        if (Number(this.height) < 90) {
          return '90px';
        } else {
          return this.height + 'px';
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.table-body {
  width: 100%;
  overflow-y: auto;
}

.table-body::-webkit-scrollbar {
  width: 0;
}

table.layui-table {
  margin: 0;
  width: 100%;
  color: #ffffff;
  background: rgba(14, 43, 117, 0.5);
  thead {
    tr {
      background: rgba(14, 43, 117, 0.5);
    }
  }
  // tr {
  //   width: 100%;
  //   display: flex;
  //   overflow: hidden;
  //   background: rgba(14, 43, 117, 0.5);
  // }
  th, td {
    padding: 5px;
    border: none;
  }
  .color1 {
    background: #07164e;
  }
  tbody tr:hover {
    background: rgba(14, 43, 117, 0.8);
  }
}
.load_more {
  margin-top: 0.4rem;
  width: 110%;
  height: 0.45rem;
  border: 0.01rem solid #32c5ff;
  font-size: 0.16rem;
  line-height: 0.45rem;
  text-align: center;
  cursor: pointer;
  margin-bottom: 0.5rem;
  color: #32c5ff;
  img {
    width: 0.2rem;
    height: 0.12rem;
  }
}
.load_more1 {
  margin-top: 0.4rem;
  width: 100%;
  height: 0.45rem;
  border: 0.01rem solid #32c5ff;
  font-size: 0.16rem;
  line-height: 0.45rem;
  text-align: center;
  cursor: pointer;
  margin-bottom: 0.5rem;
  color: #32c5ff;
  img {
    width: 0.2rem;
    height: 0.12rem;
  }
}
</style>

然后编写页面 presellTable.vue 并引入上面的组件，代码如下：

<template>
  <div class="cloud_wrap">
    <border-tem-py :width="'100%'">
      <!-- 插槽模板 -->
      <div class="title" slot="title">预售情况</div>
      <!-- <div class="btns-box" slot="btns">
        <span class="btn first" :class="{'active': active=='commodity'}" @click="btnClick('commodity')">新建商品房</span>
        <span class="btn last" :class="{'active': active=='stock'}" @click="btnClick('stock')">存量房</span>
      </div> -->
      <div class="content-box" slot="content">
        <div class="layui-row">
          <table-py :cols="cols" :data="dataList" :height="190" :isload="isLoad" />
        </div>
      </div>
    </border-tem-py>
  </div>
</template>
<script>
import tablePy from "../../../../common/tablePY.vue"; // 路径根据自己实际项目中的进行修改
export default {
  components: {
    tablePy
  },
  data() {
    return {
      active: 'commodity',
      isLoad: false,
      cols: [
        {type: 'num', title: '序号', width: 80, align: 'center'},
        {field: 'field1', title: '小区名称', align: 'center' },
        {field: 'field2', title: '所在地', align: 'center' },
        {field: 'field3', title: '预售数量', align: 'center', width: 90 },
        {field: 'field4', title: '预售金额', align: 'center', width: 90 }
      ],
      dataList: [],
    };
  },
  methods:{
    btnClick(val) {
      this.active = val;
      this.loadData();
    },
    loadData() {
      let params = {
        type: this.active
      };
      this.dataList = [
        {field1: 'xxx小区', field2: '测试区1', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试县2', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试区', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试县', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试区', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试县', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试区', field3: 3551, field4: 2356, field5: 1235},
        {field1: 'xxx小区', field2: '测试县', field3: 3551, field4: 2356, field5: 1235},
      ]
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style scoped>
* {
  font-family: MicrosoftYaHei;
}

.cloud_wrap{
  z-index: 1;
  position: relative;
  cursor: pointer;
}

.cloud_wrap .btns-box .btn {
  padding: 2px 12px;
}

.cloud_wrap .layui-col-md12 {
  min-width: 175px;
  height: 230px;
}
</style>

然后再相关页面中再引入 presellTable.vue 并使用即可；

 

小贴士：

html中的调色与透明度：https://www.cnblogs.com/jindao3691/p/16093404.html

 

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！