搜索
首页web前端Vue.jsvue3 table组件怎么使用

vue3 table组件怎么使用

王林
王林
May 12, 2023 pm 09:40 PM
vue3table

基础表格

首先开发table组件之前，先想好要用什么样式的api，因为笔者在生产工作中用的都是element，所以前面几个组件风格和element类似，但是这次不打算用element的风格了，打算换一种，直接展示：
我们期望用户这样使用：

<script setup>
const dataList = [
  {
    id: 1,
    name: &#39;《JavaEE企业应用实战》&#39;,
    author: &#39;dev1ce&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;书中最后讲解的项目案例，涵盖从前期设计到最终实施的整个过程，对全书知识点进行串联和巩固，使读者融会贯通，掌握Java Web开发的精髓。&#39;
  },
  {
    id: 2,
    name: &#39;《代码整洁之道》&#39;,
    author: &#39;R0bert&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;整洁代码并非遵循一组规则编写的。不可能因为学习一套金规玉律就成为软件大师。专业精神和手工艺来自于推动规则形成的价值。&#39;
  },
  {
    id: 3,
    name: &#39;《ECMAScript 6 入门教程》&#39;,
    author: &#39;y1feng&#39;,
    price: &#39;10.22&#39;,
    desc: &#39;本书是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。&#39;
  },
]
const columnsList = [
  {
    title: &#39;书名&#39;,
    key: &#39;name&#39;
  },
  {
    title: &#39;作者&#39;,
    key: &#39;author&#39;
  },
  {
    title: &#39;价格&#39;,
    key: &#39;price&#39;
  },
  {
    title: &#39;简介&#39;,
    key: &#39;desc&#39;
  }
]
</script>
<template>
    <sanorin-table :columns="columnsList" :data="dataList"/>
</template>

依照这个写出以下代码

<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">
            <!-- 表头循环 -->
            <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">
              <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>

最后出来的效果就是：

vue3 table组件怎么使用

然后实现了这个后我们开始做后面的，先从固定表头开始。

固定表头

这里先采用第一种，以后不能满足需求了再改成后面的方法。
效果和代码如下：

vue3 table组件怎么使用

<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">
              <!-- 表头循环 -->
              <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">
              <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>

高度/流体高度

可以为 Table 设置一个高度。(height)
当数据量动态变化时，可以为 Table 设置一个最大高度。(maxHeight) 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
只要在sanorin-table元素中定义了height或者maxHeight属性，即可实现固定表头的表格，而不需要额外的代码。
代码如下：

<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,
        }
      }
  })
  // 高度设置
  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>

自定义列宽

接下来加入宽度控制，希望在columns 传入的数组对象内加入宽度，示例如下:

const columnsList = [
  {
    title: &#39;书名&#39;,
    key: &#39;name&#39;,
    width: 100,
  },
  {
    title: &#39;作者&#39;,
    key: &#39;author&#39;,
    width: 100,
  },
  {
    title: &#39;价格&#39;,
    key: &#39;price&#39;,
    width: 100,
  },
  {
    title: &#39;简介&#39;,
    key: &#39;desc&#39;,
    minWidth: 350,
  }
]

希望达到以下效果
1、含有width的列，宽度固定，不随浏览器宽度变化而变化
2、含有minWidth的列，在大于设定值时，自动填充 table 剩余宽度，小于设定值时，固定该宽度
3、不包含width和minWidth的列，自动填充 table 剩余宽度
根据我们的需求，我们需要单独控制每一列的宽度展示，并在浏览器宽度变化时实时的重新计算并且重新渲染列。
首先定义出一个方法，用来计算每一列在当前情况下所要的宽度，再绑定要dom上。然后，每次表格变化/浏览器宽度变化时候就能实时响应改变Table的宽度了。

  const initColumns = () => {
    // 计算每一列在当前情况下所要的宽度
  }
  watch(() => props.columns, () => { initColumns() });
  onMounted(() => {
    nextTick(() => {
      initColumns();
      on(window, &#39;resize&#39;, throttle(() => initColumns(), 400));
    });
  });
  onBeforeUnmount(() => off(window, &#39;resize&#39;, () => initColumns()));

全部代码：

<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=""对应，定位dom元素
  const props = defineProps({
      ...useProp,
      ...{
        data: { // dataList
            type: Array,
            default: () => [],
        },
        columns: { // columnsList
            type: Array,
            default: () => [],
        },
        height: { // height
          type: Number,
        },
        maxHeight: { // 流体高度
          type: Number,
        },
        minUnsetWidth: {  // 未设置宽度时最小宽度
          type: Number,
          default: 80
        }
      }
  })
  // 高度设置
  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
  })
  // 列宽设置
  let col = ref([])
  const { columns, minUnsetWidth } = props
  const _min_column_width = minUnsetWidth // 未设置宽度时最小宽度
  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加权，权重为（未分配的宽度 / 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>

其中用到的两个js，防抖节流和注册监听这里也放下吧

/* 防抖节流函数 */
let timeout = null // 创建一个标记用来存放定时器的返回值
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) // 每当用户输入的时候把前一个 setTimeout clear 掉 
        }
        timeout = setTimeout(() => {
          fn.apply(this, arguments)
        }, wait)
      }
    } else {
      if (timeout) {
        clearTimeout(timeout) // 每当用户输入的时候把前一个 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)
    }
  }
}

以上是vue3 table组件怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文转载于：亿速云。如有侵权，请联系admin@php.cn删除
相关文章
vue.js：定义其在网络开发中的作用vue.js：定义其在网络开发中的作用Apr 18, 2025 am 12:07 AM

Vue.js在Web开发中的角色是作为一个渐进式JavaScript框架，简化开发过程并提高效率。1)它通过响应式数据绑定和组件化开发，使开发者能专注于业务逻辑。2)Vue.js的工作原理依赖于响应式系统和虚拟DOM，优化性能。3)实际项目中，使用Vuex管理全局状态和优化数据响应性是常见实践。

了解vue.js：主要是前端框架了解vue.js：主要是前端框架Apr 17, 2025 am 12:20 AM

Vue.js是由尤雨溪在2014年发布的渐进式JavaScript框架，用于构建用户界面。它的核心优势包括：1.响应式数据绑定，数据变化自动更新视图；2.组件化开发，UI可拆分为独立、可复用的组件。

Netflix的前端：React（或VUE）的示例和应用Netflix的前端：React（或VUE）的示例和应用Apr 16, 2025 am 12:08 AM

Netflix使用React作为其前端框架。1)React的组件化开发模式和强大生态系统是Netflix选择它的主要原因。2)通过组件化，Netflix将复杂界面拆分成可管理的小块，如视频播放器、推荐列表和用户评论。3)React的虚拟DOM和组件生命周期优化了渲染效率和用户交互管理。

前端景观：Netflix如何处理其选择前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

React与Vue：Netflix使用哪个框架？React与Vue：Netflix使用哪个框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka

框架的选择：是什么推动了Netflix的决定？框架的选择：是什么推动了Netflix的决定？Apr 13, 2025 am 12:05 AM

Netflix在框架选择上主要考虑性能、可扩展性、开发效率、生态系统、技术债务和维护成本。1.性能与可扩展性：选择Java和SpringBoot以高效处理海量数据和高并发请求。2.开发效率与生态系统：使用React提升前端开发效率，利用其丰富的生态系统。3.技术债务与维护成本：选择Node.js构建微服务，降低维护成本和技术债务。

反应，vue和Netflix前端的未来反应，vue和Netflix前端的未来Apr 12, 2025 am 12:12 AM

Netflix主要使用React作为前端框架，辅以Vue用于特定功能。1)React的组件化和虚拟DOM提升了Netflix应用的性能和开发效率。2)Vue在Netflix的内部工具和小型项目中应用，其灵活性和易用性是关键。

前端中的vue.js：现实世界的应用程序和示例前端中的vue.js：现实世界的应用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一种渐进式JavaScript框架，适用于构建复杂的用户界面。1)其核心概念包括响应式数据、组件化和虚拟DOM。2)实际应用中，可以通过构建Todo应用和集成VueRouter来展示其功能。3)调试时，建议使用VueDevtools和console.log。4)性能优化可通过v-if/v-show、列表渲染优化和异步加载组件等实现。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
威尔R.E.P.O.有交叉游戏吗？
1 个月前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

显示更多

热门话题

gmail邮箱登陆入口在哪里
7549
15
CakePHP 教程
1382
52
steam的账户名称是什么格式
83
11
win11激活密钥永久
57
19
NYT连接提示和答案
22
90
显示更多