element-ui表组件使用渲染属性的实现方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍了element-ui表组件使用渲染属性的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强>前言

<强>起因:

在使用element-ui表组件时,由于表列比较多一个个写特别麻烦,所以想通过将所有表头定义成一个数组,通过遍历多方式去实现。这样解决了手写很多el-table-column的情况。

<强>障碍:

类似于下面自定义表列的样式,它是通过slot-scope去覆盖el-table-column内部槽的样式实现的。那我们在遍历表头数组的时候如何实现呢?

<强>参考:

用过反应开发会经常用到蚂蚁设计,其中它的表组件是可以接受呈现属性的、下面使用表组件时,只需要定义好,列(表头列)数据(表的具体数据)即可。整体看起来很简洁去渲染自定义的组件的。点击查看antdesign

<强>演示:

codepen演示地址

<强>在Vue中实现呈现属性

接下来我们要实现下图的表的样式,但是这一次我们采用渲染传参数的方式

<人物>

element-ui表组件使用渲染属性的实现方法”>,</p> <p> <强>思路</强> </p> <ol类= <李>

父组件将需要渲染的列表通过道具传递给子组件

<李>

子组件使用槽并填充默认渲染的el-table-column方式为道具渲染数据中传递的值

<李>

子组件通过槽将值传回给父组件,父组件通过slot-scope接受到子组件的值,判断该项是否有渲染属性,有的话在组件标签添加渲染属性返回的html去覆盖槽中默认的值。

<强>子组件定义默认值

有了上面的思路,去实现子组件。我们需要知道一点,每个el-table-column只是定义了一列的表头和数据,而:data=https://www.yisu.com/zixun/皌ableList”中的每项值是定义了一行的数据,所以el-table-column是按列来分,数据是按行来分

<李>

通过道具去接受表头列表,数据列表

<李>

遍历表头数据,并且将el-table-column作为默认数据,使用槽包裹起来

<李>

通过槽想父组件传递当前项的数据

& lt; template> 　　,& lt; el-table : data=https://www.yisu.com/zixun/" tableList "> 　　<模板v="项propList "> 　　<槽:内容="项目"> 　　　　　　　　　　　　<>脚本　　出口默认{ 　　道具:{ 　　propList: { 　　类型:数组, 　　默认值:()=> [] 　　}, 　　tableList: { 　　类型:数组, 　　默认值:()=> [] 　　}, 　　} 　　} 　　

<强>父组件定义

父组件通过slot-scope来接受到子组件传递过来的数据,然后判断是否有渲染属性来确定是否用要去自定义样式覆盖默认的槽

<李>

首先看传递给子组件的表头数据,可以看的到,第二,三行列表中有一个渲染属性,它是一个函数并返回一个html的字符串。

<李>

tableList就是普通的数据,也就是数据的关键值去渲染对应的数据

<李>

图片这列举例子,当父组件通过道具将{标签、道具id,呈现}传递给子组件后,子组件有通过槽将值传递回父组件。

<李>

到这里有些人会有疑问,为什么要将数据这样传来传去,因为我们在子组件中定义好了默认样式,而父组件中需要判断该值是否需要自定义样式,去覆盖子组件中的样式。