tuniao-ui/vipPage/components/table/basic/index.vue

<template>
  <view class="vip-components-table__basic">
    
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>基础表格</tn-nav-bar>
    
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      
      <demo-title title="默认表格">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :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" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="调整宽度 方式1">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="index === 2 ? 16 : 8" :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="idx === 2 ? 16 : 8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="调整宽度 方式2">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :grow="index === 2" :width="['90px','160rpx','auto'][index]" :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" :grow="idx === 2" :width="['90px','160rpx','auto'][idx]" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="居中对齐">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :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" alignItems="center" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="右对齐">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" alignItems="right" :bold="true" :span="8" :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" alignItems="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="居中对齐之文字右对齐">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" alignItems="center" :bold="true" :span="8" :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" alignItems="center" textAlign="right" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="去掉纵向边框">
        <tn-table :borderRight="true">
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :borderRight="false" :bold="true" :span="8" :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" :borderRight="false" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="无边框">
        <tn-table borderWidth="0">
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :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" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="自定义颜色">
        <tn-table borderColor="#FFFFFF">
          <tn-tr backgroundColor="transparent" borderColor="#FFFFFF" fontColor="#01BEFF" :fontSize="34">
            <tn-td v-for="(item, index) in header" :key="index" borderColor="#FFFFFF" :bold="true" :span="8" :keys="item.key">{{ item.title }}</tn-td>
          </tn-tr>
          <tn-tr v-for="(item, index) in listData" :key="index" :index="item.id" backgroundColor="transparent" borderColor="#FFFFFF">
            <tn-td v-for="(data, idx) in header" :key="idx" borderColor="#FFFFFF" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <demo-title title="文字超出隐藏">
        <tn-table>
          <tn-tr>
            <tn-td v-for="(item, index) in header" :key="index" :bold="true" :span="8" :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" :ellipsis="true" :key="idx" :span="8" :keys="data.key" @click="handleClick($event, item.id)">{{ item[data.key] }}</tn-td>
          </tn-tr>
        </tn-table>
      </demo-title>
      
      <view class="tn-padding-bottom-lg"></view>
      
    </view>
  </view>
</template>

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

<style lang="scss" scoped>
  .vip-components-table__basic {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
</style>