使用日历组件并往上面放数据现在需要一个日历单元格内最多显示两条数据，其他的用省略号代替，应该怎么设计修改

<el-calendar v-model="value" :first-day-of-week="7" class="calendar" style="overflow: auto;">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div>{{ data.day.split('-').slice(2).join('-')}}</div>
                        <div v-for="(item,index) in tableData" :key="index">
                            <div v-if="(item.data.slice(0,4)).indexOf(data.day.slice(0,4))!=-1">
                                <div v-if="(item.data.split('-').slice(1)[0]).indexOf(data.day.split('-').slice(1)[0])!=-1">
                                    <div v-if="(item.data.split('-').slice(2).join('-').slice(0,2)).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                                            
                                            <div class="fc-day-grid-event" v-if="item.user=='wangwu'">
                                                <div style="color: #AA1111;">
                                                    {{item.title}}
                                                    </div>
                                            </div>
                                            <div class="fc-day-grid-event" v-else>
                                                <div style="color: #000000;">
                                                    {{item.title}}
                                                    </div>
                                            </div>
                                            
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-calendar>

这是代码设计。