tuniao-ui/vipPage/components/table/fixed-column/index.vue

<template>
  <view class="vip-components-table__fixed-column">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>固定列表格</tn-nav-bar>
    
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <demo-title title="表格叠加">
        <view style="position: relative;">
          <tn-table :borderLeft="false">
            <tn-tr>
              <tn-td
                v-for="(item, index) in header"
                :key="index"
                :bold="true"
                :span="8"
                :borderLeft="index === 0"
                :backgroundColor="index === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
                :hidden="index !== 0"
                :fixed="index === 0"
                :shrink="false"
                :keys="item.key"
              >{{ item.title }}</tn-td>
            </tn-tr>
            <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
              <tn-td
                v-for="(data, idx) in header"
                :key="idx"
                :span="8"
                :borderLeft="idx === 0"
                :backgroundColor="idx === 0 ? 'tn-bg-blue--light' : '#FFFFFF'"
                :hidden="idx !== 0"
                :fixed="idx === 0"
                :shrink="false"
                :keys="data.key"
                @click="handleClick($event, item.id)"
              >{{ item[data.key] }}</tn-td>
            </tn-tr>
          </tn-table>
          <scroll-view class="scroll-view" scroll-x>
            <tn-table :borderLeft="false">
              <tn-tr>
                <tn-td
                  v-for="(item, index) in header"
                  :key="index"
                  :bold="true"
                  :span="8"
                  :hidden="index === 0"
                  :shrink="false"
                  :keys="item.key"
                >{{ item.title }}</tn-td>
              </tn-tr>
              <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
                <tn-td
                  v-for="(data, idx) in header"
                  :key="idx"
                  :span="8"
                  :hidden="idx === 0"
                  :shrink="false"
                  :keys="data.key"
                  @click="handleClick($event, item.id)"
                >{{ item[data.key] }}</tn-td>
              </tn-tr>
            </tn-table>
          </scroll-view>
        </view>
      </demo-title>
      
      <demo-title title="表格叠加-多列">
        <view style="position: relative;">
          <tn-table :borderLeft="false">
            <tn-tr>
              <tn-td
                v-for="(item, index) in header"
                :key="index"
                :bold="true"
                :span="[0,1].includes(index) ? 6 : 8"
                :borderLeft="index === 0"
                :backgroundColor="[0,1].includes(index) ? 'tn-bg-blue--light' : '#FFFFFF'"
                :hidden="![0,1].includes(index)"
                :fixed="[0,1].includes(index)"
                :shrink="false"
                :keys="item.key"
              >{{ item.title }}</tn-td>
            </tn-tr>
            <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
              <tn-td
                v-for="(data, idx) in header"
                :key="idx"
                :span="[0,1].includes(idx) ? 6 : 8"
                :borderLeft="idx === 0"
                :backgroundColor="[0,1].includes(idx) ? 'tn-bg-blue--light' : '#FFFFFF'"
                :hidden="![0,1].includes(idx)"
                :fixed="[0,1].includes(idx)"
                :shrink="false"
                :keys="data.key"
                @click="handleClick($event, item.id)"
              >{{ item[data.key] }}</tn-td>
            </tn-tr>
          </tn-table>
          <scroll-view class="scroll-view" scroll-x>
            <tn-table :borderLeft="false">
              <tn-tr>
                <tn-td
                  v-for="(item, index) in header"
                  :key="index"
                  :bold="true"
                  :span="[0,1].includes(index) ? 6 : 8"
                  :hidden="[0,1].includes(index)"
                  :shrink="false"
                  :keys="item.key"
                >{{ item.title }}</tn-td>
              </tn-tr>
              <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id">
                <tn-td
                  v-for="(data, idx) in header"
                  :key="idx"
                  :span="[0,1].includes(idx) ? 6 : 8"
                  :hidden="[0,1].includes(idx)"
                  :shrink="false"
                  :keys="data.key"
                  @click="handleClick($event, item.id)"
                >{{ item[data.key] }}</tn-td>
              </tn-tr>
            </tn-table>
          </scroll-view>
        </view>
      </demo-title>
      
      <view class="tn-padding-bottom-lg"></view>
      
    </view>
  </view>
</template>

<script>
  import demoTitle from '@/libs/components/demo-title.vue'
  export default {
    name: 'VipComponentsFixedColumnTable',
    components: { demoTitle },
    data() {
      return {
        header: [
          { title: '日期', key: 'date' },
          { title: '销售金额', key: 'salePrice' },
          { title: '收益', key: 'income' },
          { title: '顾客数量', key: 'customers' },
          { title: '备注', key: 'note' }
        ],
        listData: [
          { id: 1, date: '20220301', salePrice: '1,000', income: '800', customers: '600', note: '今天的销售额一般般呀' },
          { id: 2, date: '20220302', salePrice: '1,000,00', income: '8000', customers: '2000', note: '今天的销售额还不错嘛' },
          { id: 3, date: '20220303', salePrice: '4000', income: '2000', customers: '1500', note: '今天的销售额还行啦' }
        ]
      }
    },
    methods: {
      // 处理点击事件
      handleClick(e, id) {
        this.$tn.message.toast(`点击了[${e.key}]id为${id}的选项`)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vip-components-table__fixed-column {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    
    .scroll-view {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }
</style>