1、select下拉 + 树状图
1、单选
<template>
<el-form>
<el-form-item label="上级组织：" label-width="100px" prop="parent_id">
<el-select
ref="treeSelect"
v-model="form.parent_id"
placeholder="请选择上级组织"
clearable
@clear="handleClear"
>
<el-option :value="treeValue" :label="treeLabel">
<el-tree
ref="selectTree"
node-key="id"
:data="treeData"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
:highlight-current="true"
:default-expand-all="true"
@node-click="handleNode"
></el-tree>
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
// data() 定义的数据
data() {
return {
form: {},
formRules: {
parent_id: [
{
required: true,
message: "请输入组织架构的名称",
trigger: "change",
},
],
},
// 组织下拉
treeData: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
name: "二级 1-1",
children: [
{
id: 9,
name: "三级 1-1-1",
},
{
id: 10,
name: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
name: "一级 2",
children: [
{
id: 5,
name: "二级 2-1",
},
{
id: 6,
name: "二级 2-2",
},
],
},
{
id: 3,
name: "一级 3",
children: [
{
id: 7,
name: "二级 3-1",
},
{
id: 8,
name: "二级 3-2",
},
],
},
],
// 组织树默认
defaultProps: {
value: "id",
label: "name",
children: "children",
},
// 默认展开
defaultExpandedKeys: [],
// options value值
treeValue: "",
// options label值
treeLabel: "",
};
},
methods: {
// js
// 切换选项
handleNode(data, node) {
this.treeValue = data.id;
this.form.parent_id = data.id;
this.treeLabel = data.name;
this.$refs.treeSelect.blur();
this.defaultExpandedKeys = [];
},
// 树清空
handleClear() {
this.treeLabel = "";
this.clearSelected();
},
/* 清空选中样式 */
clearSelected() {
let allNode = document.querySelectorAll("#tree-option .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
},
},
};
</script>
<style scoped>
/* 下拉高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li ::deep .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree ::deep .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree ::deep .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
</style>
2、多选
3、项目实际开发--单选
<el-form-item
label="上级组织："
label-width="100px"
prop="parent_id"
>
<el-select
ref="treeSelect"
v-model="form.parent_id"
placeholder="请选择上级组织"
clearable
@clear="handleClear"
>
<el-option :value="treeValue" :label="treeLabel">
<el-tree
ref="selectTree"
node-key="id"
:data="treeData"
:props="defaultProps"
:default-expanded-keys="defaultExpandedKeys"
:expand-on-click-node="false"
:highlight-current="true"
:default-expand-all="true"
@node-click="handleNode"
></el-tree>
</el-option>
</el-select>
</el-form-item>
/* 下拉高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
// data() 定义的数据
data() {
return {
form: {},
formRules: {
parent_id: [
{
required: true,
message: '请输入组织架构的名称',
trigger: 'change'
},
]
},
// 组织下拉
treeData: [],
// 组织树默认
defaultProps: {
value: 'id',
label: 'name',
children: 'children',
},
// 默认展开
defaultExpandedKeys: [],
// options value值
treeValue: '',
// options label值
treeLabel: '',
}
},
created() {
// 初始化字段parent_id，为了校验
this.$set(this.form, 'parent_id', '')
},
// 初始化数据,不需要默认，可以略过
// 编辑请求form数据
initForm() {
if (this.itemId) {
this.$http.post(this.$ApiUrl + "Organization/GetOrganizationDetailById", {
organization_id: this.itemId,
}).then(res => {
if (res && res.code === 0) {
let data = res.data;
if (data) {
this.form = data;
this.tableData = data.users;
this.treeValue = data.parent_id
if (this.treeValue) {
this.treeLabel = this.$refs.selectTree.getNode(this.treeValue).data.name // 初始化显示
this.$refs.selectTree.setCurrentKey(this.treeValue) // 设置默认选中
}
}
}
})
}
},
// js
// 切换选项
handleNode(data, node) {
this.treeValue = data.id
this.form.parent_id = data.id
this.treeLabel = data.name
this.$refs.treeSelect.blur()
this.defaultExpandedKeys = []
},
// 树清空
handleClear() {
this.treeLabel = ''
this.clearSelected()
},
/* 清空选中样式 */
clearSelected() {
let allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current'))
},
