elementUI中el-table树形结构中折叠符号的位置问题

elementUI中el-table树形结构中折叠符号的位置问题

1.业务需求：

• vue项目，权限菜单管理中菜单table的树形结构，一般情况下如果使用的是elementUI那么可以使用里面el-table的树形结构（但是其中有一些坑点还是要注意），当然我们也可以引入外部插件，比如tree-table-vue（这款插件也比较好用，但是如果考虑整个项目的性能的话，外部插件的引用少一点比较好），这里就谈谈el-table的树形结构的使用。

2.问题分析：

• 我在使用过程中遇到其中一个坑点就是el-table树形折叠符号的位置设置不到第一列的问题，如图：
  
• 当然需要的效果肯定是树形的折叠符号在第一列显示，通过测试发现，这个el-table的树形设置的row-key值对应的字段在树形数据中的位置有影响，现解决方案有如下两条：

3.解决方案1：

• 经过测试，我的解决方案是在第一列不设置树形数据的字段，使用如下的序号列，这样第一列就没有使用这个树形数据中的任何字段，进过测试，这样就解决了以上问题。
• table中的序号代码：

<el-table-column label="序号" align="left">
              <template slot-scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
            </el-table-column>

4.解决方案2：

• 去掉el-table-column中的type原生属性即可。

5.解决后效果

• 解决后的效果：（这里树形折叠符号是使用css调整过的）