Press Plus

# ScheduleTree

# Code Demo

# Basic Usage

<ScheduleTree
   :sche-list="scheList"
   :is-admin="isAdmin"
   :is-preview="isPreview"
/>


import ScheduleTree from 'press-plus/press-schedule-tree/press-schedule-tree.vue';

export default {
   components: {
     ScheduleTree,
   },
   data() {
     return {
       scheList: [],
       isAdmin: false,
       isPreview: 0,
     }
   },
   methods: {
   },
};

# API

# Props

Parameter Description Type Default
sche-list schedule list Array -
is-admin is admin Boolean false
is-preview Whether it is the preview stage, 0 is not, 1 is normal preview, 2 is preview, and the schedule is customized Number 0
my-teamId my team id String -
selected-sch-id selected schedule id String -
winner-name The name of the winner column, which can be champion, third place, etc. String -
page The page where the current schedule tree is located, available during group knockout Number 0
total-page The total number of pages of the schedule tree, available in group knockout matches Number 0
automatic-grouping Whether to automatically group Boolean false
show-champion Whether to show the champion column, it can be set to false in round robin Boolean true
shadow Whether to set interval shadows, it can be set to true in round robin Boolean false
auto-back-to-top Whether to automatically return to the top when scrolling left and right, can be set to false in round robin Boolean true
resume-position When the schedule data becomes less, the auto-scroll position when the right display is blank, can be left/right/number [String, Number] right
show-round-tab v0.8.32 Whether to display the round tab Boolean true
max-columns v0.8.32 The number of columns displayed at the same time, the excess will be hidden to improve performance Number 3
tabScrollWidth tab width String 164
scheduleScrollWidth The width of each column of the schedule tree String 164

# Events

Event Name Description Callback Parameters
clickRoundTab Click the round tab round.round_type, round
clickSche Click schedule group schId, scheGroup, schePair
clickVideoIcon Click the small video icon schId, scheGroup, schePair
clickFinalSche Click on the champion team -
scroll Triggered when scrolling left and right scrollTime (current scroll times, the leftmost is 0), roundTotal (total number of rounds)

# scheList

  • scheList is a two-dimensional array, each item of the first layer array corresponds to each column, and each item of the second layer array corresponds to the schedule group pair schePair.

  • schePair is composed of 1-2 schedule groups scheGroup, and 1 scheGroup has two teams.

  • Each schePair is an object, including battleList, roundInfo, isChamp and other attributes.

  • The name of battleList is inappropriate. Here it refers to scheGroupList. There are 2 battleList which means there are 2 schedule groups.

  • scheGroup contains teamList, nodeItem, schid, realStatus, bracketIdDesc, curBo, boType and other information

Sample data can be reference here (opens new window) .

← HorAwardExplain →