element-ui自定义可配置化表格

element-ui是一个非常棒的前端ui框架。之前做了很多大大小小的后管平台,用的技术也是多种多样,最多的还是Vue。

从iView、antd vue 到Element,最终还是选择了Element,原因之一就是iView的table组件貌似有内存溢出的现象(在其官网,浏览table部分会有卡死的现象)。

iView更华丽一点

但习惯了iView的配置式表格,就不喜欢Element那样的写法,于是决定自己封装,提供更多可能。

Element更朴实

在实操的过程中,看到掘金社区中“皮皮鲁”的《升级vue-element-admin,寻找前端中后台更优解》之后,大受启发,遂写代码如下,这里用的的Vue技术点主要有:render函数、函数式编程、插槽……

table主代码

这里有个小技巧,就是setAttrs,批量绑定属性。

render函数

开启函数化,render函数中,将render函数和参数返回。

关注一波,私信【vue-table】获取全部代码。个人承接各种前后端外包,所以,大家不要客气。

(0)

相关推荐

  • element-ui 表格选中行改变行颜色

    <el-table :row-class-name="tableRowClassName" :data="every_list" @selection-c ...

  • MVC 与 Vue

    本文写于 2020 年 7 月 27 日 首先有个问题:Vue 是 MVC 还是 MVVM 框架? 维基百科告诉我们:MVVM 是 PM 的变种,而 PM 又是 MVC 的变种. 所以一定程度上来说, ...

  • 后台管理模板

    当你写项目的时候,如何快速的完成一个项目的搭建,这个时候就需要借助到一些模板了,前端开发的一个好处就是,各类UI模板都是相当的齐全的,直接拿来用就可以了,脱离了一行又一行垒代码的繁琐的工作,以下的开源 ...

  • Element UI

    Element UI Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 基本使用示例代码: <!DOCTYPE html> <html lan ...

  • vue-element-admin关闭当前标签页

    // 调用全局挂载的方法 this.$store.dispatch('tagsView/delView', this.$route) // 返回上一步路由 this.$router.go(-1)

  • Vue Element UI 中国省市区级联数据---npm install element-china-area-data -S

    https://www.npmjs.com/package/element-china-area-data npm install element-china-area-data -S

  • 收藏!前端工程师必备的17个实用网站

    一.配色类网站 http://colorhunt.co https://webgradients.com/ 180种渐变方案供你选择,还可以直接复制CSS样式应用到网页中 https://color. ...

  • SAP Fiori 页面的周期性动态刷新功能的实现步骤

    这是 Jerry 2021 年的第 39 篇文章,也是汪子熙公众号总共第 316 篇原创文章. 一个朋友向我咨询,关于 SAP Fiori 页面自动刷新的实现方法. 如果是 Jerry 之前视频 一步 ...

  • 前端教程:React之Fragments组件语法片段的使用

    React开发中常见的模式之一是将多个元素返回一个组件,Fragments允许您聚合一个子元素列表,并且不会在DOM中添加额外的节点.会Vue的朋友当然会发现,它看起来和Vue的template非常相 ...

  • Vue+Element Table 列标红

    效果图 列方法 调用 判断 table 数据里有ID为479的吗没,有的话就标记该列为红色 样式