press-next/press-match-rank-list/demo-data/index.ts

Vue3 组件库，支持 Composition API

export interface RankItem {
  rank: number;
  showRankText?: boolean;
  avatar: string;
  name?: string;
  [key: string]: any; // 支持自定义字段
}
/**
 * 列配置接口
 */
export interface ColumnConfig {
  key: string; // 列标识
  visible?: boolean; // 是否可见，默认true
  width?: string; // 列宽度，如 '1.5rem', 'auto'
  minWidth?: string; // 最小宽度，如 '1rem'
  align?: 'left' | 'center' | 'right'; // 文本对齐方式，默认left
}


export function getMockData() {
  // 场景1: 5列展示 + 支持横向滚动
  const scene1List: RankItem[] = [
    {
      rank: 1,
      showRankText: true,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '大白兔吃萝卜',
      dataObject: {
        phone: '18505556789',
        score: 15,
        address: '网鱼网吧华山街店',
      },
    },
    {
      rank: 2,
      showRankText: true,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '小明同学',
      dataObject: {
        phone: '13800138000',
        score: 12,
        address: '网鱼网吧人民路店',
      },
    },
    {
      rank: 3,
      showRankText: true,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '游戏高手2',
      dataObject: {
        phone: '15900159000',
        score: 10,
        address: '网鱼网吧中山路店',
      },
    },
    {
      rank: 4,
      showRankText: true,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '电竞达人',
      dataObject: {
        phone: '18600186000',
        score: 8,
        address: '网鱼网吧解放路店',
      },
    },
    {
      rank: 5,
      showRankText: false,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '王者玩家',
      dataObject: {
        phone: '13700137000',
        score: 6,
        address: '网鱼网吧建设路店',
      },
    },
    {
      rank: 6,
      showRankText: false,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '大白兔奶糖',
      dataObject: {
        phone: '18505556789',
        score: 15,
        address: '网鱼网吧建设路店',
      },
    },
  ];

  // 场景2: 使用列配置控制显示
  const scene2Columns: ColumnConfig[] = [
    { key: 'phone', visible: true },
    { key: 'score', visible: false },
    { key: 'address', visible: true },
  ];

  // 组件属性配置
  const componentProps = {
    // 场景1的列表数据
    scene1List,

    // 场景2的列配置
    scene2Columns,
  };

  return componentProps;
}

const DEMO_DATA = {
  ...getMockData().scene1List[0],
};

export default DEMO_DATA;