1、参考文献：https://blog.csdn.net/qq_52855464/article/details/125996915
v-if="dataSource && dataSource.length"
:defaultExpandAllRows="true"
后端返回的数据中包含children
1.1. 默认展开所有行
通过设置默认展开所有节点属性：:defaultExpandAllRows="true"
但是这样设置后，在重新获取新的数据后（即经历了tableData置空再赋值），却不会再默认展开节点。
1.2. 改进
在渲染之前先判断数据是否存在，存在即渲染就ok，问题得以解决。
通过 添加v-if 判断
<a-table
v-if="commentList && commentList.length"
:columns="columns"
:data-source="commentList"
childrenColumnName = "children"
@change="handleTableChange"
:defaultExpandAllRows="true"
>
1.3. 去掉前面的 +
可以给表格加上下面两句代码
:expandIconAsCell='false' // 去除表格标题栏+号
:expandIconColumnIndex=-1 // 去除表格body里的+号
其他样式修改
可以通过设置 indentSize 以控制每一层的缩进宽度。
注意：
该属性在 不加上 :expandIconColumnIndex=-1 时有效果 （此时会展示 树形图的 + 号）
完整代码
<a-table
v-if="commentList && commentList.length"
ref="table"
:columns="columns"
:data-source="commentList"
@change="handleTableChange"
childrenColumnName = "children"
:defaultExpandAllRows="true"
:expandIconColumnIndex=-1
>
效果图
2、对齐优化：
方法一： columns: [
{
title:'工程名称',
dataIndex: 'projectName',
customCell: () => {
return {
style: {//可以定义祥式
'text-align':'left',
'padding-left':'30px'
}
}
}
},
方法二：
<style lang="less" scoped >
@import '~@assets/less/common.less';
/deep/.ant-table-header-column {
text-align: left;
padding-left: 50px;
}
</style>
效果：
