Vue中自定义实现类似el-table的表格效果实现行颜色根据数据去变化展示

  主要使用div布局实现表格效果，并使用渐变实现行背景渐变的效果

页面布局 

<div class="table-wrap">
      <div class="table-title">
        <div
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :style="{
            width: item.width + 'px'
          }"
          :align="item.align"
        >
          {{ item.label }}
        div>
        
      div>
      <div class="table-body">
        <div
          class="live-row"
          v-for="(item, index) in tableData"
          :class="{
            'long-bg-color': item.flag == 0,
            'short-bg-color': item.flag == 1
          }"
          :key="index"
        >
          <div class="prop1">
            <img :src="getExchangeIcon(item.pt)" />
            {{ item.pt }}
          div>
          <div class="prop2">
            {{ item.bz }}
          div>
          <div class="prop3">
            {{ item.bcjg }}
          div>
          <div class="prop4">
            {{ item.je }}
          div>
          <div class="prop5">
            {{ formatTime(item.sj, 'MM-DD HH:mm:ss') }}
          div>
        div>
      div>
    div>

数据

const tableColumn = ref([
  {
    label: '平台',
    prop: 'pt',
    width: 115,
    align: 'left'
  },
  {
    label: '币种',
    prop: 'bz',
    width: 105,
    align: 'left'
  },
  {
    label: '爆仓价格',
    prop: 'bcjg',
    width: 100,
    align: 'center'
  },
  {
    label: '金额',
    prop: 'je',
    width: 100,
    align: 'right'
  },
  {
    label: '时间',
    prop: '时间',
    width: 120,
    align: 'right'
  }
]);
const tableData = [
  {
    pt: '123',
    bz: '123',
    bcjg: '$2342.1',
    je: '$2342.1万',
    sj: '1695106716182',
    flag: 1
  },
  {
    pt: '123',
    bz: '123',
    bcjg: '$2342.1',
    je: '$2342.1万',
    sj: '1695106716182',
    flag: 0
  },
  {
    pt: '123',
    bz: '123',
    bcjg: '$2342.1',
    je: '$2342.1万',
    sj: '1695106716182',
    flag: 0
  },
  {
    pt: '123',
    bz: '123',
    bcjg: '$2342.1',
    je: '$2342.1万',
    sj: '1695106716182',
    flag: 1
  }
];

样式部分

--table-bg-Short1: linear-gradient(
        to right,
        #ff000000,
        #d32f2f80 90%,
        #d32f2f80
      );
      --table-bg-Long1: linear-gradient(
        to right,
        #ff000000,
        #22ab942e 90%,
        #22ab9457
      );

.table-wrap {
    .prop1 {
      width: 115px;
      text-align: left;
    }
    .prop2 {
      width: 105px;
      text-align: left;
    }
    .prop3 {
      width: 100px;
      text-align: center;
    }
    .prop4 {
      width: 100px;
      text-align: right;
    }
    .prop5 {
      width: 120px;
      text-align: right;
    }
    .table-title {
      display: flex;
      color: #868e9b;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      border-bottom: 1px solid #252525;
      div {
        height: 50px;
        line-height: 50px;
      }
    }
    .table-body {
      height: 610px;
      overflow: auto;
      position: relative;
      .live-row {
        display: flex;
        height: 60px;
        line-height: 60px;
        color: #fff;
        font-family: DIN;
        font-size: 14px;
        border-bottom: 1px solid #252525;
        .prop1 {
          img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            vertical-align: middle;
          }
        }
      }
      --table-bg-Short1: linear-gradient(
        to right,
        #ff000000,
        #d32f2f80 90%,
        #d32f2f80
      );
      --table-bg-Long1: linear-gradient(
        to right,
        #ff000000,
        #22ab942e 90%,
        #22ab9457
      );
      .long-bg-color {
        background: var(--table-bg-Long1);
      }
      .short-bg-color {
        background: var(--table-bg-Short1);
      }
    }
  }