<template>
<div class="page">
<div class="page-box">
<h3 style="margin-top: 0">类目 / 榜单管理</h3>
<el-input placeholder="请输入关键字" v-model="keyWord" style="margin-bottom: 20px">
<el-button slot="append" @click="treeFind" icon="el-icon-search"></el-button>
</el-input>
<el-table
fit
border
:data="tableData"
row-key="id"
ref="multipleTable"
resizable
style="marign-bottom: 20px"
default-expand-all
:tree-props="{
children: 'children',
hasChildren: 'hasChildren',
}"
v-loading="loading"
>
<el-table-column width="300" label="类目">
<template slot-scope="scope">
<span v-if="scope.row.id > 0"> {{ scope.row.name }}</span>
<el-input
v-else
ref="input"
@blur="inputBlur(scope.row)"
@change="inputChange(scope.row)"
v-model="scope.row.name"
size="mini"
></el-input>
</template>
</el-table-column>
<el-table-column align="center" label="Best Sellers">
<template slot-scope="scope">
<upload-btn-list
btnType="success"
:btnDisabled="scope.row.id > 0 ? false : true"
></upload-btn-list>
</template>
</el-table-column>
<el-table-column align="center" label="New Releaser">
<template slot-scope="scope">
<upload-btn-list :btnDisabled="scope.row.id > 0 ? false : true"></upload-btn-list>
</template>
</el-table-column>
<el-table-column align="center" label="Movers & Shakers">
<template slot-scope="scope">
<upload-btn-list :btnDisabled="scope.row.id > 0 ? false : true"></upload-btn-list>
</template>
</el-table-column>
<el-table-column align="center" label="Most Wished For">
<template slot-scope="scope">
<upload-btn-list :btnDisabled="scope.row.id > 0 ? false : true"></upload-btn-list>
</template>
</el-table-column>
<el-table-column align="center" label="Gift Ideas">
<template slot-scope="scope">
<upload-btn-list :btnDisabled="scope.row.id > 0 ? false : true"></upload-btn-list>
</template>
</el-table-column>
<el-table-column width="300" align="center" label="操作">
<template slot-scope="scope">
<div>
<el-button
:disabled="scope.row.id > 0 ? false : true"
size="small"
type="info"
@click="append(scope.row)"
>新增子级</el-button
>
<el-button
:disabled="scope.row.id > 0 ? false : true"
size="small"
type="warning"
@click="update(scope.row)"
>编辑</el-button
>
<el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<dialog-edit-add
:Visible="dialogVisible"
:data="dialogData"
@close="dialogClose"
@save="dialogSave"
></dialog-edit-add>
</div>
</template>
<script>
import dialogEditAdd from '@/components/dialog/data/dialogEditAdd.vue';
import UploadBtnList from '@/components/common/upload-btn-list.vue';
export default {
components: { dialogEditAdd, UploadBtnList },
data() {
return {
rowId: 0,
loading: false,
dialogVisible: false,
dialogData: {},
keyWord: '',
tableData: [],
tableDataSource: [
{
id: 1,
name: 'Any Department',
parentId: 0,
children: [
{
id: 2,
name: 'Amazon Devices & Accessories',
parentId: 1,
children: [],
},
],
},
],
};
},
created() {
this.tableData = this.tableDataSource;
},
methods: {
del(data) {
this.$confirm(`此操作将永久删除类目${data.name}, 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.removeChild(this.tableData, data.id);
const a = this.$message({
type: 'success',
message: '删除成功!',
});
})
.catch(() => {});
},
open(data, value) {
if (value == 0) {
this.dialogData = {
id: 0,
name: '',
parentId: data.id,
children: [],
};
} else if (value == 1) {
this.dialogData = data;
}
this.dialogVisible = true;
},
append(data) {
const newChild = {
id: 0,
name: '',
parentId: data.id,
children: [],
};
data.children.push(newChild);
this.$nextTick(() => {
this.$refs.input.focus();
});
},
update(data) {
this.rowId = data.id;
data.id = 0;
this.$nextTick(() => {
this.$refs.input.focus();
});
},
inputBlur(data) {
this.inputChange(data);
},
inputChange(data) {
if (data.name == '') {
this.$message.error('类目名不能为空');
return false;
}
this.loading = true;
if (this.rowId == 0) {
//新增
data.id = 10;
} else {
//修改
data.id = this.rowId;
}
setTimeout(() => {
this.rowId = 0;
this.loading = false;
}, 1000);
},
treeFind() {
let result = this.findChild(this.tableDataSource, (node) =>
node.name.toLowerCase().includes(this.keyWord.toLowerCase())
);
if (!result) {
this.tableData = [];
} else {
this.tableData = [];
this.tableData.push(result);
}
},
dialogClose() {
this.dialogVisible = false;
},
dialogSave(data) {
if (data.id == 0) {
this.insertChild(this.tableData, data.parentId, data);
} else {
this.updateChild(this.tableData, data.id, data);
}
this.dialogVisible = false;
},
findChild(tree, func) {
for (const data of tree) {
if (func(data)) return data;
if (data.children) {
const res = this.findChild(data.children, func);
if (res) return res;
}
}
return null;
},
removeChild(list, id) {
const parent = list;
const index = parent.findIndex((child) => child.id == id);
if (index !== -1) {
parent.splice(index, 1);
return list;
}
list = list.filter((item) => {
let flag = item.id != id;
if (flag) {
if (item.children.length > 0) {
item.children = this.removeChild(item.children, id);
}
return true;
} else return flag;
});
return list;
},
insertChild(list, id, newChild) {
list.forEach((item) => {
let flag = item.id == id;
if (flag) {
item.children.push(newChild);
} else {
if (item.children.length > 0) {
item.children = this.insertChild(item.children, id, newChild);
}
}
});
return list;
},
updateChild(list, id, newChild) {
list.forEach((item, index) => {
let flag = item.id == id;
if (flag) {
alert(1);
this.$set(list, index, newChild);
} else {
if (item.children.length > 0) {
item.children = this.updateChild(item.children, id, newChild);
}
}
});
return list;
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-input-group {
width: 300px;
}
::v-deep tr td:first-child .cell {
display: flex !important;
flex-wrap: nowrap !important;
}
</style>标签：el,false,list,id,item,树形,table,data,children From： https://www.cnblogs.com/Aatao/p/17305200.html