前端显示树结构表格，封装element的图标

跟教学视频做的项目记录

树结构表格

后端：

实体类中添加字段

 @JsonInclude(JsonInclude.Include.NON_NULL) //属性值为null不进行序列化操作
    @TableField(exist = false)
    private List<Permission> children = new ArrayList<Permission>();
    /**
     * 用于前端判断是菜单、目录或按钮
     */
    @TableField(exist = false)
    private String value;
    /**
     * 是否展开
     */
    @TableField(exist = false)
    private Boolean open;

创建一个生成树结构的工具类：

此方法递归的创建。需要两个参数，一个是对象的集合，一个是自己的父级id。

public static List<Permission> makeMenuTree(List<Permission> menuList,Long pid){
        //创建集合保存菜单数据
        List<Permission> permissionList = new ArrayList<>();
        //判断菜单列表是否为空，如果不为空则使用菜单列表，否则创建集合对象
        Optional.ofNullable(menuList).orElse(new ArrayList<Permission>())
                .stream().filter(item -> item!=null && item.getParentId() == pid)
                .forEach(item ->{
                    //创建权限菜单对象
                    Permission permission = new Permission();
                    //将原有的属性赋值给菜单对象
                    BeanUtils.copyProperties(item,permission);
                    //获取每一个item对象的子菜单，递归生成菜单树
                    List<Permission> children = makeMenuTree(menuList, item.getId());
                    //设置子菜单
                    permission.setChildren(children);
                    //将菜单对象添加到集合
                    permissionList.add(permission);
                });
        //返回菜单信息
        return permissionList;
    }

service层

@Override
    public List<Permission> findPermissionList(PermissionVo permissionVo) {
        QueryWrapper<Permission> wrapper = new QueryWrapper<>();
        //排序
        wrapper.orderByAsc("order_num");
        //调用查询菜单列表的方法
        List<Permission> permissionList = permissionMapper.selectList(wrapper);
        //生成菜单树
        List<Permission> menuTree = MenuTree.makeMenuTree(permissionList, 0L);
        return menuTree;
    }

controller层

@GetMapping("/list")
    public Result getMienList(PermissionVo permissionVo) {
        //查询菜单列表
        List<Permission> permissionList = permissionService.findPermissionList(permissionVo);
        return Result.ok(permissionList);
    }

前端：

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

必须指定row-key：

Default-expand-all字段：默认展开所有的结构

：data 是接收数据的字段。需要再返回值中定义。连接后端成功后，需要给这段字段赋值。

 

：tree-props 是绑定树结构的渲染嵌套数据的配置选项。

字段中的children第二个是实体类中定义的字段名。

<el-table 
        :data="menuLists"
        :height="tableHeight"
        style="width:100%;margin-top:20px"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children:'children'}"
        >
            <el-table-column prop="label" label="菜单名称"></el-table-column>
            <el-table-column prop="type" label="菜单类型" align="center">
                <template scope="scope">
                    <el-tag size="normal" v-if="scope.row.type === 0">目录</el-tag>
                    <el-tag size="normal" type="success" v-else-if="scope.row.type === 1">菜单</el-tag>
                    <el-tag size="normal" type="warning" v-else>按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="icon" label="菜单图标" align="center">
                <template slot-scope="scope">
                    <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
                    <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
                </template>
            </el-table-column>
            <el-table-column prop="neme" label="路由名称"></el-table-column>
            <el-table-column prop="path" label="路由地址"></el-table-column>
            <el-table-column prop="url" label="组件路径"></el-table-column>
            <el-table-column label="操作" style="width:230px">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

这其中的菜单类型数据库中存的是1，2，3的整数

根据if判断显示不同的名称。并添加了样式。使用了type绑定。

封装element图标

在utils中，新建一个icons.js文件  里面保存的就是element中的图标样式。

export const elementIcons = ["platform-eleme", "eleme", "delete-solid", "delete",
"s-tools", "setting", "user-solid", "user", "phone", "phone-outline", "more",
"more-outline", "star-on", "star-off", "s-goods", "goods", "warning", "warning-outline", "question", "info", "remove", "circle-plus", "success", "error", "zoom-in", "zoom-out", "remove-outline", "circle-plus-outline", "circle-check", "circle-close", "s-help", "help", "minus", "plus", "check", "close", "picture", "picture-outline", "picture-outline-round", "upload", "upload2", "download", "camera-solid", "camera", "video-camera-solid", "video-camera", "message-solid", "bell",
"s-cooperation", "s-order", "s-platform", "s-fold", "s-unfold", "s-operation", "s-promotion", "s-home", "s-release", "s-ticket", "s-management", "s-open", "s-shop",
"s-marketing", "s-flag", "s-comment", "s-finance", "s-claim", "s-custom", "s-opportunity", "s-data", "s-check", "s-grid", "menu", "share", "d-caret", "caret-left", "caret-right", "caret-bottom", "caret-top", "bottom-left", "bottom-right",
"back", "right", "bottom", "top", "top-left", "top-right", "arrow-left", "arrow-right", "arrow-down", "arrow-up", "d-arrow-left", "d-arrow-right", "video-pause",
"video-play", "refresh", "refresh-right", "refresh-left", "finished", "sort",
"sort-up", "sort-down", "rank", "loading", "view", "c-scale-to-original", "date",
"edit", "edit-outline", "folder", "folder-opened", "folder-add", "folder-remove",
"folder-delete", "folder-checked", "tickets", "document-remove", "document-delete", "document-copy", "document-checked", "document", "document-add",
"printer", "paperclip", "takeaway-box", "search", "monitor", "attract", "mobile",
"scissors", "umbrella", "headset", "brush", "mouse", "coordinate", "magic-stick",
"reading", "data-line", "data-board", "pie-chart", "data-analysis", "collection-tag", "film", "suitcase", "suitcase-1", "receiving", "collection", "files",
"notebook-1", "notebook-2", "toilet-paper", "office-building", "school", "table-lamp", "house", "no-smoking", "smoking", "shopping-cart-full", "shopping-cart-1",
"shopping-cart-2", "shopping-bag-1", "shopping-bag-2", "sold-out", "sell",
"present", "box", "bank-card", "money", "coin", "wallet", "discount", "price-tag",
"news", "guide", "male", "female", "thumb", "cpu", "link", "connection", "open",
"turn-off", "set-up", "chat-round", "chat-line-round", "chat-square", "chat-dot-round", "chat-dot-square", "chat-line-square", "message", "postcard", "position",
"turn-off-microphone", "microphone", "close-notification", "bangzhu", "time",
"odometer", "crop", "aim", "switch-button", "full-screen", "copy-document", "mic",
"stopwatch", "medal-1", "medal", "trophy", "trophy-1", "first-aid-kit",
"discover", "place", "location", "location-outline", "location-information", "add-location", "delete-location", "map-location", "alarm-clock", "timer", "watch-1",
"watch", "lock", "unlock", "key", "service", "mobile-phone", "bicycle", "truck",
"ship", "basketball", "football", "soccer", "baseball", "wind-power", "light-rain", "lightning", "heavy-rain", "sunrise", "sunrise-1", "sunset", "sunny",
"cloudy", "partly-cloudy", "cloudy-and-sunny", "moon", "moon-night", "dish",
"dish-1", "food", "chicken", "fork-spoon", "knife-fork", "burger", "tableware",
"sugar", "dessert", "ice-cream", "hot-water", "water-cup", "coffee-cup", "cold-drink", "goblet", "goblet-full", "goblet-square", "goblet-square-full",
"refrigerator", "grape", "watermelon", "cherry", "apple", "pear", "orange",
"coffee", "ice-tea", "ice-drink", "milk-tea", "potato-strips", "lollipop", "ice-cream-square", "ice-cream-round"].map(s => "el-icon-" + s);

在components中，新建一个MyIcon.vue

<template>
    <div class="chooseIcons">
        <el-popover placement="bottom" width="450" trigger="click">
            <span
            slot="reference"
            style="
            display: inline-block;
            width: 200px;
            height: 33px;
            line-height: 33px;
            "
            >
                <i :class="userChooseIcon"></i>
                {{ userChooseIcon }}
            </span>
            <div class="iconList">
                <i
                v-for="item in iconList"
                :key="item"
                :class="item"
                @click="setIcon(item)"
                style="font-size: 20px"
                ></i>
            </div>
        </el-popover>
    </div>
</template>

<script>
//导入自定义的icon图标库
import { elementIcons } from "@/utils/icons";
    export default{
        name:"MyIcon",
        data(){
            return{
                //属性
                iconList: [],//图标列表
                userChooseIcon: "",//用户选中的图标
            }
        },
        methods: {
            //查询图标的方法
            getIconList(){
                this.iconList = elementIcons;
            },
            //给icon绑定的点击事件
            setIcon(icon) {
                this.userChooseIcon = icon; //将i的样式设为选中的样式el-icon-xxx
                // this.menu.icon = icon;     //在这里就不能使用这个方法进行赋值了
                //将选中的图标传递给父组件  尽量不要使用驼峰命名。
                this.$emit("selecticon",icon);
            },
        },
        //创建时就调用方法。
        created(){
            this.getIconList()
        }
    }
</script>

<style lang="scss" scoped>
    .iconList {
        width: 400px;
        height: 300px;
        overflow-y: scroll;
        overflow-x: hidden;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        i {
            display: inline-block;
            width: 60px;
            height: 45px;
            color: #000000;
            font-size: 20px;
            border: 1px solid #e6e6e6;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            line-height: 45px;
            margin: 5px;
            &:hover {
                color: orange;
                border-color:orange;
            }
        }
    }
    .chooseIcons{
        width: 175px;
        background-color: #FFFFFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 33px;
        line-height: 25px;
        outline: none;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
</style>

在使用的界面引用，注册

需要显示时：

<el-table-column prop="icon" label="菜单图标" align="center">
                <template slot-scope="scope">
                    <i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
                    <svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
                </template>
            </el-table-column>