记录--Vue2屎山之 Table 屎山

这篇具有很好参考价值的文章主要介绍了记录--Vue2屎山之 Table 屎山。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--Vue2屎山之 Table 屎山

前言

Vue2 将在 2023 年年底停止维护了,但是 Vue2 的代码却不会在 2023 年消失,还会越来越多;难以想象几十万行或者几百万行的 Vue2 代码迁移到 Vue3,这是不可能办到的;

老一点的前端程序员肯定经历过把大型项目从 jQuery 迁移到 Vue/React/Angular 的经历,那是一次思想的大变革,也是生产效率的一次大革新,但是这一次就不一样了,Vue2 迁移到 Vue3 虽然优点很多,但是这不足以说服老板们花费$去让你进行重构;

既然 Vue2 还能用,那我就想把他用到极致,日常中最常用的就是 Table 组件,所以 Table 组件出现屎山的概率大大增加了,再加上 UI 框架的加持,这个屎山就被放大了!Vue2 写后台也就是这几个 UI 框架:Antd-vue、Element、iView,两款是个人开发者出品,一款是饿了么出品,来看看他们的 Table 组件

iView

iView Table 屎山

为什么先说 iView,因为 iView 早期版本里面的 Table 组件有一个很奇葩的设定那就是使用 render 函数来渲染 columns,而我们刚好用的 iView 版本就是这个时期的,后面也难以再升级,这个时候就产生大量屎山代码了:

记录--Vue2屎山之 Table 屎山

比方说Table 每一行后面有四个操作按钮,那么就需要这样写:
render:(h,{row})=>{
    return h('div',[
        h('a',{
            props:{
            
            },
            styles:{
            
            },
            on:{
                click:()=>{
                    
                }
            }
        },'新增'),
        h('a',{
            class:'xxx'
        },'修改'),
        h('a',{
            class:'xxx',
            on:{
                click:()=>{
                    Modal.confirm({
                        ...
                    })
                }
            }
        },'删除'),
        h('a',{
            class:'xxx'
        },'配置'),
    ])
}

有没有感觉到特别丑陋,而且写起来效率也十分低下,好像回到了原始社会;原始社会里面大家钻木取火,现在一个打火机就能够搞定,而这个 Table 里面的 Column 的设定就像是钻木取火了,一个 Colmun 还好,如果所有 Column 都这样写,并且都定义在 data 里面,想象一下一个 data 都定义了几百行,这是不是最大的屎山呢?

这个屎山有办法破解吗?答案是有的,总共有两个方向,一个方向是编译优化,一个方向是利用 scopedSlots

编译优化

回忆一下 React,每一个 jsx 代码其实都等同于 createElement("div",{},"xxxx"),与上面的代码类似,那么在 Vue 里面也可以写 jsx,然后编译为 h 函数,按照这种思路上面的代码就可以优化为:

render:(h,{row})=>{
    return <div>
        <a>新增</a>
        <a>修改</a>
        <a onClick={()=> this.onDelete(row)}>删除</a>
        <a>配置</a>
    </div>
}

这样的话看起来就舒服很多了,但是有人会说了:在 Vue 里边写 jsx,又有 template 又有 jsx 搞得是四不像,不伦不类了,这种方式我不喜欢,还是想利用 Vue 的特性,要么我就还是情愿回到原始社会去钻木取火;那么下面一种方式就是 scopedSlots

scopedSlots 优化

先说怎么用:在 columns 数组中增加一个参数 slot,然后定义作用域插槽:

<template>
    <Table :columns="columns">
        <template #actions="{row,index}">
            <a>新增</a>
            <a>修改</a>
            <a @click="onDelete(row)"}>删除</a>
            <a>配置</a>
        </template>
    </Table>
<template>
<script>
export default{
    data(){
        return {
            columns:[{
                title:'操作',
                slot:'actions',
                key:'actions'
            ]}
    }
}
</script>
再来看看Table 是如何支持这个功能的呢,大概思路就是在遍历 columns 时会判断一下 slot 是否存在,如果存在则展示作用于插槽,如果不存在则走原来的逻辑,下面贴了一些伪代码:
<td>
  <!-- 如果遍历 colums 之后 slot 属性存在,那么渲染 slot,否则按照默认规则渲染 -->
  <slot v-if="slotName" :name="slotName" v-bind="{row,index}"/>
  <span v-else>...</span>
</td>

学会了这两种优化方式,领导再也不用担心我堆屎山了!

Element

再看看 Element 中的Table,舒服多了有没有:

记录--Vue2屎山之 Table 屎山

不用把 Column 的配置与 内容割裂开,可以都放在 template 中书写,这样比上面的方式灵活多了,而且还极大减少了屎山代码的形成,对比下来还是 Element 的 Table 组件更为成熟好用;

antd-vue

最后一个是 antd-vue,看一下 antd-vue 中 Table 的用法,这不就和上面讲到的 scopedSlots 优化那种用法类似吗?

记录--Vue2屎山之 Table 屎山

 翻到后面,可以看到一个 template 风格 API,与 Element 这种用法类似,但是后面紧接着提示:不推荐使用,会有一定的性能损耗。,为什么会有性能损耗呢?那么 Element 这么用会有性能损耗吗?

记录--Vue2屎山之 Table 屎山

后记

到这里 Vue2 中的 Table 屎山就结束了,再回头看看 iView 直接暴露 h 函数,虽然极大地增加了 Column 定义的灵活度,但是增加了很多无效代码就好像回到原始社会一样,也增加了不少的屎山代码;在日常开发过程中,很多需求都是赶着工期完成的或者倒排工期完成,根本没有时间去思考怎么优化,这个时候 UI 框架对于效率的影响就被放大了;好的 UI 框架不仅能够提供好的交互效果,还能从 API 层面去约束开发者,让开发者尽可能写出好的代码,另外就是让开发者尽可能少写代码;

本文转载于:

https://juejin.cn/post/7300151966964678668

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--Vue2屎山之 Table 屎山文章来源地址https://www.toymoban.com/news/detail-746144.html

到了这里,关于记录--Vue2屎山之 Table 屎山的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2&vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

    Vue3组件地址 Vue2组件地址 Vue2基于ElementUi再次封装基础组件文档 vue3+ts基于Element-plus再次封装基础组件文档

    2024年02月08日
    浏览(56)
  • Vue2+ElementUI的el-table实现新增数据行与删除的功能

    TableIndex.vue 如下 新增 按钮添加数据行 删除 按钮提示是否继续删除

    2024年04月23日
    浏览(41)
  • vue2+elementui的el-table固定列会遮住横向滚动条以及错位

    我是最右侧固定列,所以下面的class名称是 .el-table__fixed-right , 如果有左侧固定请自行替换为 el-table__fixed 防止固定列表格高度错位 如果还没有解决错位, 请看你的 el-table__body-wrapper 是不是自己写了 max-height 的样式属性, 这会影响固定列定位的 解决固定列错位后, 接下来就是

    2024年02月02日
    浏览(46)
  • 随手记:vue2 使用element UI table表格的单选多选反选思路

    selection-change 参数只有一个selection : 可以获取到当前勾选的row的数据,勾选自动行程数组 @selection-change=\\\"handleSelectionChange\\\"    // 多选框选中数据     handleSelectionChange(selection) {         //selection 是勾选中的数组     },  select 参数 selection 选中的数组  row 当前选中的单条数

    2024年04月26日
    浏览(35)
  • vue2在element UI的table中给指定列添加圆点标志,鼠标悬浮出提示信息

    要求在列表数据给指定数据添加一些标志,鼠标悬浮提示指定数据.左侧为标志截图.右侧为悬浮提示截图. 在template中 想要添加标志的那一列 添加圆点和悬浮提示信息两个节点,并添加单元格进入 退出事件两个事件. 具体使用时样式细微处自行调节 给单元格移入事件设

    2024年02月06日
    浏览(52)
  • vue2 el-table行悬停时弹出提示信息el-popover

    实现方法,用到了cell-mouse-enter、cell-mouse-leave两个事件,然后在表格的首列字段中,加个el-popover组件,当然你也可以选择在其他字段的位置来显示提示框,看自己的需求了。 示例代码: 在enter方法中,还可以根据row行数据进行一些处理,比如根据状态status来判断是否弹出提示

    2024年01月18日
    浏览(69)
  • vue2项目打包遇到的问题(记录)

    临时纯手工搭建开发了个vue2小项目,打包后出现了很多问题 一、打包后index.html打开空白 打包后整个页面空白,是因为打包后资源路径不对,需要修改config-index.js下, build 属性中assetsPublicPath值为 ./ 二、打包后图片等静态资源无法显示 需要修改build下utils.js文件,新增一句话

    2024年02月16日
    浏览(41)
  • Vue2.0+Element-ui(2.15.13)出现el-table不显示问题解决方案

    遇到的问题: Element-ui中的 el-table组件 无法正常显示; 1.安装的Vue是2.0版本; 2.安装的Element-ui是2.15.13版本 原因: 1.一个项目调用了element-ui和vant两个ui库,有冲突; 2.Element-ui是2.15.13版本依赖比较高;   解决方案: 1.npm uninstall element-ui;下载Element-ui 2.npm install element-ui@2.8.3

    2024年02月11日
    浏览(53)
  • vue2、3 开发项目前的准备,可直接拷贝(分享)

    1. Vue2 因为最近都是做的 pc 端的项目,所以就按 pc 端常用的来配,都是架子可以直接拷贝 1.1 安装依赖 1.2 配置 element-ui element-ui 官网点击这里 1.3 配置 axios axios 官网点击这里 1.4 配置 vue-router vue-router3 的使用点击这里 1.5 配置 vuex vuex3 的使用点击这里 2. Vue3 2.1 安装依赖 其他安

    2024年02月08日
    浏览(77)
  • vue2/3 axios 请求重试、取消请求、loading 串行并行等(分享)

    基础版,添加 loading 在请求响应拦截器里面添加 loading,这样就不需要给每一个请求添加 loading 了 这些代码都是 vue2 项目的,vue3 也通用,改一下 loading 和 message 就好了(主要是 element 的区别) 我这里最后没有合并代码,有的配置不适合写在一起,看自己项目的需要 响应状态

    2024年02月10日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包