没有合适的资源?快使用搜索试试~ 我知道了~
element-ui table组件如何使用render属性的实现
5星 · 超过95%的资源 2 下载量 150 浏览量
2021-01-19
21:16:45
上传
评论
收藏 85KB PDF 举报
温馨提示
试读
3页
前言 起因: 在使用 element-ui table组件时,由于表列比较多一个个写特别麻烦,所以想通过将所有表头定义成一个数组,通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。 障碍: 类似于下面自定义表列的样式,它是通过 slot-scope 去覆盖 el-table-column 内部slot的样式实现的。那我们在遍历表头数组的时候如何实现呢? 参考: 用过 react 开发会经常用到 ant design ,其中它的 table 组件是可以接受 render属性的,下面使用table组件时,只需要定义好,columns(表头列) data(表的具体数
资源详情
资源评论
资源推荐
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 传参数的方式
weixin_38518518
- 粉丝: 6
- 资源: 959
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论10