vue手写三级分类带样式,可折叠和展开全部
vue带样式的三级分类(可以折叠和展开所有,添加子类,编辑分类,删除分类)项目引用的element ui样式,不需要可以改掉标签删除,添加,编辑都是用的字体图标<!-- 分类列表 --><template><div class=&qu
·
vue带样式的三级分类
(可以折叠和展开所有,添加子类,编辑分类,删除分类)
项目引用的element ui样式,不需要可以改掉标签
删除,添加,编辑可以自己替换成字体图标
<!-- 分类列表 -->
<template>
<div class="ccia">
<div class="ccia_top">
<el-row>
<el-col :span="12">
<div>
<!-- <el-button class="bgFFC" >设置分类层级</el-button> -->
<el-button class="closeAll" @click="closeall"><i :class="allexpanded==false?'el-icon-arrow-down':'el-icon-arrow-up'"></i>{{allexpanded==false?'折叠所有':'展开所有'}}</el-button>
<span>
<el-button> <i class="el-icon-plus"></i> 添加新分类</el-button>
</span>
</div>
</el-col>
</el-row>
</div>
<div class="contents">
<div class="tree">
<ul v-for='item in menulist' :key="item.id">
<!-- 没有子集 -->
<li v-if='!item.children'>
<div class="treeItem">
<div class="lileft marginL10"> [ ID: {{item.id}}] {{item.catename}}</div>
<div class="liright" v-if="usertype==1">
<span :class="item.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(item)">{{item.enabled==1?'启用':'禁用'}}</span>
<span @click.stop="addnew(item)" class="itemClass">添加</span>
<span class="itemClass" @click.stop="showEDdi(item)">编辑</span>
<span @click.stop="delself(item)" class="itemClass">删除</span>
</div>
</div>
</li>
<!-- 有子集 -->
<li v-if='item.children'>
<div class="onechild treeItem">
<div class="lileft"><span @click.stop='toggleChildren(item)'>{{item.expanded?'- ':'+ '}} </span>[ ID: {{item.id}}] {{item.catename}}</div>
<div class="liright" v-if="usertype==1">
<span :class="item.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(item)">{{item.enabled==1?'启用':'禁用'}}</span>
<span @click.stop="addnew(item)" class="itemClass">添加</span>
<span class="itemClass" @click.stop="showEDdi(item)">编辑</span>
<span @click.stop="delself(item)" class="itemClass">删除</span>
</div>
</div>
<ul v-show='item.expanded' class="childs">
<li v-for='child in item.children' :key="child.id">
<!-- 没有子集 -->
<div class="twochild treeItem marginL60" v-if="!child.children">
<div class="lileft marginL10">[ ID: {{child.id}}] {{child.catename}}</div>
<div class="liright" v-if="usertype==1">
<span :class="child.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child)">{{child.enabled==1?'启用':'禁用'}}</span>
<span @click.stop="addnew(child)" class="itemClass">新增</span>
<span class="itemClass" @click.stop="showEDdi(child)">编辑</span>
<span @click.stop="delself(child)" class="itemClass">删除</span>
</div>
</div>
<!-- 有子集 -->
<div class="twochild marginL60" v-if="child.children">
<div class="treeItem">
<div class="lileft"><span @click='toggleChildren(child)'>{{child.expanded?'- ':'+ '}}</span> [ ID: {{child.id}}] {{child.catename}}</div>
<div class="liright" v-if="usertype==1">
<span :class="child.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child)">{{child.enabled==1?'启用':'禁用'}}</span>
<span @click.stop="addnew(child)" class="itemClass">新增</span>
<span class="itemClass" @click.stop="showEDdi(child)">编辑</span>
<span @click.stop="delself(child)" class="itemClass">删除</span>
</div>
</div>
<ul v-show='child.expanded'>
<!-- 遍历第三层 -->
<li class="threechild " v-for="child1 in child.children" :key="child1.id">
<div class="treeItem marginL60">
<div class="lileft marginL10"> [ ID: {{child1.id}}] {{child1.catename}}</div>
<div class="liright" v-if="usertype==1">
<span :class="child1.enabled == '1'?'bgYes':'bgNo'" @click.stop="toggleenabled(child1)">{{child1.enabled==1?'启用':'禁用'}}</span>
<span class="itemClass" @click.stop="showEDdi(child)">编辑</span>
<span class="itemClass" @click.stop="delself(child1)">删除</span>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
allexpanded: true, //展开、折叠所有
menulist:[{
catename:'水果',
expanded:false,
enabled:true,
children:[{
catename:'苹果',
enabled:true,
},{
catename:'荔枝',
enabled:true,
},{
catename:'葡萄',
enabled:true,
},{
catename:'火龙果',
expanded:false,
enabled:true,
children:[
{
catename:'白心',
enabled:true,
},{
catename:'红心',
enabled:true,
},
]
}]
}],
bmplist: [],
usertype: 1,
};
},
methods: {
getlist() {
let that = this;
for (let i = 0; i < that.menulist.length; i++) {
// console.log(that.menulist[i])
that.$set(that.menulist[i], "expanded", false);
if (that.menulist[i].children) {
// console.log('有子集')
// console.log(that.menulist[i]._child.length)
for (
let j = 0;
j < that.menulist[i].children.length;
j++
) {
// console.log(that.menulist[i]._child[j])
that.$set(
that.menulist[i].children[j],
"expanded",
false
);
if (that.menulist[i].children[j].children) {
// console.log('还有子集')
for (
let z = 0;
z <
that.menulist[i].children[j].children
.length;
z++
) {
that.$set(
that.menulist[i].children[j]
.children[z],
"expanded",
false
);
}
}
}
}
}
// 还原上一次展开的情况
if (this.bmplist.length !== 0) {
// console.log('展开过')
for (let i = 0; i < this.menulist.length; i++) {
this.menulist[i].expanded = this.bmplist[
i
].expanded;
if (this.menulist[i].children) {
for (
let j = 0;
j < this.menulist[i].children.length;
j++
) {
this.menulist[i].children[
j
].expanded = this.bmplist[i].children[
j
].expanded;
}
}
}
}
},
// 折叠所有
closeall() {
this.allexpanded = !this.allexpanded;
let that = this;
if (this.allexpanded) {
for (let i = 0; i < that.menulist.length; i++) {
that.$set(that.menulist[i], "expanded", false);
if (that.menulist[i].children) {
// console.log('有子集')
// console.log(that.menulist[i]._child.length)
for (
let j = 0;
j < that.menulist[i].children.length;
j++
) {
// console.log(that.menulist[i]._child[j])
that.$set(
that.menulist[i].children[j],
"expanded",
false
);
if (that.menulist[i].children[j].children) {
// console.log('还有子集')
for (
let z = 0;
z <
that.menulist[i].children[j].children
.length;
z++
) {
that.$set(
that.menulist[i].children[j].children[
z
],
"expanded",
false
);
}
}
}
}
}
} else {
for (let i = 0; i < that.menulist.length; i++) {
that.$set(that.menulist[i], "expanded", true);
if (that.menulist[i].children) {
// console.log('有子集')
// console.log(that.menulist[i]._child.length)
for (
let j = 0;
j < that.menulist[i].children.length;
j++
) {
// console.log(that.menulist[i]._child[j])
that.$set(
that.menulist[i].children[j],
"expanded",
true
);
if (that.menulist[i].children[j].children) {
// console.log('还有子集')
for (
let z = 0;
z <
that.menulist[i].children[j].children
.length;
z++
) {
that.$set(
that.menulist[i].children[j].children[
z
],
"expanded",
true
);
}
}
}
}
}
}
},
// 点击删除
delself(item) {
// console.log('del',item)
// this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// })
// .then(() => {
// this.$http
// .post(this.api + "/admin/goodscate/delgoodscate", {
// id: item.id
// })
// .then(res => {
// // console.log(res);
// if (res.data.status == 1) {
// this.$message.success(res.data.message);
// this.getlist();
// } else {
// this.$message.error(res.data.message);
// }
// });
// })
// .catch(() => {
// this.$message({
// type: "info",
// message: "已取消删除"
// });
// });
},
// 点击添加
addnew(clickitem) {
// console.log(clickitem, "点击项");
// this.$router.push('/addNewClass')
this.$router.push({
name: "addNewClass",
query: { pid: clickitem.id }
});
},
// 编辑分类
showEDdi(clickitem) {
// console.log(clickitem);
// this.edidialog = !this.edidialog
// this.ediForm = clickitem
// console.log(this.ediForm)
this.$router.push("/ediNewClass/" + clickitem.id);
},
toggleChildren: function(item) {
// console.log(item,'点击项')
item.expanded = !item.expanded;
this.bmplist = this.menulist;
// console.log("bmplist", this.bmplist);
},
// 切换启用状态
toggleenabled(row) {
// console.log(row);
// row.enabled==0?1:0
let enabled;
if (row.enabled == 1) {
enabled = 0;
} else if (row.enabled == 0) {
enabled = 1;
}
// this.$http
// .post(this.api + "/admin/goodscate/change_enabled", {
// id: row.id,
// enabled: enabled
// })
// .then(res => {
// if (res.data.status == 1) {
// this.$message.success(res.data.message);
// this.getlist();
// } else {
// this.$message.error(res.data.message);
// }
// });
}
},
created() {
this.getlist();
}
};
</script>
<style lang="less" scoped>
// @import "../../../common/less/app";
.marginL60 {
margin-left: 60px;
}
.marginL10 {
margin-left: 10px;
}
.ccia {
border-radius: 2px;
// border: 1px solid red;
// padding: 0px 30px;
overflow: hidden;
.ccia_top {
padding-right: 18px;
padding-left: 15px;
// padding: 0 15px;
// height: 69px;
// background-color: pink;
// padding: 9px 18px 11px 15px;
box-sizing: border-box;
/deep/ .el-button {
background-color: #28b7a3;
color: #feffff;
cursor: pointer;
font-size: 12px;
width: 88px;
height: 32px;
padding: 0;
}
.bgFFC {
background-color: #ffc000;
color: #ffffff;
}
.closeAll {
background-color: #f0f0f0;
color: #555555;
border: 1px solid rgba(240, 240, 240, 1);
}
.top_right {
/deep/ .el-input--suffix {
width: 170px;
border-right: 1px solid #edecec;
height: 32px;
}
/deep/ .el-input {
height: 32px;
}
.marginR30 {
margin-right: 30px;
}
}
}
}
.classfoot {
padding-left: 15px;
}
.tree {
width: 860px;
margin-bottom: 16px;
margin-left: 15px;
ul {
list-style: none;
}
li {
margin: 10px 0;
color: #6a6f7d;
.treeItem {
// 第一级
display: flex;
justify-content: space-between;
min-height: 28px;
line-height: 28px;
font-size: 14px;
border: 1px solid #e8e8e8;
cursor: pointer;
height: 40px;
line-height: 40px;
padding-right: 10px;
&:hover {
.lileft {
font-weight: bold;
color: rgba(0, 0, 0, 1);
}
}
}
}
.lileft {
span {
padding-left: 10px;
width: 25px;
display: inline-block;
}
}
.liright {
// 右边显示
float: right;
img {
width: 36px;
height: 36px;
vertical-align: middle;
}
span {
color: #a4a3a3;
font-size: 12px;
padding: 3px 8px;
// padding: 13px;
// margin-right: 10px;
}
.bgYes {
background: #28b7a3;
color: #fff;
cursor: pointer;
}
.bgNo {
background: #b3b3b3;
color: #000;
cursor: pointer;
}
.itemClass {
// display: inline-block;
width: 22px;
height: 22px;
border-radius: 2px;
border: 1px solid #eff0f0;
// border: 1px solid red;
text-align: center;
cursor: pointer;
i {
line-height: 22px;
font-size: 13px;
}
}
.itemClass:hover {
border: 1px solid #28b7a3;
i:hover {
color: #28b7a3;
}
}
}
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)