vue(element ui )el-table树形表格展示及数据对齐-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue(element ui )el-table树形表格展示及数据对齐。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

el-table树形表格,element,vue.js,elementui,前端

后端返回数据结构

el-table树形表格,element,vue.js,elementui,前端

页面代码

 <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配置为后端返回的节点字段即可文章来源地址https://www.toymoban.com/news/detail-593709.html

到了这里，关于vue(element ui )el-table树形表格展示及数据对齐的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！