vue(element ui)el-table树形表格展示以及数据对齐方式
作者：wangjiecsdn
这篇文章主要介绍了vue(element ui)el-table树形表格展示以及数据对齐方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
效果图
后端返回数据结构
页面代码
<el-table class="sysDictInfoTable" :data="tableData" height="380" style="width: 100%;" row-key="nodeId"
:tree-props="{ children: 'relatedPartyChild', hasChildren: 'hasChildren' }">
<el-table-column prop="relatedname" label="名称"> </el-table-column>
<el-table-column prop="idTypeName" label="证件类型"> </el-table-column>
<el-table-column prop="identityNo" label="证件号码"> </el-table-column>
<el-table-column label="操作" width="250" fixed="right">
<template #default="scope">
<el-button type="primary" size="small" @click="ModifyTable(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<script>
export default {
data () {
return {
tableData: [],
};
},
mounted () {
this.search();
},
methods: {
//查询
search () {
let formData = {
parentcode: '0'
}
affiliatedQuery_tree(formData).then((res) => {
//接口返回列表
this.tableData = res.data;
}).catch(() => {
this.tableData = [];
});
},
//修改
ModifyTable(){}
},
};
</script>
<style scoped lang='scss'>
// el-table表格对齐
.sysDictInfoTable ::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
td:first-child {
padding-left: 24px !important; //一级数据无Child缩进
}
}
.sysDictInfoTable ::v-deep .el-table__placeholder{
margin-left: 3px; //子节点无Child缩进
}
</style>
注意点：
el-table配置里row-key必须是唯一性
:tree-props=“{ children: ‘relatedPartyChild', hasChildren: ‘hasChildren' }” children配置为后端返回的节点字段即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。