Element树形表格的简单显示

一、在Element官网复制下来

二、使用后台使用的递归

    1、创建一个Dto

 public class MenuDtoModel
    {
        public int IMd { get; set; }
        public string MName { get; set; }
        public int ParentMenuId { get; set; }
        public int Level { get; set; }
        public string Url { get; set; }
        public int Type { get; set; }
        public int OrderIndex { get; set; }
        public List<MenuDtoModel> ChildMenus;
    }

    2、数据访问层进行使用

public List<MenuDtoModel> AllShow()
        {
            using (var conn = new SqlConnection(_configuration.GetConnectionString("MSSQL")))
            {
                var list = conn.Query<Menu>("select * from Menu").ToList();
                return GetMenu(list);
            }
        }
        
        public List<MenuDtoModel> GetMenu(List<Menu> menus,int parenMenuId=0)
        {
            return menus.Where(p => p.Type == 1 && p.ParentMenuId == parenMenuId).Select(p => new MenuDtoModel
            {
                IMd = p.IMd,
                MName = p.MName,
                ParentMenuId = parenMenuId,
                Level = p.Level,
                Url = p.Url,
                Type = p.Type,
                OrderIndex = p.OrderIndex,
                ChildMenus = GetMenu(menus, p.IMd)
            }).ToList();
        }

三、前台操作

  主意使用  ChildMenus

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="IMd"
      border
      default-expand-all
      :tree-props="{ children: 'ChildMenus' }"
    >
      <el-table-column prop="MName" label="名称"> </el-table-column>
      <el-table-column prop="Url" label="路径"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="delterMenu(scope.row.IUd)">删除</el-button>
          <el-button @click="GaiMenu(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    getMenu() {
      this.$axios.get("http://localhost:39***/api/Menu/AllShow").then((res) => {
        this.tableData = res.data;
      });
    },
  },
  created() {
    this.getMenu();
  },
};
</script>

<style>
</style>

 

 

 

      ......待续