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: {
}
})