我用Vue.js与ElementUI搭建了一个无限级联层级表格组件

 前言

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

项目一览

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

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

源码

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

 
 
 
 

  
  
  
  

  
  
  
  
            
  
  
  
  
        
  
  
  
  
        
  
  
  
  
            :title="textMap[dialogStatus]"
  
  
  
  
            :visible.sync="dialogFormVisible"
  
  
  
  
            width="30%"
  
  
  
  
        >
  
  
  
  
            
  
  
  
  
                ref="dataForm"
  
  
  
  
                :rules="rules"
  
  
  
  
                :model="temp"
  
  
  
  
                label-position="left"
  
  
  
  
                label-width="120px"
  
  
  
  
                style="margin-left: 50px"
  
  
  
  
            >
  
  
  
  
                
  
  
  
  
                    label="层级："
  
  
  
  
                    prop="location"
  
  
  
  
                    v-if="dialogStatus !== 'update'"
  
  
  
  
                >
  
  
  
  
                    
  
  
  
  
                        v-model="temp.location"
  
  
  
  
                        placeholder="请选择层级"
  
  
  
  
                        @change="locationChange"
  
  
  
  
                        size="small"
  
  
  
  
                    >
  
  
  
  
                        
  
  
  
  
                            v-for="item in locationData"
  
  
  
  
                            :key="item.id"
  
  
  
  
                            :label="item.name"
  
  
  
  
                            :value="item.id"
  
  
  
  
                        />
  
  
  
  
                    
  
  
  
  
                
  
  
  
  
                
  
  
  
  
                    v-if="sonStatus && dialogStatus !== 'update'"
  
  
  
  
                    label="子位置："
  
  
  
  
                    prop="children"
  
  
  
  
                >
  
  
  
  
                    
  
  
  
  
                        size="small"
  
  
  
  
                        :key="isResouceShow"
  
  
  
  
                        v-model="temp.children"
  
  
  
  
                        placeholder="请选择子位置"
  
  
  
  
                        :label="'label'"
  
  
  
  
                        :value="'value'"
  
  
  
  
                        :options="tableData"
  
  
  
  
                        :props="{ checkStrictly: true }"
  
  
  
  
                        clearable
  
  
  
  
                        @change="getCasVal"
  
  
  
  
                    >
  
  
  
  
                
  
  
  
  
                
  
  
  
  
                    
  
  
  
  
                        v-model="temp.label"
  
  
  
  
                        size="small"
  
  
  
  
                        autocomplete="off"
  
  
  
  
                        placeholder="请输入标签名称"
  
  
  
  
                    >
  
  
  
  
                
  
  
  
  
            
  
  
  
  
            
  
  
  
  
                
  
  
  
  
                    取消
  
  
  
  
                
  
  
  
  
                
  
  
  
  
                    type="primary"
  
  
  
  
                    size="small"
  
  
  
  
                    @click="
  
  
  
  
                        dialogStatus === 'create' ? createData() : updateData()
  
  
  
  
                    "
  
  
  
  
                >
  
  
  
  
                    确认