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

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

2022-05-02 170
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文主要针对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
目录
相关文章
小虚竹
idea 懒人神器 保存自动格式化 Save Action插件
idea 懒人神器 保存自动格式化 Save Action插件
小虚竹
1033 0
idea 懒人神器 保存自动格式化 Save Action插件
热爱技术的小郑
|
3月前
|
开发工具
如何修改Vscode查看源代码管理版本变动文件的查看方式
这篇文章介绍了如何在VSCode中通过源代码管理插件修改查看源代码版本变动文件的方式，提供了树形视图和列表视图两种查看方法，并说明了如何通过设置选项来切换查看方式，帮助用户根据自己的喜好更高效地查看和管理代码变动。
热爱技术的小郑
262 0
如何修改Vscode查看源代码管理版本变动文件的查看方式
朝阳39
|
4月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库，安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码，提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库，安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码，提升开发效率的必要集成
朝阳39
75 0
爱你三千遍斯塔克
|
4月前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项，新文件初始化需要修改的地方，打包后的文件很难进行修改，如果想要不断修改项目，注意保存原项目,才可以不断修改，前端：在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项，新文件初始化需要修改的地方，打包后的文件很难进行修改，如果想要不断修改项目，注意保存原项目,才可以不断修改，前端：在Vue.config.js文件中修改target
爱你三千遍斯塔克
131 0
DieHunter1024
|
4月前
|
开发工具 数据安全/隐私保护 git
为了方便项目打包，我用Node写了个git-tag工具
为了方便项目打包，我用Node写了个git-tag工具
DieHunter1024
86 0
真的很搞笑
|
6月前
|
缓存 小程序 Android开发
mPaaS问题之iOS调用插件的时候提示没有配置mpaas. Config文件如何解决
mPaaS配置是指在mPaaS平台上对移动应用进行的各项设置，以支持应用的定制化和优化运行；本合集将提供mPaaS配置的操作指南和最佳实践，助力开发者高效管理和调整移动应用的设置。
真的很搞笑
134 1
疯狂学习GIS
|
6月前
|
安全 定位技术
ENVI软件App Store插件工具的下载、安装与使用方法
ENVI软件App Store插件工具的下载、安装与使用方法
疯狂学习GIS
342 1
你挚爱的强哥
|
6月前
hbuilderX uni-app 自定义快捷键无效、无法生效解决方法（附：好用的常用的快捷键自定义代码片段）
hbuilderX uni-app 自定义快捷键无效、无法生效解决方法（附：好用的常用的快捷键自定义代码片段）
你挚爱的强哥
308 0
ALex_zry
【VsCode】1.70.0 新版本好用功能分享 ：代码函数名称浏览时固定（功能原称 sticky Scroll）
在Code 1.70.0 以后，新增功能：sticky Scroll 。 效果描述： 在浏览长函数的时候，可以将函数的名称定义部分固定在顶栏，类似冻结窗口，方便查看函数功能，不必再跳转。
ALex_zry
480 0
iOS开发欢乐使者
|
开发工具 开发者 iOS开发
​ 如何处理Xcode上传IPA文件后无法在后台架构版本中显示的问题？
1、ipa包符合要求，显示正在处理，这种就是成功上传，等待处理即可（根据包大小，一般处理几分钟到一两个钟都有可能） 2、ipa不符合要求，没有出现正在处理，或者刷新页面正在处理的版本消失 出现这种情况说明你上传的这个ipa包有问题，苹果会发送具体原因到邮箱（开发者账号就是邮箱地址,） 登录邮箱去查看反馈邮件（反馈邮件也可能在垃圾箱），修改错误重新再打包上传。
iOS开发欢乐使者
175 0
​ 如何处理Xcode上传IPA文件后无法在后台架构版本中显示的问题？