日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 前言

今天，回老家了。第一件事就是回家把大屏安排上，寫作的感覺太爽了，終于可以專心地寫文章了。我們今天要做的項(xiàng)目是怎么樣搭建一個(gè)無(wú)限級(jí)聯(lián)層級(jí)表格組件，好了，多了不多說(shuō)，趕快行動(dòng)起來(lái)吧!

項(xiàng)目一覽

到底是啥樣子來(lái)?我們來(lái)看下。

正如你所看到的那樣，這個(gè)組件涉及添加、刪除、編輯功能，并且可以無(wú)限級(jí)嵌套。那么怎樣實(shí)現(xiàn)的?我們來(lái)看下。

源碼

直接給出源碼，就是這么直接。

 
 
 
 

  
  
  
  

  
  
  
  
            
  
  
  
  
        
  
  
  
  
        
  
  
  
  
            :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="層級(jí)："
  
  
  
  
                    prop="location"
  
  
  
  
                    v-if="dialogStatus !== 'update'"
  
  
  
  
                >
  
  
  
  
                    
  
  
  
  
                        v-model="temp.location"
  
  
  
  
                        placeholder="請(qǐng)選擇層級(jí)"
  
  
  
  
                        @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="請(qǐng)選擇子位置"
  
  
  
  
                        :label="'label'"
  
  
  
  
                        :value="'value'"
  
  
  
  
                        :options="tableData"
  
  
  
  
                        :props="{ checkStrictly: true }"
  
  
  
  
                        clearable
  
  
  
  
                        @change="getCasVal"
  
  
  
  
                    >
  
  
  
  
                
  
  
  
  
                
  
  
  
  
                    
  
  
  
  
                        v-model="temp.label"
  
  
  
  
                        size="small"
  
  
  
  
                        autocomplete="off"
  
  
  
  
                        placeholder="請(qǐng)輸入標(biāo)簽名稱"
  
  
  
  
                    >
  
  
  
  
                
  
  
  
  
            
  
  
  
  
            
  
  
  
  
                
  
  
  
  
                    取消
  
  
  
  
                
  
  
  
  
                
  
  
  
  
                    type="primary"
  
  
  
  
                    size="small"
  
  
  
  
                    @click="
  
  
  
  
                        dialogStatus === 'create' ? createData() : updateData()
  
  
  
  
                    "
  
  
  
  
                >
  
  
  
  
                    確認(rèn)