elementui table二次封装,

　　本文主要介绍element el-table表(具有高度自适应表)的二次封装实现。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。

前言

　　在公司实习，使用vue element-ui框架进行前端开发。el-table的表格很多，有些业务逻辑相似，有些地方高度重复。如果多个页面使用同一个函数，就需要重复编写逻辑相似的代码。所以我打算封装表单组件，把相同的代码和逻辑封装在一起，把不同的业务逻辑分开。话不多说，就让它发生吧。

一、原生el-tbale代码——简单封装

　　这里直接引用和复制官方的基本用法模板()。下面的代码，主要是提取html部分。可以看出，每个el-table-column包含prop、label和width属性，但是这些属性的值并不完全相同。其余的都差不多，所以header(表中每个el-table-column的定义)可以封装在这里，把不同的地方封装成一个数组对象结构。

　　包装前

　　模板

　　el表

　　:data=tableData

　　style=宽度：100%

　　El-表格-列

　　prop=date

　　标签=日期

　　宽度=180

　　/El-表格-列

　　El-表格-列

　　prop=name

　　Label= name

　　宽度=180

　　/El-表格-列

　　El-表格-列

　　prop=地址

　　Label=地址

　　/El-表格-列

　　/el-table

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　表数据：[{

　　日期：“2016年5月2日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1518弄”

　　}, {

　　日期：“2016年5月4日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1517弄”

　　}, {

　　日期：“2016年5月1日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1519弄”

　　}, {

　　日期：“2016年5月3日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1516弄”

　　}]

　　}

　　}

　　}

　　/脚本

　　形成外观

　　包装后

　　模板

　　El-table:data= table data style= width:100%

　　模板v-for=(item，key) in header

　　El-表格-列

　　:key=key

　　:prop=itm.prop？itm.prop : null

　　:label=itm.label？itm.label : null

　　:width=itm.width？itm.width : null

　　/El-表格-列

　　/模板

　　/el-table

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　标题：[

　　{属性： 日期，标签:日期，宽度： 180}，

　　{属性： 名称，标签:名称，宽度： 180}，

　　{属性：地址，标签:地址 }

　　],

　　表格数据：[

　　{

　　日期：“2016年5月2日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1518弄”

　　},

　　{

　　日期：“2016年5月4日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1517弄”

　　},

　　{

　　日期：“2016年5月1日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1519弄”

　　},

　　{

　　日期：“2016年5月3日”，

　　姓名：“王小虎”，

　　地址：“上海市普陀区金沙江路1516弄”

　　}

　　]

　　};

　　}

　　};

　　/脚本

　　目前数据量还是比较少的，可能看不出封装组件的优势，但是和前面的代码相比，这里的逻辑看起来更清晰，而且修改列的时候，只需要修改数据中的表头数据就可以了，不用“开刀”()/in html代码。以上是最简单的包。严格来说，它只是代码中数据结构的简单抽象。在正常的业务中，它肯定不仅仅是这么简单的一个包。接下来是重点 _ 。

二、el-tbale代码——复杂封装

　　在真正的开发过程中，表格不仅仅要展示数据，还要完成一些额外的任务，比如污物（增删改查操作)和数据格式转化，表格内每一条数据都有可能被单独修改或者执行一些功能性的交互，这时候就要在单元格内内嵌一些按钮、输入框、标签等等的代码，元素官方给出的方法是使用插槽槽，获取对应行的数据使用槽镜，在对应的列中设置相应的代码，但是这里给我们二次封装就会带来不小的问题，如果只是单纯的修改数据的格式使用官方提供的格式程序属性还可以实现，但是要内嵌代码就会比较麻烦，内嵌代码必然就会带来封装上的困难，这也是我在封装代码的时候遇到的最大的阻碍，如果要想封装好这个表格，就必须将这部分代码抽离出组件外，在查询阅读了大量博客之后（其实是我菜了，学艺不精(TT))，我终于找到了将内嵌代码剥离出组件的方法(),那就是提出函数，关于提出可以参考一下这篇博客，使用提出函数就可以轻而易举的将这部分逻辑代码抽离出来了。

　　埃尔表真正二次封装

　　二次封装源代码

　　模板

　　埃尔表

　　empty-text=暂无数据

　　ref=table

　　:data=tableList

　　边界

　　种类

　　合适的

　　突出显示-当前行

　　:height=inTableHeight

　　@ selection-change=选择更改

　　@row-click=rowClick

　　！-选择框-

　　埃尔-表格-列

　　v-if=select

　　type=selection

　　固定=左

　　宽度=55

　　align=居中

　　/

　　模板v-for=(itm，idx)在标题中

　　！-特殊处理列-

　　埃尔-表格-列

　　v-if=itm.render

　　:key=idx

　　:prop=itm.prop？itm.prop : null

　　:label=itm.label？itm.label : null

　　:width=itm.width？itm.width : null

　　:sortable=itm.sortable？ itm.sortable : false

　　:align=itm.align？ itm.align:居中

　　:fixed=itm.fixed？ itm.fixed : null

　　:show-overflow-tooltip= ITM工具提示

　　最小宽度=50

　　模板槽-范围="范围"

　　插槽外

　　:render=itm.render

　　:row=scope.row

　　:索引="范围“索引”

　　:column=itm

　　/

　　/模板

　　/El-表格-列

　　！-正常列-

　　埃尔-表格-列

　　五-否则

　　:key=idx

　　:prop=itm.prop？itm.prop : null

　　:label=itm.label？itm.label : null

　　:width=itm.width？itm.width : null

　　:sortable=itm.sortable？ itm.sortable : false

　　:align=itm.align？ itm.align:居中

　　:fixed=itm.fixed？ itm.fixed : null

　　:formatter=itm.formatter

　　:show-overflow-tooltip= ITM工具提示

　　最小宽度=50

　　/

　　/模板

　　/el-table

　　/模板

　　脚本

　　//自定义内容的组件

　　var exSlot={

　　功能性：真的，

　　道具：{

　　行：对象，

　　渲染：函数，

　　指数：数字，

　　列：{

　　类型：对象，

　　默认值：空

　　}

　　},

　　render: (h，context)={

　　常量参数={

　　row: context.props.row，

　　索引：上下文. props.index

　　};

　　如果(上下文。道具。列)参数。列=上下文。道具。列；

　　返回context.props.render(h，params)；

　　}

　　};

　　导出默认值{

　　组件：{ exSlot }，

　　道具：{

　　表列表：{

　　类型：数组，

　　默认值：()=[]

　　},

　　标题：{

　　类型：数组，

　　默认值：()=[]

　　},

　　选择：{

　　类型：布尔型，

　　默认值：()=false

　　},

　　高度：{

　　类型：[数字，字符串，函数],

　　默认值：()=null

　　}

　　},

　　data() {

　　返回{

　　inTableHeight: null

　　};

　　},

　　已创建(){

　　//该阶段可以接收父组件的传递参数

　　这个。intableheight=this。身高；

　　},

　　已安装(){

　　这个. nextTick(()={

　　//表格高度自适应浏览器大小

　　这个。change table hight()；

　　如果(!this.height) {

　　window.onresize=()={

　　这个。change table hight()；

　　};

　　}

　　});

　　},

　　销毁(){

　　//高度自适应事件注销

　　窗户。on resize=null

　　},

　　观察：{

　　/**

　　* 数据变化后高度自适应

　　*/

　　tableList() {

　　这个. nextTick(()={

　　这个。change table hight()；

　　});

　　}

　　},

　　方法：{

　　/**

　　*选择后选择框改变，事件分发。

　　*/

　　selectionChange(选择){

　　这个。$emit(选择-更改，选择)；

　　},

　　/**

　　*点击事件

　　*/

　　rowClick(行、列、事件){

　　这个。$emit(行单击，行，列，事件)；

　　},

　　/**

　　*高度适应性

　　*当表格显示空间小于460时，以460px显示；当它更大时，它是高度填充的。

　　*/

　　changeTableHight() {

　　如果(this.height) {

　　//如果有进入的高度，取消适应。

　　this . intableheight=this . height；

　　这个。$ refs . table . dolayout()；

　　返回；

　　}

　　let tableHeight=window . inner height document . body . client height；

　　//高度设置

　　让disTop=this。$ refs.table. $ el

　　//如果表格顶部有元素，减去这些高度自适应的窗口，66是底部的空白部分

　　tableHeight-=distop . offsettop 66；

　　if(distop . offset parent)tableHeight-=distop . offset parent . offset top；

　　this . intableheight=tableHeight 460？460:tableHeight；

　　//重新绘制表格

　　这个。$ refs . table . dolayout()；

　　}

　　}

　　};

　　/脚本

　　款式/风格

　　封装代码的相关解释

　　那是我封装的代码。因为有些属性或者方法没有用到，所以我没有封装相应的方法和属性。如果你在开发中使用了相应的地方，其实可以像猫画虎一样把它们填进去。当我封装这个表时，我在属性中使用了三元运算符来实现一些兼容性。如果不传递相应的属性，就给一个默认值，比如align attribute。我设置了默认的中心。也有方法。在表方法引用方面，实际上官方方法是用$emit事件的同一个方法分发给父组件的，这样父组件就可以引用element的官方文档来使用这些方法。我只在组件中转发了一次。我自己写的时候没有用太多方法，所以只封装了一两个，有需要可以自己添加。除了上面两个包，还有一个特殊的地方，就是复选框，不能放在循环里，否则会出错。可能是索引有问题，所以我用单个参数来控制选择框是否显示。另外，在公司的产品要求中，表格可以适应页面的高度。这个功能我也修改了很久，460是最低身高。所有关于高度适配的内容都在changeTableHight()方法中。如果你不需要这个函数，就删除这个函数和所有引用它的地方。

　　Height:如果没有传入这个属性，那么如上所述，表格的高度是自适应的。您可以通过该属性指定表格的高度。

　　Formatter:如果在列中使用插槽，该属性将无效，所以我设置了两列。如果有一个render方法声明单元格要嵌入代码，那就是特殊列，否则就是普通列，所以formatter和render不能同时使用。

　　Render:终于到了最关键的点了(~ ~ 65)

　　以上是我附上的表格的详细说明，可能会有遗漏的部分。毕竟我把这个表格围起来学了很多，所以之前有些解释可能不太清楚或者不到位。希望大家指正。

三、父组件引用封装的组件

　　封装了这么长时间的组件，当然要用了才能知道好不好。关于引用，你应该首先在引用的地方注册组件。如果您已经进行了全球注册，则可以忽略本地注册。这里就不详细解释组件的注册了(o ) o我用的是全局注册，所以这里直接介绍我自己打包的组件。

　　模板

　　你好

　　xd-table:table-list= table data :header= header height= 300 /xd-table

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“HelloWorld”，

　　data() {

　　返回{

　　标题：[

　　{道具： w ，标签: w }，

　　{属性： x ，标签: x ，

　　格式化程序：(行)={

　　返回row . x . to fixed(3)；

　　},

　　},

　　{属性： d ，标签: d ，

　　格式化程序：(行)={

　　返回row . d . to fixed(2)；

　　},

　　},

　　{

　　标签:“操作”，

　　render: (h，data)={

　　返回(

　　el按钮

　　type=primary

　　onClick={()={

　　this . handle click(data . row)；

　　}}

　　单击以获取行数据。

　　/el-button

　　);

　　},

　　},

　　],

　　表格数据：[

　　{ w: 1，x: 99.25123，d: 0.23892 }，

　　{ w: 1，x: 255.6666，d: 0.99134 }，

　　],

　　};

　　},

　　方法：{

　　手柄单击(行){

　　console . log(row)；

　　},

　　},

　　};

　　/脚本

　　在引用组件之前，您必须记住先注册它。在这里，我只用了几个属性，其他的都不用。因为是demo，所以主要是一个展现render内嵌代码的方法，还有一个就是官方formatter方法的使用。

　　需要注意的一点是，我在渲染中使用了JSX模板语法。这里，我需要在VUE项目中单独配置JSX语法。如果你不想用JSX，你可以直接写。因为没有JSX语法编写的嵌入式模板代码很难阅读，所以我就不展示了。个人建议用JSX语法，虽然有些地方和原生vue不一样。

效果截图

结语

　　这次打包vue组件，我花了近半个月的时间，从最初接触到发现bug再到修改，最后来来回回精简打包这个二次包中出现的组件。也许对于熟悉vue和element的人来说，这个包其实很简单，但是对于我来说，这是我实习比较好的一个包。当然，除了封装这个组件，还有其他的事情要做。不可能离开公司的工作(哈哈哈哈︿ (︵︵︵︿︿︿︿︿︿︿︿6507

　　关于element el-table(具有高度自适应的表)的二次封装的文章到此结束。有关element el-table的二次封装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。