vue 树形表格数据的增删修改存储，不涉及接口请求

 UI代码

<div class="m-page">
		<div style="text-align: left">
			<el-button type="primary" @click="addNode">添加同级</el-button>
			<el-button type="primary" @click="addChild">添加子级</el-button>
		</div>
		<el-table
			:data="dataList"
			style="width: 100%"
			ref="treeTable"
			row-key="id"
			@row-click="rowClick"
			border
			highlight-current-row
			default-expand-all
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column prop="name" label="部门名称" width="180"></el-table-column>
			<el-table-column prop="leader" label="负责人" width="180"></el-table-column>
			<el-table-column prop="memo" label="备注"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="modify(scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="deleteData(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 新增修改部门 -->
		<el-dialog :title="title" :visible.sync="dialogVisible" width="800px">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="部门名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="leader">
					<el-input v-model="ruleForm.leader"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="memo">
					<el-input v-model="ruleForm.memo"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirm('ruleForm')">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>

逻辑代码

data() {
		return {
			dataList: [
				{
					id: 1,
					name: '部门1',
					leader: '张三',
					memo: '',
					children: [
						{
							id: 11,
							name: 'ss',
							leader: '王小虎',
							memo: '上海市普陀区金沙江路 1519 弄',
						},
						{
							id: 12,
							name: 'ss',
							leader: '王小虎',
							memo: '上海市普陀区金沙江路 1519 弄',
						},
					],
				},
			],
			dialogVisible: false,
			title: '添加同级',
			ruleForm: {
				name: '',
				leader: '',
				memo: '',
			},
			rules: {
				name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
			},
			rowData: null,
			id: '',
			rowNum:0,
			isDeleted:false
		};
	},
	computed: {
		...mapState(['rowDatas']),
	},
	watch: {
		dialogVisible() {
			const { name, leader, memo } = this.rowDatas;
			this.ruleForm = {
				name,
				leader,
				memo,
			};
		},
		dataList(val){
			sessionStorage.setItem('listData', JSON.stringify(val));
		}
	},
	created() {
		if (sessionStorage.getItem('listData')) {
			this.dataList = JSON.parse(sessionStorage.getItem('listData'));
		}
	},
	methods: {
		...mapMutations(['setData']),
		//增加同级
		addNode() {
			if (this.id) {
				this.setData({});
				this.dialogVisible = true;
				this.title = '添加同级';
			} else {
				this.$message.warning('请选择一行数据');
			}
		},
		//增加子级
		addChild() {
			if (this.id) {
				this.setData({});
				this.dialogVisible = true;
				this.title = '添加子级';
			} else {
				this.$message.warning('请选择一行数据');
			}
		},
		//修改
		modify(row) {
			this.dialogVisible = true;
			this.title = '添加数据';
			this.setData(row);
		},
		//删除
		deletes( index,table) {
			for (let i = 0; i < table.length; i++) {
				if(this.rowNum===index){
					table.splice(i,1)
					this.isDeleted=true
				}
				if(!this.isDeleted){
					let childTable=table[i]
					this.rowNum++
					if(childTable.children&&childTable.children.length){
						this.deletes(index,childTable.children)
					}
				}		
			}
			
		},
		deleteData(index) {
			this.$confirm('确认删除该行吗?', '提示', {
				type: 'warning',
			}).then(() => {
				this.isDeleted=false
				this.rowNum=0
				this.deletes(index,this.dataList);
				this.$message.success('删除成功')
			}).catch(err=>{
				console.log(err)
			});
		},
		rowClick(row) {
			this.id = row.id;
			this.rowData = row;
		},
		addChildData(row) {
			if (row.children && row.children.length) {
				const id = row.id + String(row.children.length + 1);
				row.children.push({ id, ...this.ruleForm });
			} else {
				this.$set(row, 'children', []);
				row.children.push({ id: +(row.id + '1'), ...this.ruleForm });
			}
		},
		addSameLevelData(arr) {
			for (let i = 0; i < arr.length; i++) {
				const item = arr[i];
				if (item.id === this.rowData.id) {
					arr.push({ id: +new Date(), ...this.ruleForm });
				} else {
					if (item.children && item.children.length) {
						this.addSameLevelData(item.children);
					}
				}
			}
		},
		confirm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.title === '添加同级') {
						this.addSameLevelData(this.dataList);
						this.$message.success('添加成功')
					} else if (this.title === '添加子级') {
						this.addChildData(this.rowData);
						this.$message.success('添加成功')
					} else {
						const { leader, name, memo } = this.ruleForm;
						this.rowData.leader = leader;
						this.rowData.name = name;
						this.rowData.memo = memo;
						this.$message.success('修改成功')
					}
					this.dialogVisible = false;
				} else {
					return false;
				}
			});
		},
	},

store部分

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    rowDatas:{}
  },
  mutations: {
    setData(state,payload){
      state.rowDatas=payload
    }
  },
  actions: {
  },
  modules: {
  }
})