<template>
  <view class="vip-component-table tn-safe-area-inset-bottom">
  
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>表格</tn-nav-bar>
  
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <multiple-options-demo
        :list="optionsList"
      ></multiple-options-demo>
      
      <view class="tn-padding-bottom-lg"></view>
  
    </view>
  
  </view>
</template>

<script>
  import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
  
  export default {
    name: 'VipComponentsTable',
    components: { multipleOptionsDemo },
    data() {
      return {
        // 选项列表数据
        optionsList: [
          { title: '普通表格', desc: '表格基本使用', url: '/vipPage/components/table/basic/index' },
          { title: '斑马纹表格', desc: '带斑马纹的表格', url: '/vipPage/components/table/stripe/index' },
          { title: '固定头部表格', desc: '固定头部表格', url: '/vipPage/components/table/fixed-header/index' },
          { title: '固定列表格', desc: '固定列表格', url: '/vipPage/components/table/fixed-column/index' },
          { title: '多表头表格', desc: '多表头表格', url: '/vipPage/components/table/multi-header/index' },
          { title: '复杂表格', desc: '复杂表格', url: '/vipPage/components/table/complex/index' }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
