前端自定义富文本表格

LXXgalaxy

于 2024-05-20 19:31:09 发布

阅读量210

点赞数 2

分类专栏： vue 自封组件 css 文章标签：前端 servlet

本文链接：https://blog.csdn.net/galaxyJING/article/details/139040957

版权

vue 同时被 3 个专栏收录

35 篇文章 1 订阅

订阅专栏

自封组件

20 篇文章 1 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

源码

dom那部分

 <div class="fsyt_cell_body">
              <div class="fsyt_table_head">
                <div class="fsyt_table_th">星期一</div>
                <div class="fsyt_table_th">星期二</div>
                <div class="fsyt_table_th">星期三</div>
                <div class="fsyt_table_th">星期四</div>
                <div class="fsyt_table_th">星期五</div>
                <div class="fsyt_table_th">星期六</div>
                <div class="fsyt_table_th">星期日</div>
              </div>
              <div class="fsyt_table_row">
                <div class="fsyt_month">4月</div>
                <div class="fsyt_table_tr" v-for="(item, index) in dateList.slice(0, 7)" :key="index">{{ item.date }}
                  <div class="fsyt_table_info" v-if="!!item.info">{{ item.info }}</div>
                </div>
              </div>
              <div class="fsyt_table_row">
                <div class="fsyt_table_tr" v-for="(item, index) in dateList.slice(7, 14)" :key="index">{{ item.date }}
                  <div class="fsyt_table_info" v-if="!!item.info">{{ item.info }}</div>
                </div>
              </div>
              <div class="fsyt_table_row">
                <div class="fsyt_table_tr" v-for="(item, index) in dateList.slice(14, 21)" :key="index">{{ item.date }}
                  <div class="fsyt_table_info" v-if="!!item.info">{{ item.info }}</div>
                </div>
              </div>
              <div class="fsyt_table_row">
                <div class="fsyt_table_tr" v-for="(item, index) in dateList.slice(21, 29)" :key="index">{{ item.date }}
                  <div class="fsyt_table_info" v-if="!!item.info">{{ item.info }}</div>
                </div>
              </div>
            </div>

css：

 .fsyt_table_head{
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #FFF;
        height: 1.4rem;
        line-height: 1.4rem;
        background: #336d9850;
        .fsyt_table_th{
          width: calc(100% / 7);
          font-size: .7rem;
          text-align: center;
        }
      }
      .fsyt_table_row{
        display: flex;
        position: relative;
        align-items: center;
        justify-content: space-around;
        color: #FFFFFF;
        height: calc((100% - 1.4rem) / 4);
        background: #00315C7F;
        .fsyt_month{
          position: absolute;
          left: 0;
          padding-left: 4px;
          background-color: #00b7ff30;
          border-radius: 0 .5rem .5rem 0;
          top: 0;
          width: calc(100% / 24);
          height: 1rem;
          line-height: 1rem;
          font-size: .6rem;
          color: #529eda;
        }
        .fsyt_table_info{
          font-size: .5rem;
          line-height: .55rem;
          color: #a3f9f8;
        }
        .fsyt_table_tr{
          width: calc(100% / 7);
          font-size: .7rem;
          border-right: 1px solid #153d62;
          text-align: center;
          color: #15ecdc;
        }
        &:nth-child(2n+1) {
          background: #336d9850;
        }
      }