element-ui table组件如何使用组件如何使用render属性的实现属性的实现
主要介绍了element-ui table组件如何使用render属性的实现，文中通过示例代码介绍的非常详细，对大家的学
习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言前言
起因：起因：
在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方
式去实现。这样解决了手写很多 el-table-column 的情况。
障碍：障碍：
类似于下面自定义表列的样式，它是通过 slot-scope 去覆盖 el-table-column 内部slot的样式实现的。那我们在遍历表头数组
的时候如何实现呢？
参考：参考：
用过 react 开发会经常用到 ant design ，其中它的 table 组件是可以接受 render属性的，下面使用table组件时，只需要定义
好，columns(表头列) data(表的具体数据)即可。整体看起来很简洁 去渲染自定义的组件的。 点击查看 antdesign
demo：：
codepen demo地址
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => {
if (index < 4) {
return <a>{text}</a>;
}
return {
children: <a>{text}</a>,
props: {
colSpan: 5,
},
};
},
}]
const const data = [
{
key: '1',
name: 'John Brown',
age: 32,
tel: '0571-22098909',
phone: 18889898989,
address: 'New York No. 1 Lake Park',
}]
ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, mountNode);
在在 Vue 中实现中实现 render 属性属性
接下来我们要实现下图的table的样式，但是这一次我们采用 render 传参数的方式
思路思路
1. 父组件将需要渲染的列表通过 props 传递给子组件
2. 子组件使用 slot 并填充默认渲染的 el-table-column 方式为 prop 渲染 data 中传递的值
3. 子组件通过 slot 将值传回给父组件，父组件通过 slot-scope 接受到子组件的值，判断该项是否有 render 属性，有的话
在组件标签添加 render 属性返回的 html 去覆盖 slot 中默认的值。
子组件定义默认值子组件定义默认值
有了上面的思路，去实现子组件。我们需要知道一点，每个 el-table-column 只是定义了一列的表头和数据，而
:data="tableList" 中的每项值是定义了一行的数据。所以 el-table-column 是按列来分，data 是按行来分
通过props 去接受表头列表，数据列表
遍历表头数据，并且将 el-table-column 作为默认数据，使用 slot 包裹起来
评论0