AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

还在多次copy ElTable组件吗？试试dyingtable插件吧

2022-05-02 306
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文主要针对table表格item多次渲染进行了一个二次封装，节省代码量。将table表头和表体数据独立出来，通过js数据去控制其表头展示文字。

网络异常，图片无法展示
|


「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

hello 大家好，🙎🏻‍♀️🙋🏻‍♀️🙆🏻‍♀️


我是一个热爱知识传递，正在学习写作的作者，ClyingDeng 凳凳！

作为参与了6、8月更文活动的老用户，这期又怎么少得了我呢！嘿嘿！


本文主要针对table表格item多次渲染进行了一个二次封装，节省代码量。将table表头和表体数据独立出来，通过js数据去控制其表头展示文字。


业务需求

我相信在很多业务场景中，尤其是做管理台这种的，有这样的一个需求。每个页面有个一两个表格，但是表格样式可能不同，比如一个页面要这样的：


网络异常，图片无法展示
|


另一个页面要这样的：


网络异常，图片无法展示
|


又或者是带操作按钮的表格：


网络异常，图片无法展示
|


emmm，如果项目小可以不用考虑优化，大不了多写几个表格。一旦遇到大型的项目，再这样一个表格一个sfc是不是不妥呢？如果有个10个表格，那么每个表格内部牵扯到的逻辑操作顺带着查询、对话框每个文件的代码行数都是一个不小的数字，并且内部重复量是非常大的一个数值！


那么，问题来了，如何以尽量少的代码去完成呢？


解决方案


目前，以element-plus为基础组件。只考虑单表格样式、数据、行内操作等情况（查询、分页可以在此基础再进行封装）。将其table组件单独做成一个插件。


实例展示

安装


通过npm命令安装dyingtable。


npm install dyingtable --save


快速上手


在vue项目中的入口文件main.ts中：


import { createApp } from 'vue'
import App from './App.vue'
import DyTable from 'dyingtable'
createApp(App).use(DyTable).mount('#app')


注意：dyingtable 插件是面向Vue3版本哦！vue2版本的封装是混合在其他项目中，有兴趣也可以点击这里去看看哟！


demo实现


由于对于表格应用场景有很多demo，可自行前往dyingtable，在此，我们就展示基础表格、选择行表格和多级表头三个demo。


基础表格


先看看element表格

网络异常，图片无法展示
|


自己根据所需表格列，去渲染。换个数据不同的表格，再次需要自己去拷贝一份table表格修改。


对于 dyingtable 来说，可以根据传入你所需要的表头和所需对应列的数据即可。

tHeads中的props值需要与tableData中所对应。


表格头部label绑定表头名称，props作为唯一标识，width表格列宽度，align控制列左中右对齐。


<dy-table :tHeads="tHeads" :tableData="tableData"></dy-table>
<script lang="ts">
import Vue, { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    let tHeads = reactive([
      {
        label: '日期',
        props: 'date',
        width: '200',
        align: 'center',
      },
      ...
    ])
    let tableData = reactive([
      {
        date: '2016-05-02',
        name: '王小虎',
        age: 22,
        address: '上海市普陀区金沙江路 1518 弄',
      },
      ...,
    ])
    return { tableData, tHeads }
  },
})
</script>


效果


网络异常，图片无法展示
|


选择行表格


选择多行数据时使用 Checkbox。 给表格添加ref属性，通过refs给组件内table传入ref属性。给表头添加 { type: 'selection' }属性，展示Checkbox。


<dy-table ref="multiple" :refs="refs" :tHeads="tHeads" :tableData="tableData"></dy-table>
<div style="margin-top: 20px">
  <el-button @click="toggleSelection([tableData[1], tableData[2]])">
    切换第二、第三行的选中状态
  </el-button>
  <el-button @click="toggleSelection()">取消选择</el-button>
</div>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  setup() {
    let tHeads = reactive([
      { type: 'selection' },
      {
        label: '日期',
        props: 'date',
        width: '200',
        sortable: false,
        align: 'center',
        className: 'stripa', // 列样式
      },
    ])
    let tableData = reactive([
      {
        date: '2016-05-02',
        name: '王小虎',
        age: 22,
        address: '上海市普陀区金沙江路 1518 弄',
      },
      {
        date: '2016-04-04',
        name: '王小虎',
        age: 12,
        address: '上海市普陀区金沙江路 1517 弄',
      },
      ...
    ])
    let multiple: any = ref(null)
    let refs = ref('multipleTable')
    let toggleSelection = (rows: any) => {
      let ref = multiple.value.$refs
      if (rows) {
        rows.forEach((row: any) => {
          ref.multipleTable.toggleRowSelection(row)
        })
      } else {
        ref.multipleTable.clearSelection()
      }
    }
    return { tableData, tHeads, multiple, refs, toggleSelection }
  },
})
</script>


效果


网络异常，图片无法展示
|


多级表头


数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。使用tHeads的children属性来渲染子表头。一定要注意的是：需要展示列数据的，一定要绑定props。


<dy-table :tableData="tableData" :tHeads="tHeads"></dy-table>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    let tHeads = reactive([
      {
        label: '日期',
        props: 'date',
        width: '200',
        sortable: false,
        align: 'center',
      },
      {
        label: '配送信息',
        children: [
          {
            label: '姓名',
            props: 'name',
            width: '200',
            sortable: false,
            align: 'center',
          },
          {
            label: '地址',
            sortable: false,
            align: 'left',
            children: [
              {
                label: '省份',
                props: 'province',
                width: '150',
              }
              ...
            ],
          },
        ],
      },
    ])
    let tableData = reactive([
      {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      },
    ])
    return { tableData, tHeads }
  },
})
</script>

网络异常，图片无法展示
|

效果


rollup 踩坑

在此呢，我也是比较爱折腾。


原本用element-ui、vue2实现了table的封装。

又想着现在的vue3，那就再用vue3和element-plus再试试。

写完了把，又想把这个组件单独拎出来，搞个插件玩玩。好吧，用vue-cli搞的插件跑通了。


又想着要不用rollup试试，这下好了，试着试着，踩到了个大泥潭里面了。。。

看着官网文档，emmm，就像个天书一样🪁🪁🪁

这个学法呢，我是借鉴我之前使用rollup打包的项目配置，先将最基础能够编译ts文件的所需配置先搭建好。


因为我是使用的vue3、element-plus去封装自己的组件。所以必须要安装能够解析vue文件和element-plus的插件并配置的。

安装下段代码中所需依赖：


import Components from 'unplugin-vue-components/rollup'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from 'rollup-plugin-vue'
export default {
 plugins: [
    vue({
      compileTemplate: true,
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ]
}


你以为安装好，就可以正常跑通了吗，那你可就太天真了🎃


321，来！上BUG:

请问，这是什么问题？

网络异常，图片无法展示
|


这是典型的rollup打包问题： Error: "[name] is not exported by [module]"

一旦遇到什么东西导出错误，一定要检查自己安装的commonjs插件是否支持自己所有依赖的npm模块导出格式。

那这个你知道吗？


网络异常，图片无法展示
|


遇到这个问题当时我百度不得其解，看到唯一一个有点相关的问题，竟然是这个。好家伙，人家直接用vite解决了。。。🙃🙂🙃

想知道我是怎么解决的吗？


🎊铛铛铛，答案揭晓：


当时安装 rollup-plugin-vue 时，直接使用的是 npm i rollup-plugin-vue。。。然后我将其依赖卸载，重新安装，安装时给它加了个 -D。然后，它就好了。我也很无语😶


npm 发版踩坑


npm 发版遇到的问题主要是TLS升级问题。


从 2021 年 10 月 4 日开始，所有与 npm 网站和 npm 注册表的连接（包括软件包安装）都必须使用 TLS 1.2 或更高版本。点击即可查看并升级TLS版本。 除了更新TLS版本之外还要将npm更新到7版本以上版本。


再看看自己的npm版本：


网络异常，图片无法展示
|


通常npm版本更新频率是高于node版本更新的。emmm，那就下一个最新版的npm把：


npm install npm@latest -g


此外还需将npm注册表设置为https端点如下图：

网络异常，图片无法展示
|


至于登录npm账号进行npm发版没有遇到太大问题，在此不再过多赘述。


关于 dyingtable 插件

文章标签：
JavaScript
ClyingDeng
目录
相关文章
1370710033989312
|
搜索推荐
钉钉：不可取代的企业通讯与管理工具
钉钉：不可取代的企业通讯与管理工具
1370710033989312
362 1
楠竹11
|
11月前
|
人工智能 开发者
媲美OpenAI事实性基准，这个中文评测集让o1-preview刚刚及格
为评估大型语言模型（LLM）在中文语境下的事实性能力，研究团队推出“Chinese SimpleQA”评测集。该评测集具备中文、多样性、高质量、静态和易于评估的特点，涵盖六个主要主题和99个子主题。评估结果显示，尽管部分模型在特定领域表现出色，但整体事实性能力仍有待提升。Chinese SimpleQA为LLM开发者提供了宝贵工具，推动中文LLM的改进与发展。论文链接：https://arxiv.org/abs/2411.07140
楠竹11
271 14
GG2020gg
|
安全 Linux Go
Linux数据备份与恢复
Linux数据备份与恢复
GG2020gg
379 5
请看我回答~
|
安全 IDE Swift
探索iOS开发之旅：从初学者到专家
在这篇文章中，我们将一起踏上iOS开发的旅程，从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者，这里都有你需要的指南和启示。我们将通过实际案例和代码示例，展示如何构建一个功能齐全的iOS应用。准备好了吗？让我们一起开始吧！
请看我回答~
369 1
mikechen的互联网架构
|
存储 NoSQL 关系型数据库
微服务Zipkin链路追踪原理，图解版，一文吃透！
本文重点讲解Zipkin链路追踪的原理与使用，帮助解决微服务架构下的服务响应延迟等问题，提升系统性能与稳定性。关注【mikechen的互联网架构】，10年+BAT架构经验倾囊相授。
mikechen的互联网架构
1804 0
微服务Zipkin链路追踪原理，图解版，一文吃透！
小王老师呀
|
Java 关系型数据库 MySQL
SpringBoot项目使用yml文件链接数据库异常
【10月更文挑战第4天】本文分析了Spring Boot应用在连接数据库时可能遇到的问题及其解决方案。主要从四个方面探讨：配置文件格式错误、依赖缺失或版本不兼容、数据库服务问题、配置属性未正确注入。针对这些问题，提供了详细的检查方法和调试技巧，如检查YAML格式、验证依赖版本、确认数据库服务状态及用户权限，并通过日志和断点调试定位问题。
小王老师呀
1473 6
朝阳39
element UI 中多行消息提示的实现（this.$message的换行）
element UI 中多行消息提示的实现（this.$message的换行）
朝阳39
910 0
hnrk7epeorhrk
|
存储 开发框架 JavaScript
程序与技术分享：CKEditor与CKFinder使用
程序与技术分享：CKEditor与CKFinder使用
hnrk7epeorhrk
573 0
职说测试
|
Web App开发 测试技术 API
Web自动化测试框架(基础篇)--Selenium WebDriver工作原理和环境搭建
本文详细介绍了Selenium WebDriver的工作原理，包括其架构、通信机制及支持的浏览器，并指导读者如何在Python环境下搭建Selenium WebDriver的测试环境，从安装Python和Selenium库到编写并运行第一个自动化测试脚本。
职说测试
787 0
久绊A
网络拓扑结构
网络拓扑结构主要包括星型、环型、总线型、树型和网状型。星型拓扑以中心节点控制全网，简单易管理，但依赖中央节点。环型拓扑信息沿环路传递，故障可能影响全网。总线型结构简洁适合小规模网络。树型拓扑是多星型结构的组合，适合复杂网络环境，具有扩展性。网状拓扑节点间多路径连接，提高可靠性，但结构复杂，成本高。
久绊A
2583 2