封装个table

最新推荐文章于 2024-08-24 13:47:49 发布

wcsy2018110

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量293

点赞数 5

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_48378883/article/details/137687981

版权

<template>
  <div class="table">
    <div class="thead">
      <div class="tr" style="padding-right: 10px;">
        <div class="td" v-for="col in columns" :key="col.key">{{ col.title }}</div>
      </div>
    </div>
    <div class="tbody" :style="{height: tableheight}" style="overflow-y: scroll;">
      <div class="tr" v-for="row in data" :key="row.key" style="margin-bottom: 10px;">
        <div class="td" v-for="col in columns" :key="col.key">{{ row[col.key]?row[col.key]:"-" }}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      columns: {
        type: Array,
        default () {
          return [];
        }
      },
      data: {
        type: Array,
        default () {
          return [];
        }
      },
      tableheight: {
            type: [String, Number],
            default: "500px",
        },
    }
  };
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
};
::-webkit-scrollbar-track {
  background: rgba(11,31,100,0.1);
  border-radius: 0;
};
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: rgb(2,124,233);
  transition: color 0.2s ease;
  border-radius: 15px;
};
  .table{
    width: 100%;
    padding: 5px;
    .thead{
      .tr{
        display: flex;
        justify-content: space-between;
        color: rgba(255,255,255,0.6);
        font-weight: 600;
        white-space: nowrap;
        .td{
          padding: 8px 16px;
          text-align: center;
          width: @td-width;
        }
        .td:nth-child(1){
            width: @td-1-width;
          }
        /* .td:nth-child(2){
          margin-right: 20px;
        } */
      }
    }
    .tbody{
        .tr{
          width: 100%;
          display: flex;
          background-color: rgba(8,32,85,1);
          .td{
            padding: 8px 16px;
            text-align: center;
            width: @td-width;
          }
          .td:nth-child(1){
            width: @td-1-width;
          }
          .td:nth-child(2){
            padding-right: 30px;
          }
          .td:nth-child(3){
            padding-right: 40px;
          }
          .td:nth-child(4){
            padding-right: 50px;
          }
          .td:nth-child(5){
            padding-right: 50px;
          }
        }
      }
  }
  
</style>