el-table-render el-table表格使用配置化和render的方式替代template和slot

# el-table-render
```
npm i el-table-render // 安装
```

- 帮助你在el-table里面以配置化的写法,并支持render函数,你可以写jsx或render function
- 后续功能优化中

- 食用方法
```html
   <ElTableRender :columns="tableColumns" :data="tableData" height="300" />
```
```js
const tableColumns = [
  {
              prop: 'name',
              label: 名称,
              width: '200px',
              render:(h,{row})=>(
               <div>{row.name}</div>
              ),
              headerRender: (h,props) => (
              <div>customTitle</div>
            )
            }
]
```

- 上源码
```js
export default {
  functional: true,
  props: {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree 和 el-table 都是 Element UI 组件库中的常用组件,可以通过它们的组合使用来实现一些特定的需求,比如展示树形结构数据并支持表格操作。 具体实现方法如下: 1. 在 el-tree 中设置 node-template,可以使用 el-table 来渲染每个节点的子表格; 2. 在 el-table使用 slot-scope 插槽来自定义每行的内容,在其中可以使用 el-tree 的节点数据来动态生成行的数据,实现树形结构的展示。 示例代码如下: ```html <template> <el-tree :data="treeData" :props="defaultProps" :node-key="defaultNodeKey" :expand-on-click-node="false" :render-after-expand="true" :node-template="renderTreeNode" ></el-tree> </template> <script> export default { data() { return { treeData: [ { label: '一级节点', children: [ { label: '二级节点', children: [ { label: '三级节点', children: [ { label: '四级节点', }, ], }, ], }, ], }, ], }; }, methods: { renderTreeNode(h, { node, data }) { return ( <el-table :data="data.children" style="width: 100%"> <el-table-column prop="label" label="标签"></el-table-column> <el-table-column prop="description" label="描述"></el-table-column> </el-table> ); }, }, }; </script> ``` 在上面的示例代码中,我们使用el-tree 的 `node-template` 属性来指定节点的模板,并将 el-table 作为模板的内容,来展示每个节点的子表格数据。同时,在 el-table使用了 `slot-scope` 插槽来自定义每行的内容,通过访问节点数据的 `children` 属性,来动态生成表格中的行数据。 需要注意的是,在使用 el-tree 和 el-table 组合展示数据时,需要考虑到数据量的大小和渲染性能的问题,尤其是在数据量较大时,需要进行分页或虚拟渲染等优措施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值