一、方法
1、指定层级显示复选框并实现单选
需求:必须先选择二级文件夹,然后再点击上传按钮,实现添加子级
数据一二两级是固定的,表示文件夹,第三级是文件
子组件:
//添加show-checkbox、 check-strictly
<el-tree
ref="tree"
:data="Form.files"
default-expand-all
node-key="id"
:props="defaultProps"
show-checkbox
check-strictly
>
</el-tree>
<style lang="scss">
.el-checkbox__input.is-disabled {
display: none;
}
</style>
注意:子组件的写的是tree的处理复选框为单选,使用css隐藏掉disabled的复选框
父组件给接口返回的数据添加disabled,需要显示复选框的层级不需要添加,其余都添加
父组件:
methods:{
// 给附件的数组组件添加禁用
getfiles(data) {
// 一级
data.forEach((i) => {
this.$set(i, "disabled", true);
if (i.children.length > 0) {
// 二级
i.children.forEach((j) => {
if (j.children.length > 0) {
// 三级
j.children.forEach((ele) => {
this.$set(ele, "disabled", true);
});
}
});
}
});
},
// 获取数据
GetFromData(i) {
GetFromData({ dataid: i }).then((res) => {
this.editForm = {};
this.editForm = res.data;
console.log(res, "获取表单数据");
this.getfiles(res.data.files); //附件添加禁用
});
},
}
2、选中相应层级后,再上传文件
图片和接口返回的数据就是和第一个指定层级显示复选框,这里就不贴了,直接写代码
<div>
<el-upload
class="upload-demo"
ref="upload"
action=""
:show-file-list="false"
:limit="1"
:http-request="http"
>
<el-button
slot="trigger"
size="small"
type="primary"
@click="before"
>选取文件</el-button
>
</el-upload>
<el-tree
ref="tree"
:data="Form.files"
default-expand-all
node-key="id"
:props="defaultProps"
show-checkbox
check-strictly
@node-click="nodeClick"
@check-change="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
{ node.label }}</span>
<span v-if="data.path">
<el-button class="el-icon-edit" type="text" size="mini">
</el-button>
</span>
</span>
</el-tree>
</div>
data() {
return {
treeData: {}, //当前树状的数据
defaultProps: { children: "children", label: "lable" },
folderid: 0, //给添加新附件用的
};
},
methods: {
// 附件添加新的
handleNodeClick(data, checked) {
if (checked) {
this.$refs.tree.setCheckedNodes([data]);
this.folderid = data.id;
}
},
before(e) {
if (!this.folderid) {
this.$mess.error("请选择所需上传文件夹");
e.stopPropagation(); // 阻止事件冒泡到父元素
}
},
async http(file) {
var formData = new FormData();
formData.append("files", file.file);
const res = await UploadData(formData);
// console.log(res, "123");
if (res.code === 200) {
this.$mess.success("上传成功"); //这个是封装的,无论调用多少次,都只显示一次
if (res.data.length > 0) {
this.treeData.path = res.data[0].FileUrl;
this.treeData.lable = res.data[0].FileName;
}
const req = await AddBpmFile({
id: "",
dataid: this.Form.dataid,
node_uuid: this.List.node_uuid,
userid: this.userid,
username: this.name,
folderid: this.folderid,
filename: this.treeData.lable,
path: this.treeData.path,
});
if (req.code === 200) {
this.$mess.success("添加附件成功");
this.$emit("GetFromData", this.Form.dataid);
}
}
},
},
<style lang="scss">
.el-checkbox__input.is-disabled {
display: none;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
二、样式
树状自定义图标
//图标取消旋转
.el-tree .el-tree-node__expand-icon.expanded {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
// 一级
.el-tree .el-icon-caret-right:before {
background: url('../../assets/404_images/404.png') no-repeat 0 3px;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
// 二级
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url('../../assets/404_images/404.png') no-repeat 0 3px;
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
// 三级
// .el-tree-node__expand-icon.is-leaf::before {
// display: none;
// }