el-table :tree

<el-button @click="addFirst"></el-button> 
<el-table
   ref="pTable"
   :max-height="tableHeight"
   :data="dataList"
   :expand-row-keys="expandRowKeys"
   :default-expand-all=false
   :header-cell-style="{background:red,color:'#fff'}"
   :tree-props="{children:children}"
>
    <el-table-column lable="机构" prop="partName">
        <template slot-scope="scope">
            <el-input
                v-if="scope.row.edit"
                v-model="scope.row.partName"
             >
            </el-input>
            <span v-else>{{scope.row.partName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button v-if="scope.row.edit" @click="ok(scope.row)">确定</el-button>
                  <el-button v-if="scope.row.edit" @click="cancel(scope.row)">取消</el-button>
                  <el-button @click="upBtn(scope.row)">修改</el-button>
                  <el-button @click="delBtn(scope.row)">删除</el-button>
                  <el-button @click="addNext(scope.row,scope.row.edit)">添加下级</el-button>
              </template>
        <//el-table-column>
<el-table>

export default{
   data(){
       return{
          tableHeight:100,
          canAdd = true,
          dataList:[],
          expandRowKeys:[]
       }
   },
    created(){
        this.$nextTick(()=>{
            this.tableHeight=window.innerHeight - this.$refs.pTable.$el.offsetTop - 100
            window.onresize = () =>{
               this.tableHeight = window.innerHeight - this.$refs.pTable.$el.offsetTop - 100
            }
        })
     }
   
}

js

addFirst(){
  if(this.canAdd){
     let newData ={edit:1,partName:'',children:[],parentId:'',id:10000}
     this.dataList.push(newData)
     this.canAdd = false
  }else{
     this.$message.warning('请先保存之前数据')
   }
},
addNext(row){
   if(this.canAdd){
     let newData = {edit:1,partName:row.partName,children:[],parentId:row.row,id,id:10000}
     row.children.push(newData)
     if(this.expandRowKeys).includes(row.id){
       this.expandRowKeys = this.expandRowKeys.filter(val =>val!==row.id)
     }else{
       this.expandRowKeys.push(row.id)
       this.$nextTick(()=>{

          this.$ref.pTable.toggleRowExpansion(row)

       })
     }
     this.canAdd = false
   }else{
      this.$message.warning('请先保存之前数据')
   }
}，
upBtn(row){
  if(this.canAdd){
    row.edit = 1
    this.canAdd = false
  }else{
    this.$message.warning('请先保存之前数据')
  }
},
ok(row){
  let data = {partName:row.partName,parentId:row.parentId}
  if(!row.partName){this.$message.warning('请完善数据') return}
  if(row.id == 10000){
     data.id = "";
     addApi(data).then((res)=>{if(res.code == 200){row.edit = 0 this.canAdd = false}})
   }else{
      data.id = row.id
      updataApi(data).then((res)=>{row.edit = 0 this.canAdd = true})
   }
}