Jadual Asas

Sebelum membangunkan komponen jadual, fikirkan dahulu jenis API yang hendak digunakan Oleh kerana pengarang menggunakan elemen dalam kerja pengeluaran, gaya beberapa komponen pertama adalah serupa dengan elemen, tetapi Ini masa saya tidak merancang untuk menggunakan gaya elemen saya merancang untuk menukarnya dan memaparkannya secara langsung:
Kami berharap pengguna akan menggunakannya seperti ini:

<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>

Tulis kod berikut mengikut ini

<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>

Yang terakhir keluar Kesannya ialah:

Kemudian selepas menyedari ini, kita mula melakukan perkara berikut, bermula dengan membetulkan pengepala.

Tajuk meter tetap

Kaedah pertama akan digunakan di sini Jika ia tidak dapat memenuhi keperluan pada masa hadapan, ia akan ditukar kepada kaedah kemudian.
Kesan dan kod adalah seperti berikut:

<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>

Ketinggian/Ketinggian Cecair

Anda boleh menetapkan ketinggian untuk Jadual. (ketinggian)
Apabila jumlah data berubah secara dinamik, anda boleh menetapkan ketinggian maksimum untuk Jadual. (maxHeight) Menentukan ketinggian maksimum untuk Jadual dengan menetapkan atribut ketinggian maksimum. Pada masa ini, jika ketinggian jadual yang diperlukan lebih besar daripada ketinggian maksimum, bar skrol akan dipaparkan.
Selagi atribut ketinggian atau maxHeight ditakrifkan dalam elemen jadual sanorin, jadual dengan pengepala tetap boleh dilaksanakan tanpa kod tambahan.
Kod adalah seperti berikut:

<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>

Lebar lajur tersuai

Seterusnya, tambah kawalan lebar, dengan harapan untuk menambah lebar pada objek tatasusunan yang diluluskan dalam lajur, contohnya adalah seperti berikut:

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,
  }
]

Berharap untuk mencapai kesan berikut
1 Lajur yang mengandungi lebar mempunyai lebar tetap dan tidak berubah dengan lebar pelayar
2 Lajur yang mengandungi minWidth akan mengisi jadual secara automatik lebih besar daripada nilai yang ditetapkan. Baki lebar kurang daripada nilai yang ditetapkan Apabila menetapkan nilai, tetapkan lebar
3. Lajur yang tidak termasuk lebar dan minWidth secara automatik akan mengisi baki lebar jadual
Mengikut. mengikut keperluan kita, kita perlu mengawal paparan lebar setiap lajur secara individu, dan apabila lebar penyemak imbas berubah Kira Semula dan buat semula lajur dengan cepat.
Mula-mula tentukan kaedah untuk mengira lebar yang diperlukan bagi setiap lajur di bawah situasi semasa, dan kemudian ikatkannya pada dom yang diperlukan. Kemudian, setiap kali jadual berubah/lebar penyemak imbas berubah, lebar Jadual boleh ditukar dalam masa nyata.

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

Semua kod:

<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>

Dua js yang digunakan di dalamnya, pendikit anti goncang dan pemantauan pendaftaran juga diletakkan di sini

/* 防抖節(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)
    }
  }
}

Atas ialah kandungan terperinci Cara menggunakan komponen jadual vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!