第64章 树型结构数据的前端渲染渲染显示示例_前端树形结构显示

1 \src\views\TreeTestView.vue

<template>

    <div class="wrap">

        <!--注意：1、“回到顶部”组件及其回滚内容都必须包含到同1个div容器中。-->

        <!-- 2、div容器中必须有1个唯1性的样式类（例如：wrap）的定义，以便“回到顶部”组件进行回滚时进行定位。 -->

        <!-- 3、“回到顶部”组件  必须在所有的回滚内容之上。 -->

        <el-backtop :bottom="100" target=".wrap" style="background-color: #666;">

            <el-icon style="color: #99ffff; font-size: 40px; margin-top: -2px;">

                <CaretTop />

            </el-icon>

        </el-backtop>

        <el-row type="flex" justify="end" style="margin:5px 0px;">

            <el-col :span="8">

                <div class="lightgreen-box">

                    <el-button style="background-color: #79bbff; color: #FFFFFF; margin-right:10px" @click="add()">

                        <el-icon style="margin-right:5px; font-size: 22px;">

                            <CirclePlusFilled />

                        </el-icon>

                        添 加

                    </el-button>

                </div>

            </el-col>

        </el-row>

        <el-table :data="currentPageList" style="width: 100%" row-key="id" default-expand-all

            :tree-props="{children: 'childrenCollection', hasChildren: 'hasChildren'}">

            <el-table-column label="编号" property="id" width="100px" />

            <el-table-column label="名称" property="name" />

            <el-table-column prop="createdDateTime" label="创建时间" :formatter="dateTimeformat" width="155" />

            <el-table-column prop="updatedDateTime" label="最后更新时间" :formatter="dateTimeformat" width="155" />

            <el-table-column align="center" width="85px">

                <template #default="scope">

                    <el-button type="primary" size="small"

                        style="letter-spacing:7px; text-indent:10px; margin: 7px 0px;"

                        :disabled="scope.row.email=='admin@yourStore.com'" @click="edit(scope.row)">

                        编辑

                    </el-button>

                </template>

            </el-table-column>

        </el-table>

        <AddTreeTest v-model="this.formAdd.centerDialogVisible" :propParent="this.formAdd">

        </AddTreeTest>

        <EditTreeTest v-model="this.formEidt.centerDialogVisible" :propParent="this.formEidt">

        </EditTreeTest>

    </div>

</template>

<script>

    import {

        categoryIndex,

    } from '../common/http.api.js';

    import moment from 'moment';

    import AddTreeTest from '@/components/TreeTest/AddTreeTest.vue';

    import EditTreeTest from '@/components/TreeTest/EditTreeTest.vue';

    export default {

        components: {

            AddTreeTest,

            EditTreeTest,

        },

        data() {

            return {

                //初始化当前页的渲染数据集列表实例。

                currentPageList: [],

                //添加子页参数实例，由于添加子页，不需要获取监视父窗口传递的参数实例，所以可以只有“centerDialogVisible”。

                formAdd: {

                    //该实例用于指示，当前页面角色编辑子页面是否在父窗口中显示出来。

                    centerDialogVisible: false,

                },

                //编辑子页参数实例。

                formEidt: {

                    id: 0,

                    //该实例用于指示，当前页面角色编辑子页面是否在父窗口中显示出来。

                    centerDialogVisible: false,

                },

            };

        },

        methods: {

            //格式化日期显示。

            dateTimeformat: function(row, column) {

                let data = row[column.property];

                if (data == null) {

                    return null;

                }

                return moment(data).format('YYYY-MM-DD HH:mm:ss');

            },

            //获取当前页面渲染显示所需的数据源。

            async currentPageInit() {

                const res = await categoryIndex();

                this.currentPageList = res.data.response;

                //console.log(this.currentPageList);

            },

            //添加单击事件,为子添加页面的渲染显示提供数据支撑。

            async add() {

                this.formAdd = Object.assign({}, {});

                this.formAdd.centerDialogVisible = true;

            },

            //编辑单击事件,为子编辑页面的渲染显示提供数据支撑。

            async edit(row) {

                this.formEidt = Object.assign({}, row);

                this.formEidt.centerDialogVisible = true;

            },

        },

        async mounted() {

            await this.currentPageInit();

        },

    };

</script>

<style scoped lang="scss">

    .wrap {

        height: 100%;

        overflow-x: hidden;

    }

    //表单“label”字体样式

    :deep(.el-form-item__label) {

        font-weight: 400;

    }

    // 修改表头样式。

    :deep(.el-table__header thead th) {

        background-color: #000000;

        color: #ffd04b;

        font-weight: 400;

        text-align: center;

    }

    //表格隔行变换颜色。

    :deep(.el-table__body tbody tr:nth-child(odd)) {

        background-color: #FFFFFF;

    }

    :deep(.el-table__body tbody tr:nth-child(even) td) {

        background-color: #CCFFFF;

    }

    .userinfo-inner {

        cursor: pointer;

        float: left;

    }

    //标签控件字体样式。

    .el-tag {

        font-weight: 400;

        padding: 5px 5px;

    }

    //按钮控件字体样式。

    .el-button {

        font-weight: 400;

        padding: 5px 5px;

    }

    //“el-pagination”分页组件样式。

    .el-pagination {

        margin-top: 10px;

        //font-size: 25px;

        //"上一页"样式。

        :deep(.btn-prev) {

            background-color: transparent;

            height: 40px;

            margin-right: 20px;

        }

        //"下一页"样式。

        :deep(.btn-next) {

            background-color: transparent;

            height: 40px;

            margin-left: 20px;

        }

        //分页索引样式。

        :deep(.number) {

            background-color: transparent;

            min-width: 40px;

            height: 40px;

            margin-right: 15px;

        }

    }

    //“el-pagination”分页组件中下拉框控件字体样式。

    :deep(.el-input__wrapper) {

        //font-size: 25px;

    }

    .lightgreen-box {

        //background-color: lightgreen;

        //height: 24px;

        float: right;

    }

</style>

2  \src\components\TreeTest\ AddTreeTest.vue

<template>

    <!--

  elmentUI 子页面的渲染显示注意事项说明：

  子页面的渲染显示必须的使用“<el-dialog></el-dialog>标签及其所包含的子标签，否则子页面将不会被渲染显示出来。”

  -->

    <el-dialog width="30%">

        <template #header>

            <div class="my-header">

                <h1 style="margin: 0px; padding: 0px; ">

                    <el-icon style="margin-right:5px; font-size: 25px; color:#337ecc; vertical-align: middle">

                        <CirclePlusFilled />

                    </el-icon>

                    添加产品类型

                </h1>

            </div>

        </template>

        <el-form label-width="100px" class="demo-ruleForm" label-position="left" status-icon :model="formAdd">

            <el-form-item label="上级类型:">

                <el-tree-select v-model="formAdd.parentId" :data="selectList" :render-after-expand="false"

                    :props="{children: 'childrenCollection', label: 'text', value: 'id'}" style="width: 100%;" />

            </el-form-item>

            <el-form-item label="名称:">

                <el-input v-model="formAdd.name" />

            </el-form-item>

        </el-form>

        <template #footer>

            <span class="dialog-footer">

                <el-button>取 消</el-button>

                <el-button type="primary">提 交</el-button>

            </span>

        </template>

    </el-dialog>

</template>

<script>

    import {

        categorySelectListTree,

    } from '../../common/http.api.js';

    export default {

        /*name和propParent属性用于在子页面成功提交后，控制对父页面的自动刷新*/

        name: 'AddTreeTest',

        props: {

            propParent: {},

        },

        data() {

            return {

                formAdd: {

                    parentId: 0,

                    name: '',

                    //该实例用于指示，当前页面角色编辑子页面是否在父窗口中显示出来。

                    centerDialogVisible: false,

                },

                selectList: [],

            };

        },

        //监视父窗口传递的参数实例，来监视弹出对话框的不显示。

        watch: {

            async propParent(val) {

                //console.log(val);

                /*this.formAdd = val用于在子页面成功提交后，控制对子页面的自动关闭和父页面的自动刷新*/

                this.formAdd = val;

                const res = await categorySelectListTree();

                this.selectList = res.data.response;

                this.formAdd.parentId=0;

                //console.log(this.selectList);

            },

        },

        methods: {

        },

        async mounted() {

        },

    };

</script>

<style scoped lang="scss">

    .my-header {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }

</style>

3  \src\components\TreeTest\EditTreeTest.vue

<template>

    <!--

  elmentUI 子页面的渲染显示注意事项说明：

  子页面的渲染显示必须的使用“<el-dialog></el-dialog>标签及其所包含的子标签，否则子页面将不会被渲染显示出来。”

  -->

    <el-dialog width="30%">

        <template #header>

            <div class="my-header">

                <h1 style="margin: 0px; padding: 0px; ">

                    <el-icon style="margin-right:5px; font-size: 25px; color:#337ecc; vertical-align: middle">

                        <Edit />

                    </el-icon>

                    编辑产品类型

                </h1>

            </div>

        </template>

        <el-form label-width="100px" class="demo-ruleForm" label-position="left" status-icon>

            <el-form-item label="编号:">

                <el-input v-model="formEidt.id" disabled />

            </el-form-item>

            <el-form-item label="上级类型:">

                <el-tree-select v-model="formEidt.parentId" :data="selectList" :default-expand-all="true"

                    :props="{children: 'childrenCollection', label: 'text', value: 'id'}" style="width: 100%;" />

            </el-form-item>

            <el-form-item label="名称:">

                <el-input v-model="formEidt.name" />

            </el-form-item>

        </el-form>

        <template #footer>

            <span class="dialog-footer">

                <el-button>取 消</el-button>

                <el-button type="primary">提 交</el-button>

            </span>

        </template>

    </el-dialog>

</template>

<script>

    import {

        categorySelectListTree,

    } from '../../common/http.api.js';

    export default {

        /*name和propParent属性用于在子页面成功提交后，控制对父页面的自动刷新*/

        name: 'EditTreeTest',

        props: {

            propParent: {},

        },

        data() {

            return {

                formEidt: {

                    id: 0,

                    parentId:0,

                    name: '',

                    //该实例用于指示，当前页面角色编辑子页面是否在父窗口中显示出来。

                    centerDialogVisible: false,

                },

                selectList: [],

            };

        },

        //监视父窗口传递的参数实例，使当前子页面中的表单始终显示父窗口最新传递的参数实例。

        watch: {

            async propParent(val) {

                //console.log(val);

                const res = await categorySelectListTree();

                this.selectList = res.data.response;

                /*this.formEidt = val用于在子页面成功提交后，控制对子页面的自动关闭和父页面的自动刷新*/

                this.formEidt = val;

                if(this.formEidt.parentId==null&& this.formEidt.id!=0)

                    this.formEidt.parentId=this.formEidt.id;

            },

        },

        methods: {

        },

        async mounted() {

        },

    };

</script>

<style scoped lang="scss">

    .my-header {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }

</style>

 

对以上功能更为具体实现和注释见：230427_018shopvue(树型结构数据的前端渲染渲染显示示例)。