element-ui table组件如何使用render属性的实现

2023-08-09 21:26:05 72

前言

起因：

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

障碍：

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

参考：

用过react开发会经常用到antdesign，其中它的table组件是可以接受render属性的，下面使用table组件时，只需要定义好，columns(表头列)data(表的具体数据)即可。整体看起来很简洁去渲染自定义的组件的。点击查看antdesign

demo：

codependemo地址

constcolumns=[
{
title:'Name',
dataIndex:'name',
render:(text,row,index)=>{
if(index<4){
return{text};
}
return{
children:{text},
props:{
colSpan:5,
},
};
},
}]
constconstdata=[
{
key:'1',
name:'JohnBrown',
age:32,
tel:'0571-22098909',
phone:18889898989,
address:'NewYorkNo.1LakePark',
}]
ReactDOM.render(,mountNode);

在Vue中实现render属性

接下来我们要实现下图的table的样式，但是这一次我们采用render传参数的方式

思路

父组件将需要渲染的列表通过props传递给子组件
子组件使用slot并填充默认渲染的el-table-column方式为prop渲染data中传递的值
子组件通过slot将值传回给父组件，父组件通过slot-scope接受到子组件的值，判断该项是否有render属性，有的话在组件标签添加render属性返回的html去覆盖slot中默认的值。

子组件定义默认值

有了上面的思路，去实现子组件。我们需要知道一点，每个el-table-column只是定义了一列的表头和数据，而:data="tableList"中的每项值是定义了一行的数据。所以el-table-column是按列来分，data是按行来分

通过props去接受表头列表，数据列表
遍历表头数据，并且将el-table-column作为默认数据，使用slot包裹起来
通过slot想父组件传递当前项的数据

父组件定义

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

首先看传递给子组件的表头数据，可以看到，第二，三行列表中有一个render属性，它是一个函数并返回一个html的字符串。
tableList就是普通的数据，也就是数据的key值去渲染对应的数据
图片这列举例子，当父组件通过props将{label,prop,id,render}传递给子组件后，子组件有通过slot将值传递回父组件。
- 到这里有些人会有疑问，为什么要将数据这样传来传去，因为我们在子组件中定义好了默认样式，而父组件中需要判断该值是否需要自定义样式，去覆盖子组件中的样式。
- 这些自定义样式就是一开始，在render函数中返回的html字符串
- 为啥React直接返回jsx，而Vue需要返回html字符串，因为react本身就是使用JSX来渲染模版的，最终都会通过babel编译成React.createElement,而Vue是通过template来渲染模版的，这里通过定义template模版字符串，最终通过v-html来解析
为什么这里有两个slot-scope，第一个是slot-item的，组件内部通过slot-scope将值传递出来。而第二个是el-table-item的，ui组件内部同样将数据通过slot-scope传递传来。
通过第一个slot-scope拿到propList中的定义的render函数，通过第二个slot-scope拿到table组件内部传递出来的数据，将数据传递给render函数去生成自定义模版

最终通过v-html去解析生成的字符串模版

exportdefault{ components:{ SlotItem }, data(){ return{ propList:[ {label:'姓名',prop:'name',id:1}, {label:'图片',prop:'pic',id:2,render:({pic})=>{ return`` }}, {label:'操作',prop:'operate',id:3,render:({text})=>{ return`${text}

` }}, ], tableList:[ {name:'章三',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c192f6.png',text:'新增'}, {name:'里斯',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c2797e.png',text:'删除'}, {name:'网舞',pic:'https://zh-static-files.oss-cn-hangzhou.aliyuncs.com//karazhan/content/poster/2019/11/16e30c33144.png',text:'跳转'}, ] } } }

结尾

有了render属性，可以想ant-design那样简洁的属性ui组件模版了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

element-ui table组件如何使用render属性的实现

热门推荐

随机推荐