element给表格新加、删除数据记录

左边有一棵树tree，右边一个Table表格,点左边的数节点，将树节点的信息给表格添加一条新记录，布局如下

html代码如下

<style scoped>
	.edit-dialog{
		display: flex;
	}
	.edit-left{
		width:380px;
	}
	.edit-right{
		flex:1;
	}
	.dialog-footer{
		margin-top:15px;
		text-align: center;
	}
	.custom-tree-node {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    font-size: 14px;
	    padding-right: 8px;
	  }
</style>
<template>
  <el-dialog
    title="修改"
    :close-on-click-modal="false"
    :visible.sync="visible" width="70%">
    <div class="edit-dialog">
    	<div class="edit-left">
    		<!--<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
    		<div class="tree-content">
				<div class="tree-title">选择机构</div>
					<el-tree
						:data="menuList"
						:props="menuListTreeProps"
						node-key="deptId"
						ref="menuListTree"
						:highlight-current="true"  
						:default-expand-all="false"
						@node-click="handleNodeClick"
						class="treeMenu">
						<span class="custom-tree-node" slot-scope="{ node, data }">
					        <span>{{ node.label }}</span>
					        <span>
					          <el-button
					            type="text"
					            size="mini"
					            @click="() => append(data)">
					                          添加
					          </el-button>
					        </span>
					      </span>
					</el-tree>
				</div>
    	</div>
    	<div class="edit-right">
    		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" >
		       <el-table
			      :data="tableData"
			      style="width: 100%">
			      <el-table-column
			        prop="deptCode"
			        label="机构编码"
			       >
			      </el-table-column>
			      <el-table-column
			        prop="deptName"
			        label="机构名称"
			        >
			      </el-table-column>
			      <el-table-column
			        prop="udSort"
			        label="排序"
			        >
			        <template slot-scope="scope">
			        	<el-input type="number" v-model="scope.row.udSort" placeholder="请输入序号"></el-input>
			        </template>
			      </el-table-column>
			      <el-table-column
			        prop="address" label="操作">
			        <template slot-scope="scope">
				        <el-button 
				        	@click.native.prevent="deleteRow(scope.$index, tableData)"
				        	type="text" 
				        	size="small">移除</el-button>
				      </template>
			      </el-table-column>
			    </el-table>
		     
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="visible = false">取消</el-button>
		      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
		    </div>
    	</div>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    data () {      
      return {
      	account:"",//
      	tableData: [],//机构列表
      	menuList: [],
				menuListTreeProps: {
					label: 'deptName',
					children: 'children'
				},
      	
        visible: false,
        roleList: [],
        dataForm: {
          orderNum: '',
          id: 0,
          account: '',
          password: '',
					username:'',
					namePinyin:'',
					job:'',
          email: '',
          mobile: '',
          tel: ''
        }     
      }
    },
    
    methods: {
    	//获取左侧部门数据
		getTreeData() {
			this.$http({
				url: this.$http.adornUrl('/sys/sysdept/selectAllOrg'),
				method: 'get',
				params: this.$http.adornParams()
			}).then(({data}) => {
				if(data.data.length > 0){
					this.menuList = treeDataTranslate2(data.data, 'id','deptCode')
				}else{
					this.$message.error(data.msg)
				}
			}).then(() => {
					this.$nextTick(() => {        	
						this.$refs.menuListTree.setCheckedKeys([])
					})
			})
		},
     
      init (id,account) {
      	this.getTreeData()
      	this.account=account
        this.dataForm.id = id || 0       
				this.visible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
				})      
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl(`/sys/appUser/appuser/${account}`),
						method: 'get',
						params: this.$http.adornParams()
					}).then(({data}) => {
						if (data && data.code === 0) {
							this.tableData=data.data
							console.log(this.tableData)
						}
					})
				}
      },
      handleNodeClick(data) {},
			
      // 表单提交
      dataFormSubmit () {
      	var deptCodes = []
      	for(var i=0;i<this.tableData.length;i++){
      		var obj={}
      		obj.udDeptCode = this.tableData[i].deptCode
      		obj.udSort = this.tableData[i].udSort
      		deptCodes.push(obj)
      	}
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sys/appUser/updateUserToDept`),
              method: 'post',
              data: this.$http.adornData({
                'account': this.account,
                'deptCodes': deptCodes
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                    this.getDataList()
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
	  deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      
      append(data) {
        console.log(data);
        var isAdd=1;//追加数据前，把状态存好
        for(var i=0; i < this.tableData.length;i++){
       		if(this.tableData[i].deptCode == data.deptCode){//注意，不要把追加数据写在循环里，出现死循环没法往下执行
       			isAdd=0;
       			break
       		}
        }
        if(isAdd == 1){
   			var obj={}
	        obj.deptCode = data.deptCode
	        obj.deptName = data.deptName
	        obj.udSort = 1
	        this.tableData.push(obj)//树里边有很多的其他数据，所以用个obj把我们要的数据先存起来
   		 }else{
   			this.$message.error('您选择的机构已存在，不能添加！')
   		 } 
      },

      
    }
  }
</script>