原生table表头固定写法和checkbox样式重写

一个由面试题引起的案例分享

需求如下：

 在不使用任何UI框架的前提下完成上图效果

提供数据源的函数如下：

function generate () {
  let data = [['Index', `Data1`, `Data2`, `Data3`]]

  for (let i = 0; i < 15; i++) {
    data.push([
      i+1, 
      parseInt(Date.now() + Math.random() * 10000000).toString(16), 
      parseInt(Date.now() + Math.random() * 10000000).toString(16),
      parseInt(Date.now() + Math.random() * 10000000).toString(16)
    ])
  }
  return data
}

细节要求：

1. 表头固定：当表格高度超出外部容器高度时，表格内部出现垂直滚动条，表头始终处于顶部可见

2. 第一列为多选列，支持单行勾选和全选。当部分行选中时，表头的勾选状态为“不确定”（即勾选框填充为横线），参考描述中的视图

代码实现如下（vue）：

页面代码：

<template>
  <div class="container">
    <table cellspacing="0">
      <thead>
      <tr>
        <th class="w2">
          <span class="checkbox-span"
                :class="[isAllChecked ? 'is-checked' : (isIndeterminate ? 'is-indeterminate' : '')]">
            <span class="checkbox-inner" @click="getAllChecked()"></span>
            <input type="checkbox" class="checkbox-original" ref="allCheckedRef"/>
          </span>
        </th>
        <th v-for="item in allData[0]" class="tl">{{item}}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="items in contentData">
        <td class="w2">
          <input type="checkbox" :value="items[0]" v-model="checkedId"/></td>
        <td v-for="item in items" class="tl">
          {{item}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

JS代码：

<script>
  export default {
    name: "Home",
    data() {
      return {
        // 所有的源数据(包括表头和内容)
        allData: [],
        // 内容数据
        contentData: [],
        // 是否全部选中
        isAllChecked: false,
        // 是否部分选中
        isIndeterminate: false,
        // 所有的id
        ids: [],
        // 选中的id
        checkedId: [],
      }
    },
    mounted() {
      // 获取源数据
      this.generate();
      // 获取所有的ids
      this.getIds();
    },
    watch: {
      // 监听选中的id
      checkedId: {
        handler: function (val, oldVal) {
          // 如果选中的id和全部id长度相等，表示全选中
          if (val.length === this.ids.length) {
            // 设置全选状态为true
            this.isAllChecked = true;
            // 设置部分选中状态为false
            this.$refs.allCheckedRef.indeterminate = false;
            this.isIndeterminate = false;
            // 表示部分选中
          } else if (val.length != 0 && val.length != this.ids.length) {
            this.isAllChecked = false;
            this.$refs.allCheckedRef.indeterminate = true;
            this.isIndeterminate = true;
          } else {
            // 表示一个都没有选中
            this.isAllChecked = false;
            this.$refs.allCheckedRef.indeterminate = false;
            this.isIndeterminate = false;
          }

          console.log("提交到后台的id");
          console.log(val);
        },
        deep: true
      }
    },
    methods: {
      // 点击全选按钮事件
      getAllChecked() {
        this.isAllChecked = !this.isAllChecked;
        // 全选了
        if (this.isAllChecked) {
          this.checkedId = [];
          // 将选中的id设置为所有的id，提交到后台
          for (let i = 0; i < this.ids.length; i++) {
            this.checkedId.push(this.ids[i]);
          }
        // 没有全选
        } else {
          this.checkedId = [];
        }
      },
      // 获取所有的ids
      getIds() {
        if (this.allData && this.allData.length > 0) {
          if (this.contentData && this.contentData.length > 0) {
            for (let i = 0; i < this.contentData.length; i++) {
              this.ids.push(this.contentData[i][0]);
            }
          }
        }
      },
      // 获取源数据
      generate() {
        let data = [['Index', `Data1`, `Data2`, `Data3`]]
        for (let i = 0; i < 15; i++) {
          data.push([
            i + 1,
            parseInt(Date.now() + Math.random() * 10000000).toString(16),
            parseInt(Date.now() + Math.random() * 10000000).toString(16),
            parseInt(Date.now() + Math.random() * 10000000).toString(16)
          ])
        }
        this.allData = data;
        // 获取内容数据
        this.contentData = this.allData.slice(1);
      }
    },

  }
</script>

样式代码：

<style scoped lang="scss">

  table {
    margin: 3rem auto;
    width: 20rem;
    overflow: scroll;
  }
  /***************重写 checkbox 样式 start*****************/
  .checkbox-span {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
  }



  .checkbox-inner {
    display: inline-block;
    position: relative;
    border: 1px solid rgb(44, 62, 80);
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

    /*鼠标悬浮样式*/
    &:hover {
      border-color: #409eff;
    }

    &:after {
      box-sizing: content-box;
      content: "";
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(
          45deg
      ) scaleY(0);
      width: 3px;
      transition: transform .15s ease-in .05s;
      transform-origin: center;
    }

  }

  /*默认checkbox样式*/
  .checkbox-original {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }

  /*部分选中*/
  .checkbox-span.is-indeterminate .checkbox-inner {
    background-color: #409eff;
    border-color: #409eff;

    &:before {
      content: "";
      position: absolute;
      display: block;
      background-color: #fff;
      height: 2px;
      transform: scale(.5);
      left: 0;
      right: 0;
      top: 5px;
    }
  }

  /*全部选中*/
  .checkbox-span.is-checked .checkbox-inner {
    background-color: #409eff;
    border-color: #409eff;

    &:after {
      transform: rotate(
          45deg
      ) scaleY(1);
    }
  }

  /***************重写 checkbox 样式 end*****************/

  th, td {
    border: 1px solid rgb(225, 225, 225);
    min-width: 10rem;
    height: 0.5rem;
    padding: 0.3rem;
  }

  thead {
    display: block;
  }

  tbody {
    display: block;
    height: 23rem;
    overflow-y: scroll;
  }

  .tl {
    text-align: left;
  }
  .w2 {
    min-width: 2rem;
  }
  th, tr:nth-child(even){
    background-color: rgb(249,249,249);
  }

  /********** 设置滚动条的样式 start************ */
  ::-webkit-scrollbar {
    width: 5px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
  }

  /********** 设置滚动条的样式 end ************ */
</style>

该demo是在vue环境中写的，使用的时候需要vue环境，样式使用了scss编译器

主要参考价值在于：

1.原生table实现表头固定，内容出现滚动条

2.重写checkbox样式，使最上方checkbox在部分选中是展示蓝色背景、白色横线样式效果

3.因为时间有限，没有改写所有的checkbox，只改写了最上方的一个

4.将所有的ID和选中的ID存入数组，通过遍历来记录和读取该项选中与否