在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小时内删除。