在Element UI的树形结构表格中,序号可以通过自定义渲染来实现。以下是一个示例代码,演示如何在树形结构表格中添加序号:
vue复制代码
<template> | |
<el-table | |
:data="tableData" | |
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" | |
> | |
<el-table-column | |
prop="date" | |
label="日期" | |
width="180" | |
></el-table-column> | |
<el-table-column | |
prop="name" | |
label="姓名" | |
width="180" | |
></el-table-column> | |
<el-table-column | |
label="操作" | |
width="180" | |
></el-table-column> | |
<el-table-column | |
label="序号" | |
width="80" | |
> | |
<template slot-scope="scope"> | |
<span>{{ w.$index + 1 }}</span> | |
</template> | |
</el-table-column> | |
</el-table> | |
</template> | |
<script> | |
export default { | |
data() { | |
return { | |
tableData: [ | |
{ | |
date: '2023-07-18', | |
name: '张三', | |
children: [ | |
{ | |
date: '2023-07-19', | |
name: '李四', | |
}, | |
{ | |
date: '2023-07-20', | |
name: '王五', | |
}, | |
tabletable | ], |
}, | |
{ | |
date: '2023-07-16', | |
name: '赵六', | |
}, | |
], | |
}; | |
}, | |
}; | |
</script> | |
在上述代码中,我们通过在el-table-column组件中添加自定义的模板来渲染序号。在模板中,我们使用w.$index + 1来获取当前行的索引,并加上1来显示序号。这样,在树形结构表格中,每个节点都会显示一个唯一的序号。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论