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