tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 删除自定义TreeSelect组件，使用element-plus2.1.8新增TreeSelect组件

Browse Source 
Former-commit-id: 8691204802d6240000717fc9effa08adbadcf11c
This commit is contained in:
郝先瑞
2022-04-18 21:07:55 +08:00
parent 09d131f101
commit d828af91b4
4 changed files with 17 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/TreeSelect/index.vue
View File

@@ -1,155 +0,0 @@
<template>
<div class="el-tree-select">
<el-select style="width: 100%" v-model="modelValue" ref="treeSelect" :filterable="true" :clearable="true"
@clear="clearHandle" :filter-method="selectFilterData" :placeholder="placeholder">
<el-option :value="modelValue" :label="valueTitle">
<el-tree id="tree-option" ref="selectTree" :accordion="accordion" :data="options" :props="state.props"
:node-key="state.props.value" :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKey"
:filter-node-method="filterNode" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-select>
</div>
</template>
<script setup lang="ts">
import {
ref,
getCurrentInstance,
nextTick,
onMounted,
computed,
watch
} from "vue";
const { proxy } = getCurrentInstance() as any;
const state = defineProps({
// 配置项
props: {
type: Object,
default: () => {
return {
value: "value", // 值
label: "label", // 名
children: "children", // 子级
};
},
},
// 自动收起
accordion: {
type: Boolean,
default: () => {
return false;
},
},
// v-model 绑定的值
modelValue: {
type: [String, Number],
default: "",
},
// 数据源
options: {
type: Array,
default: () => {
return []
}
},
// 提示文字
placeholder: {
type: String,
default: "",
},
});
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
get: () => {
return state.modelValue;
},
set: (val) => {
emit("update:modelValue", val);
},
});
const valueTitle = ref("");
const defaultExpandedKey = ref([] as any[]);
function handleNodeClick(node: any) {
valueTitle.value = node[state.props.label];
modelValue.value = node[state.props.value];
defaultExpandedKey.value = [];
proxy.$refs.treeSelect.blur();
selectFilterData("");
}
function selectFilterData(val: any) {
proxy.$refs.selectTree.filter(val);
}
function filterNode(value: any, data: any) {
if (!value) return true;
return data[state.props["label"]].indexOf(value) !== -1;
}
function clearHandle() {
valueTitle.value = "";
modelValue.value = "";
defaultExpandedKey.value = [];
clearSelected();
}
function clearSelected() {
const allNode = document.querySelectorAll("#tree-option .el-tree-node");
allNode.forEach((element) => element.classList.remove("is-current"));
}
function initHandle() {
nextTick(() => {
const selectedValue = modelValue.value;
if (selectedValue !== null && typeof selectedValue !== "undefined") {
const node = proxy.$refs.selectTree.getNode(selectedValue);
if (node) {
valueTitle.value = node.data[state.props.label];
proxy.$refs.selectTree.setCurrentKey(selectedValue); // 设置默认选中
defaultExpandedKey.value = [selectedValue]; // 设置默认展开
} else {
clearHandle();
}
}
});
}
onMounted(() => {
initHandle();
});
watch(modelValue, () => {
initHandle();
});
</script>
<style lang='scss' scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
padding: 0;
background-color: #fff;
height: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
box-sizing: border-box;
}
:deep(.el-tree-node__content:hover),
:deep(.el-tree-node__content:active),
:deep(.is-current > div:first-child),
:deep(.el-tree-node__content:focus) {
background-color: mix(#fff, #409eff, 90%);
color: #409eff;
}
</style>

94
src/views/system/dept/index.vue
View File

@@ -2,57 +2,31 @@
<div class="app-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item>
<el-button type="success" :icon="Plus" @click="handleAdd"
>新增</el-button
>
<el-button
type="danger"
:icon="Delete"
:disabled="single"
@click="handleDelete"
>删除
<el-button type="success" :icon="Plus" @click="handleAdd">新增</el-button>
<el-button type="danger" :icon="Delete" :disabled="single" @click="handleDelete">删除
</el-button>
</el-form-item>
<el-form-item prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入部门名称"
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.name" placeholder="请输入部门名称" @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
placeholder="部门状态"
clearable
>
<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
<el-option :value="1" label="正常" />
<el-option :value="0" label="禁用" />
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="filter-item"
type="primary"
:icon="Search"
@click="handleQuery"
>
<el-button class="filter-item" type="primary" :icon="Search" @click="handleQuery">
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="deptList"
row-key="id"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@selection-change="handleSelectionChange"
>
<el-table v-loading="loading" :data="deptList" row-key="id" default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="name" label="部门名称" />
<el-table-column prop="status" label="状态" width="100">
@@ -66,65 +40,28 @@
<el-table-column label="操作" align="center" width="150">
<template #default="scope">
<el-button
type="primary"
:icon="Edit"
circle
plain
@click.stop="handleUpdate(scope.row)"
>
<el-button type="primary" :icon="Edit" circle plain @click.stop="handleUpdate(scope.row)">
</el-button>
<el-button
type="success"
:icon="Plus"
circle
plain
@click.stop="handleAdd(scope.row)"
>
<el-button type="success" :icon="Plus" circle plain @click.stop="handleAdd(scope.row)">
</el-button>
<el-button
type="danger"
:icon="Delete"
circle
plain
@click.stop="handleDelete(scope.row)"
>
<el-button type="danger" :icon="Delete" circle plain @click.stop="handleDelete(scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog
:title="dialog.title"
v-model="dialog.visible"
width="600px"
@closed="cancel"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="rules"
label-width="80px"
>
<el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" @closed="cancel">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="上级部门" prop="parentId">
<tree-select
:options="deptOptions"
placeholder="选择上级部门"
v-model="formData.parentId"
/>
<el-tree-select v-model="formData.parentId" placeholder="选择上级部门" :data="deptOptions" filterable />
</el-form-item>
<el-form-item label="部门名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入部门名称" />
</el-form-item>
<el-form-item label="显示排序" prop="sort">
<el-input-number
v-model="formData.sort"
controls-position="right"
style="width: 100px"
:min="0"
/>
<el-input-number v-model="formData.sort" controls-position="right" style="width: 100px" :min="0" />
</el-form-item>
<el-form-item label="部门状态">
<el-radio-group v-model="formData.status">
@@ -160,7 +97,6 @@ import {
// 组件依赖
import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
import TreeSelect from "@/components/TreeSelect/index.vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import {
DeptFormData,
@@ -185,7 +121,7 @@ const state = reactive({
// 部门下拉选项
deptOptions: [] as Option[],
// 弹窗属性
dialog: {visible:false} as Dialog,
dialog: { visible: false } as Dialog,
// 查询参数
queryParams: {} as DeptQueryParam,
// 表单数据

3
src/views/system/menu/components/Menu.vue
View File

@@ -46,7 +46,7 @@
<el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
<el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="父级菜单" prop="parentId">
<tree-select v-model="formData.parentId" :options="menuOptions" placeholder="选择上级菜单" />
<el-tree-select v-model="formData.parentId" placeholder="选择上级菜单" :data="menuOptions" filterable />
</el-form-item>
<el-form-item label="菜单名称" prop="name">
@@ -140,7 +140,6 @@ import {
} from "@/api/system/menu";
import SvgIcon from "@/components/SvgIcon/index.vue";
import TreeSelect from "@/components/TreeSelect/index.vue";
import IconSelect from "@/components/IconSelect/index.vue";
const emit = defineEmits(["menuClick"]);

3
src/views/system/user/index.vue
View File

@@ -105,7 +105,7 @@
</el-form-item>
<el-form-item label="所属部门" prop="deptId">
<tree-select v-model="formData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
<el-tree-select v-model="formData.deptId" placeholder="请选择所属部门" :data="deptOptions" filterable />
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
@@ -224,7 +224,6 @@ import {
Top,
UploadFilled
} from "@element-plus/icons-vue";
import TreeSelect from "@/components/TreeSelect/index.vue";
import {
UserItem,
UserQueryParam,