删除自定义树组件

src/components/TreeSelect/index.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="el-tree-select">
-    <el-select
-      style="width: 100%"
-      v-model="valueId"
-      ref="treeSelect"
-      :filterable="true"
-      :clearable="true"
-      @clear="clearHandle"
-      :filter-method="selectFilterData"
-      :placeholder="placeholder"
-    >
-      <el-option :value="valueId" :label="valueTitle">
-        <el-tree
-          id="tree-option"
-          ref="selectTree"
-          :accordion="accordion"
-          :data="options"
-          :props="objMap"
-          :node-key="objMap.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>
-const { proxy } = getCurrentInstance()
-
-const props = defineProps({
-  /* 配置项 */
-  objMap: {
-    type: Object,
-    default: () => {
-      return {
-        value: 'id', // ID字段名
-        label: 'label', // 显示名称
-        children: 'children', // 子级字段名
-      }
-    },
-  },
-  /* 自动收起 */
-  accordion: {
-    type: Boolean,
-    default: () => {
-      return false
-    },
-  },
-  /**当前双向数据绑定的值 */
-  value: {
-    type: [String, Number],
-    default: '',
-  },
-  /**当前的数据 */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  /**输入框内部的文字 */
-  placeholder: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update:value'])
-
-const valueId = computed({
-  get: () => props.value,
-  set: (val) => {
-    emit('update:value', val)
-  },
-})
-const valueTitle = ref('')
-const defaultExpandedKey = ref([])
-
-function initHandle() {
-  nextTick(() => {
-    const selectedValue = valueId.value
-		console.log('selectedValue=' + selectedValue)
-    if (selectedValue && selectedValue !== null && typeof selectedValue !== 'undefined') {
-      const node = proxy.$refs.selectTree.getNode(selectedValue)
-      if (node) {
-        valueTitle.value = node.data[props.objMap.label]
-        proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
-        defaultExpandedKey.value = [selectedValue] // 设置默认展开
-      }
-    } else {
-      // clearHandle()
-    }
-  })
-}
-function handleNodeClick(node) {
-  valueTitle.value = node[props.objMap.label]
-  valueId.value = node[props.objMap.value]
-  defaultExpandedKey.value = []
-  proxy.$refs.treeSelect.blur()
-  selectFilterData('')
-}
-function selectFilterData(val) {
-  proxy.$refs.selectTree.filter(val)
-}
-function filterNode(value, data) {
-  if (!value) return true
-  return data[props.objMap['label']].indexOf(value) !== -1
-}
-function clearHandle() {
-  valueTitle.value = ''
-  valueId.value = ''
-  defaultExpandedKey.value = []
-  clearSelected()
-}
-function clearSelected() {
-  const allNode = document.querySelectorAll('#tree-option .el-tree-node')
-  allNode.forEach((element) => element.classList.remove('is-current'))
-}
-
-onMounted(() => {
-  initHandle()
-})
-
-watch(valueId, () => {
-  initHandle()
-})
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/styles/variables.module.scss';
-.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, $--color-primary, 90%);
-  color: $--color-primary;
-}
-</style>

src/main.js

@@ -36,8 +36,6 @@ import FileUpload from "@/components/FileUpload"
 import ImageUpload from "@/components/ImageUpload"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
-// 自定义树选择组件
-import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
 // el-date-picker 快捷选项
@@ -61,7 +59,6 @@ app.config.globalProperties.dateOptions = dateOptions
 // 全局组件挂载
 app.component('DictTag', DictTag)
 app.component('Pagination', Pagination)
-app.component('TreeSelect', TreeSelect)
 app.component('UploadFile', FileUpload)
 app.component('UploadImage', ImageUpload)
 app.component('ImagePreview', ImagePreview)