前端工作总结6+前端面试基础

蓝百合
207 阅读5分钟

以为自己偷懒了一周，没想到两周没总结了，惭愧。最近萌生了跳槽的想法，但又举棋不定，以现在的水平去面试估计分分钟被秒。还是先打好基础。

想要留下的代码

最近有个需求是在table表格的表头的某一列增加状态筛选，在网上找到了一写相关代码，顺便优化了一下，将当前选中的状态高亮

 <el-table-column prop="status" label="审批状态">
    <template slot="header">
        <el-dropdown trigger="click" @command="handleStatus" size="mini">
            <span style="color:#212121">
                  审批状态
                 <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                    v-for="item in EQUIPMENT_STATUS"
                    :key="item.label"
                    :command="item.value"
                    :class="{ activeClass: item.value === form.status }"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
        </template>
    </jc-table-column>

遇到的坑

element时间选择器，type为daterange，选择时间范围但是值不回显，后来用下面的方法解决了，给时间选择器绑定input事件，然后在事件中使用this.$forceUpdate()强制更新

    <el-date-picker
        v-model="form.time"
        type="daterange"
        placeholder="选择日期时间"
        @input="change">
    </el-date-picker>
          
    change(curVal) {
      this.form.startTime =
        (curVal[0] && getDate(new Date(curVal[0])).ymd) + ' 00:00:00' || ''
      this.form.endTime =
        (curVal[1] && getDate(new Date(curVal[1])).ymd) + ' 23:59:59' || ''
      this.$forceUpdate()
    },

前端面试基础-页面布局

  1. 假设高度已知，请写出三栏布局，其中左右300px,中间自适应（页面布局.html 5种解决方案）
  2. 以上5种方案有什么优缺点，可从兼容性，实用性方面回答

  • 浮动问题，清除浮动，脱离文档流，兼容性好

  • 绝对定位布局脱离文档流，导致页面其他元素也得这么写，可使用性比较差

  • flex布局比较完美，移动端

  • 表格布局：兼容性好，历史诟病

  • 网格布局，移动端兼容性不太好

  1. 以上问题假设高度未知，中间元素高度撑开了，需要左右测也撑开，哪些适用（flex,table没问题）
  2. 上面方案兼容性如何，你会选择哪项
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>页面布局</title>
    <style>
      html * {
        padding: 0;
        margin: 0;
      }
      .layout {
        margin-top: 5px;
      }
      /*第一种*/
      .layout div {
        min-height: 100px;
      }
      .float .left {
        background-color: red;
        float: left;
        width: 300px;
      }
      .float .center {
        background-color: yellow;
      }
      .float .right {
        background-color: green;
        float: right;
        width: 300px;
      }
      .absolute div {
        position: absolute;
        margin-top: 5px;
      }
      .absolute .left {
        background-color: red;
        left: 0;
        width: 300px;
      }
      .absolute .center {
        left: 300px;
        right: 300px;
        background-color: yellow;
      }
      .absolute .right {
        background-color: green;
        right: 0;
        width: 300px;
      }
      .flex {
        margin-top: 220px;
      }
      .flex article {
        display: flex;
      }
      .flex .left {
        background-color: red;

        width: 300px;
      }
      .flex .center {
        flex: 1;
        background-color: yellow;
      }
      .flex .right {
        background-color: green;

        width: 300px;
      }

      .table article {
        display: table;
        width: 100%;
        margin-top: 20px;
      }
      .table article div {
        display: table-cell;
        height: 100px;
      }
      .table .left {
        background-color: red;
        width: 300px;
      }
      .table .center {
        background-color: yellow;
      }
      .table .right {
        background-color: green;

        width: 300px;
      }
      .grid article {
        display: grid;
        width: 100%;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .grid .left {
        background-color: red;
      }
      .grid .center {
        background-color: yellow;
      }
      .grid .right {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but client doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <!-- 第一种布局 -->
    <div id="app">
      <section class="layout float">
        <article class="left-right-center">
          <div class="left">左</div>
          <div class="right">右</div>
          <div class="center">
            <p>浮动解决方案</p>
            <p>浮动解决方案</p>
            <p>浮动解决方案</p>
            <p>浮动解决方案</p>
          </div>
        </article>
      </section>
      <section class="layout absolute">
        <article class="left-right-center">
          <div class="left">左</div>
          <div class="center">
            <p>绝对定位解决方案</p>
            <p>绝对定位解决方案</p>
            <p>绝对定位解决方案</p>
            <p>绝对定位解决方案</p>
          </div>
          <div class="right">右</div>
        </article>
      </section>
      <section class="layout flex">
        <article class="left-right-center">
          <div class="left">左</div>
          <div class="center">
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
            <p>flex解决方案</p>
          </div>
          <div class="right">右</div>
        </article>
      </section>
      <section class="layout table">
        <article class="left-right-center">
          <div class="left">左</div>
          <div class="center">
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
            <p>表格解决方案</p>
          </div>
          <div class="right">右</div>
        </article>
      </section>
      <section class="layout grid">
        <article class="left-right-center">
          <div class="left">左</div>
          <div class="center">
            <p>grid解决方案</p>
            <p>grid解决方案</p>
            <p>grid解决方案</p>
            <p>grid解决方案</p>
            <p>grid解决方案</p>
          </div>
          <div class="right">右</div>
        </article>
      </section>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝