Vue.js与ElementUI搭建无限级联层级表格组件

前言

今天，回老家了。第一件事就是回家把大屏安排上，写作的感觉太爽了，终于可以专心地写文章了。我们今天要做的项目是怎么样搭建一个无限级联层级表格组件，好了，多了不多说，赶快行动起来吧！
项目一览

到底是啥样子来？我们来看下。

正如你所看到的那样，这个组件涉及添加、删除、编辑功能，并且可以无限级嵌套。那么怎样实现的？我们来看下。
源码

直接给出源码，就是这么直接。

<template>

    <div class="container">

        <el-button

            type="primary"

            size="small"

            @click="handleCreate"

            icon="el-icon-circle-plus-outline"

            style="margin: 10px 0"

            >添加</el-button

        >

        <el-table

            :data="tableData"

            style="width: 100%; margin-bottom: 20px"

            border

            row-key="value"

            stripe

            size="medium"

            :tree-props="{ children: 'children' }"

        >

            <el-table-column prop="label" label="标签名称"> </el-table-column>

            <el-table-column prop="location" label="层级"> </el-table-column>

            <el-table-column label="操作" :align="alignDir" width="180">

                <template slot-scope="scope">

                    <el-button

                        type="text"

                        size="small"

                        @click="handleUpdate(scope.row)"

                        >编辑</el-button

                    >

                    <el-button

                        type="text"

                        size="small"

                        @click="deleteClick(scope.row)"

                        >删除</el-button

                    >

                </template>

            </el-table-column>

        </el-table>

        <el-dialog

            :title="textMap[dialogStatus]"

            :visible.sync="dialogFormVisible"

            width="30%"

        >

            <el-form

                ref="dataForm"

                :rules="rules"

                :model="temp"

                label-position="left"

                label-width="120px"

                style="margin-left: 50px"

            >

                <el-form-item

                    label="层级："

                    prop="location"

                    v-if="dialogStatus !== 'update'"

                >

                    <el-select

                        v-model="temp.location"

                        placeholder="请选择层级"

                        @change="locationChange"

                        size="small"

                    >

                        <el-option

                            v-for="item in locationData"

                            :key="item.id"

                            :label="item.name"

                            :value="item.id"

                        />

                    </el-select>

                </el-form-item>

                <el-form-item

                    v-if="sonStatus && dialogStatus !== 'update'"

                    label="子位置："

                    prop="children"

                >

                    <el-cascader

                        size="small"

                        :key="isResouceShow"

                        v-model="temp.children"

                        placeholder="请选择子位置"

                        :label="'label'"

                        :value="'value'"

                        :options="tableData"

                        :props="{ checkStrictly: true }"

                        clearable

                        @change="getCasVal"

                    ></el-cascader>

                </el-form-item>

                <el-form-item label="标签名称：" prop="label">

                    <el-input

                        v-model="temp.label"

                        size="small"

                        autocomplete="off"

                        placeholder="请输入标签名称"

                    ></el-input>

                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">

                <el-button @click="dialogFormVisible = false" size="small">

                    取消

                </el-button>

                <el-button

                    type="primary"

                    size="small"

                    @click="

                        dialogStatus === 'create' ? createData() : updateData()

                    "

                >

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118721359

巴特西

Vue.js与ElementUI搭建无限级联层级表格组件

最新文章

热门文章