Table de base

Avant de développer le composant table, réfléchissez au type d'API que vous souhaitez utiliser. étant donné que l'auteur utilise l'élément dans le travail de production, les styles des composants précédents sont similaires à ceux de l'élément, mais je n'ai pas l'intention de le faire. J'utilise le style element cette fois, je prévois de le changer et de l'afficher directement?:
Nous attendons des utilisateurs qu'ils l'utilisent comme ceci?:

<script setup>
const dataList = [
  {
    id: 1,
    name: &#39;《JavaEE企業(yè)應(yīng)用實(shí)戰(zhàn)》&#39;,
    author: &#39;dev1ce&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;書(shū)中最后講解的項(xiàng)目案例，涵蓋從前期設(shè)計(jì)到最終實(shí)施的整個(gè)過(guò)程，對(duì)全書(shū)知識(shí)點(diǎn)進(jìn)行串聯(lián)和鞏固，使讀者融會(huì)貫通，掌握J(rèn)ava Web開(kāi)發(fā)的精髓。&#39;
  },
  {
    id: 2,
    name: &#39;《代碼整潔之道》&#39;,
    author: &#39;R0bert&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;整潔代碼并非遵循一組規(guī)則編寫(xiě)的。不可能因?yàn)閷W(xué)習(xí)一套金規(guī)玉律就成為軟件大師。專(zhuān)業(yè)精神和手工藝來(lái)自于推動(dòng)規(guī)則形成的價(jià)值。&#39;
  },
  {
    id: 3,
    name: &#39;《ECMAScript 6 入門(mén)教程》&#39;,
    author: &#39;y1feng&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;本書(shū)是一本開(kāi)源的 JavaScript 語(yǔ)言教程，全面介紹 ECMAScript 6 新引入的語(yǔ)法特性。&#39;
  },
]
const columnsList = [
  {
    title: &#39;書(shū)名&#39;,
    key: &#39;name&#39;
  },
  {
    title: &#39;作者&#39;,
    key: &#39;author&#39;
  },
  {
    title: &#39;價(jià)格&#39;,
    key: &#39;price&#39;
  },
  {
    title: &#39;簡(jiǎn)介&#39;,
    key: &#39;desc&#39;
  }
]
</script>
<template>
    <sanorin-table :columns="columnsList" :data="dataList"/>
</template>

écrivez le code suivant selon ceci

<script setup>
  import { ref, computed } from &#39;vue&#39;
  import { useProp, useNeumorphism } from &#39;../mixin/neumorphism&#39;
  const props = defineProps({
      ...useProp,
      ...{
        data: { // dataList
            type: Array,
            default: () => [],
        },
        columns: { // columnsList
            type: Array,
            default: () => [],
        },
      }
  })
  const { baseStyleObject } = useNeumorphism(props)
  let styleObject =  computed(() => ({ 
    // &#39;--font-size&#39;: `${props.size-26}px`, &#39;--line-height&#39;: `${props.size-20}px`, &#39;--limit-size&#39;: `${props.size-28}px`
  }))
</script>
<template>
    <div :>
      <table >
        <thead>
          <tr class="neumorphism">
            <!-- 表頭循環(huán) -->
            <th v-for="col in columns" :key="col.key">{{col.title}}</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表體循環(huán) -->
          <tr class="neumorphism" v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key">
              <span>
                {{row[col.key]}}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>
<script>
  export default {
    name: &#39;sanorin-table&#39;,
  }
</script>
<style scoped>
  @import "../../style/index.css";
  @import "../../style/neumorphism.css";
  table {
    width: 100%;
    /* border-collapse: collapse; */
    empty-cells: show;
    border-collapse:separate;
    border-spacing:0px 10px;
  }
  table td,
  table th {
    color: var(--text-color);
    padding: 8px 16px 8px 16px;
    text-align: left;
  }
  table th {
    color: var(--text-back-color) !important;
    font-weight: 600;
    white-space: nowrap;
  }
  table tr{
    margin-top: 20px;
  }
</style>

L'effet final est?:

Ensuite, après avoir mis en ?uvre cela, nous avons commencé à le faire. Ensuite, commen?ons par réparer la tête du compteur.

En-tête de compteur fixe

La première méthode sera utilisée ici si elle ne peut pas répondre aux besoins à l'avenir, elle sera remplacée par la méthode ultérieure.
L'effet et le code sont les suivants?:

<script setup>
  import { ref, computed } from &#39;vue&#39;
  import { useProp, useNeumorphism } from &#39;../mixin/neumorphism&#39;
  const props = defineProps({
      ...useProp,
      ...{
        data: { // dataList
            type: Array,
            default: () => [],
        },
        columns: { // columnsList
            type: Array,
            default: () => [],
        },
      }
  })
  const { baseStyleObject } = useNeumorphism(props)
  let styleObject =  computed(() => ({ 
  }))
</script>
<template>
    <div class="san-table scrollbar" :>
      <table>
        <thead>
            <tr class="neumorphism">
              <!-- 表頭循環(huán) -->
              <th v-for="col in columns" :key="col.key">{{col.title}}</th>
            </tr>
        </thead>
        <tbody>
          <!-- 表體循環(huán) -->
          <tr class="neumorphism" v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key">
              <span>
                {{row[col.key]}}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>
<script>
  export default {
    name: &#39;sanorin-table&#39;,
  }
</script>
<style scoped>
  @import "../../style/index.css";
  @import "../../style/neumorphism.css";
  .san-table{
    padding: 0px 20px 20px 20px;
    height: 200px;
    position: relative;
    width: 700px;
    overflow: auto;
  }
  table {
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    border-collapse:separate;
    border-spacing:0px 10px;
  }
  thead {
    position: sticky;
    top: 10px;
  }
  thead:before{
    position: absolute;
    content: &#39;&#39;;
    width: calc(100% + var(--shadow-blur) * 2);
    transform: translate(calc(var(--shadow-blur) * -1) , -10px);
    height: 20px;
    background-color: var(--main-color);
    z-index: -1;
  }
  table td,
  table th {
    color: var(--text-color);
    padding: 8px 16px 8px 16px;
    text-align: left;
  }
  table th {
    color: var(--text-back-color) !important;
    font-weight: 600;
    white-space: nowrap;
  }
</style>

Hauteur/Hauteur du fluide

Vous pouvez définir une hauteur pour la table. (hauteur)
Lorsque la quantité de données change dynamiquement, vous pouvez définir une hauteur maximale pour le tableau. (maxHeight) Spécifie la hauteur maximale de la table en définissant la propriété max-height. A ce moment, si la hauteur requise du tableau est supérieure à la hauteur maximale, une barre de défilement s'affichera.
Tant que l'attribut height ou maxHeight est défini dans l'élément sanorin-table, une table avec un en-tête fixe peut être implémentée sans code supplémentaire.
Le code est le suivant?:

<script setup>
  import { ref, computed, reactive } from &#39;vue&#39;
  import { useProp, useNeumorphism } from &#39;../mixin/neumorphism&#39;
  const props = defineProps({
      ...useProp,
      ...{
        data: { // dataList
            type: Array,
            default: () => [],
        },
        columns: { // columnsList
            type: Array,
            default: () => [],
        },
        height: {
          type: Number,
        },
        maxHeight: {
          type: Number,
        }
      }
  })
  // 高度設(shè)置
  let tableHeightStyleObj = computed(() => { 
    let styleObj = ((e) => {
      if (e.maxHeight) return { maxHeight: e.maxHeight + &#39;px&#39; }
      if (e.height) return { height: e.height + &#39;px&#39; }
      return {}
    })({...props})
    return styleObj
  })
  const { baseStyleObject } = useNeumorphism(props)
  let styleObject =  computed(() => ({ 
    ...tableHeightStyleObj.value
  }))
</script>
<template>
    <div class="san-table scrollbar" :>
      <table>
        <colgroup>
            <col v-for="(col, index) in columns" :key="index">
        </colgroup>
        <thead>
            <tr class="neumorphism">
              <th v-for="col in columns" :key="col.key"> {{col.title}} </th>
            </tr>
        </thead>
        <tbody>
          <tr class="neumorphism" v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key"> {{row[col.key]}} </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>
<script>
  export default {
    name: &#39;sanorin-table&#39;,
  }
</script>
<style scoped>
  @import "../../style/index.css";
  @import "../../style/neumorphism.css";
  .san-table{
    padding: 0px 20px 20px 20px;
    position: relative;
    width: 700px;
    overflow: auto;
  }
  table {
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    border-collapse:separate;
    border-spacing:0px 10px;
  }
  thead {
    position: sticky;
    top: 10px;
  }
  thead:before{
    position: absolute;
    content: &#39;&#39;;
    width: calc(100% + var(--shadow-blur) * 2);
    transform: translate(calc(var(--shadow-blur) * -1) , -10px);
    height: 20px;
    background-color: var(--main-color);
    z-index: -1;
  }
  table td,
  table th {
    color: var(--text-color);
    padding: 8px 16px 8px 16px;
    text-align: left;
  }
  table th {
    color: var(--text-back-color) !important;
    font-weight: 600;
    white-space: nowrap;
  }
</style>

Largeur de colonne personnalisée

Ensuite, ajoutez un contr?le de largeur, en espérant ajouter de la largeur à l'objet tableau passé dans les colonnes. L'exemple est le suivant?:

const columnsList = [
  {
    title: '書(shū)名',
    key: 'name',
    width: 100,
  },
  {
    title: '作者',
    key: 'author',
    width: 100,
  },
  {
    title: '價(jià)格',
    key: 'price',
    width: 100,
  },
  {
    title: '簡(jiǎn)介',
    key: 'desc',
    minWidth: 350,
  }
]

J'espère obtenir les effets suivants
1. .La colonne contenant la largeur, largeur fixe, ne change pas avec le changement de largeur du navigateur
2. Les colonnes contenant minWidth rempliront automatiquement la largeur restante du tableau lorsqu'elle est supérieure à la valeur définie. Lorsqu'elle est inférieure à la valeur définie, la largeur sera fixe
3. Les colonnes qui ne contiennent pas de largeur et de minWidth, remplissent automatiquement la largeur restante du tableau
Selon nos besoins, nous devons contr?ler l'affichage de la largeur de chaque colonne individuellement, puis recalculer et restituer la largeur. colonnes en temps réel lorsque la largeur du navigateur change.
Définissez d'abord une méthode pour calculer la largeur requise de chaque colonne dans la situation actuelle, puis liez-la au DOM souhaité. Ensuite, chaque fois que le tableau change/la largeur du navigateur change, la largeur du tableau peut être modifiée en temps réel.

  const initColumns = () => {
    // 計(jì)算每一列在當(dāng)前情況下所要的寬度
  }
  watch(() => props.columns, () => { initColumns() });
  onMounted(() => {
    nextTick(() => {
      initColumns();
      on(window, 'resize', throttle(() => initColumns(), 400));
    });
  });
  onBeforeUnmount(() => off(window, 'resize', () => initColumns()));

Tous les codes?:

<script setup>
  import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from &#39;vue&#39;
  import { on, off } from &#39;../../utils/listener&#39;
  import { throttle } from "../../utils/debounce&throttle"
  import { useProp, useNeumorphism } from &#39;../mixin/neumorphism&#39;
  const table = ref() // 與html中ref=""對(duì)應(yīng)，定位dom元素
  const props = defineProps({
      ...useProp,
      ...{
        data: { // dataList
            type: Array,
            default: () => [],
        },
        columns: { // columnsList
            type: Array,
            default: () => [],
        },
        height: { // height
          type: Number,
        },
        maxHeight: { // 流體高度
          type: Number,
        },
        minUnsetWidth: {  // 未設(shè)置寬度時(shí)最小寬度
          type: Number,
          default: 80
        }
      }
  })
  // 高度設(shè)置
  let tableHeightStyleObj = computed(() => { 
    let styleObj = ((e) => {
      if (e.maxHeight) return { maxHeight: e.maxHeight + &#39;px&#39; }
      if (e.height) return { height: e.height + &#39;px&#39; }
      return {}
    })({...props})
    return styleObj
  })
  // 列寬設(shè)置
  let col = ref([])
  const { columns, minUnsetWidth } = props
  const _min_column_width = minUnsetWidth // 未設(shè)置寬度時(shí)最小寬度
  const initColumns = () => {
    col.value = (() => {
      let _total_width = table.value.offsetWidth  // 表格dom元素總寬度
      let _needed_minWidth = columns.reduce((t, v) => { // 需要的最小寬度
        t += v.width || v.minWidth || _min_column_width
        return t
      }, 0)
      // 需要的最小寬度比總寬度大，則取minWidth即可
      if (_needed_minWidth >= _total_width) return columns.reduce((t, v) => {
        let n = v.width || v.minWidth || _min_column_width
        t = [...t, n]
        return t
      }, [])
      // 需要的最小寬度比總寬度大，則要把minWidth加權(quán)，權(quán)重為（未分配的寬度 / minWidth之和）
      let _unassigned_width = columns.reduce((t, v) => {
        t += v.minWidth || 0
        return t
      }, 0)
      let _assigned_width = _needed_minWidth - _unassigned_width
      let _width_power = (_total_width - _assigned_width) / _unassigned_width
      return columns.reduce((t, v) => {
        let n = v.width || (v.minWidth ? (_width_power * v.minWidth).toFixed(2) : _min_column_width)
        t = [...t, n]
        return t
      }, [])
    })()
  }
  watch(() => props.columns, () => { initColumns() })
  const throttleInitColumns = () => throttle(() => initColumns(), 400)
  onMounted(() => {
    nextTick(() => {
      initColumns()
      on(window, &#39;resize&#39;, throttleInitColumns)
    })
  })
  onBeforeUnmount(() => off(window, &#39;resize&#39;, throttleInitColumns))
  const { baseStyleObject } = useNeumorphism(props)
  let styleObject =  computed(() => ({ 
    ...tableHeightStyleObj.value
  }))
</script>
<template>
    <div class="san-table scrollbar" :>
      <table ref="table">
        <colgroup>
            <col v-for="(item, index) in col" :key="index" :width="`${item}px`">
        </colgroup>
        <thead>
            <tr class="neumorphism">
              <th v-for="col in columns" :key="col.key"> {{col.title}} </th>
            </tr>
        </thead>
        <tbody>
          <tr class="neumorphism" v-for="row in data" :key="row.id">
            <td v-for="col in columns" :key="col.key"> {{row[col.key]}} </td>
          </tr>
        </tbody>
      </table>
    </div>
</template>
<script>
  export default {
    name: &#39;sanorin-table&#39;,
  }
</script>
<style scoped>
  @import "../../style/index.css";
  @import "../../style/neumorphism.css";
  .san-table{
    padding: 0px 20px 20px 20px;
    position: relative;
    overflow: auto;
  }
  table {
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    border-collapse:separate;
    border-spacing:0px 10px;
  }
  thead {
    position: sticky;
    top: 10px;
  }
  thead:before{
    position: absolute;
    content: &#39;&#39;;
    width: calc(100% + var(--shadow-blur) * 2);
    transform: translate(calc(var(--shadow-blur) * -1) , -10px);
    height: 20px;
    background-color: var(--main-color);
    z-index: -1;
  }
  table td,
  table th {
    color: var(--text-color);
    padding: 8px 16px 8px 16px;
    text-align: left;
    word-break:break-all;
  }
  table th {
    color: var(--text-back-color) !important;
    font-weight: 600;
    white-space: nowrap;
  }
</style>

Les deux js utilisés, la limitation anti-shake et la surveillance de l'enregistrement sont également mis ici

/* 防抖節(jié)流函數(shù) */
let timeout = null // 創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值
let count = 0;
export function debounce(fn, wait = 1000, immediate = false) {
  return function () {
    const args = arguments;
    if (immediate) {
      if (count == 0) {
        fn.apply(this, arguments)
        count++;
      } else {
        if (timeout) {
          clearTimeout(timeout) // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉 
        }
        timeout = setTimeout(() => {
          fn.apply(this, arguments)
        }, wait)
      }
    } else {
      if (timeout) {
        clearTimeout(timeout) // 每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉 
      }
      timeout = setTimeout(() => {
        fn.apply(this, arguments)
      }, wait)
    }
  }()
}
let canRun = true;
let count1 = 0;
export function throttle(fn, wait = 1000, immediate = true) {
  return function () {
    if (immediate) {
      if (count1 == 0) {
        fn.apply(this, arguments);
        count1++;
      } else {
        if (canRun) {
          canRun = false
          setTimeout(function () {
            fn.apply(this, arguments)
            canRun = true
          }, wait);
        }
      }
    } else {
      if (!canRun) return
      canRun = false
      setTimeout(function () {
        fn.apply(this, arguments)
        canRun = true
      }, wait);
    }
  }()
}

/**
 * 綁定事件 on(element, event, handler)
 */
export const on = (element, event, handler) => {
  if (document.addEventListener) {
    if (element && event && handler) {
      element.addEventListener(event, handler, false)
    }
  }
}
/**
 * 解綁事件 off(element, event, handler)
 */
export const off = (element, event, handler) => {
  if (document.removeEventListener) {
    if (element && event) {
      element.removeEventListener(event, handler, false)
    }
  }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!