Newer
Older
KaiFengPC / src / components / TreeSelect / index.vue
@zhangdeliang zhangdeliang on 23 May 3 KB 初始化项目
  1. <template>
  2. <div class="el-tree-select">
  3. <el-select
  4. style="width: 100%"
  5. v-model="valueId"
  6. ref="treeSelect"
  7. :filterable="true"
  8. :clearable="true"
  9. @clear="clearHandle"
  10. :filter-method="selectFilterData"
  11. :placeholder="placeholder"
  12. >
  13. <el-option :value="valueId" :label="valueTitle">
  14. <el-tree
  15. id="tree-option"
  16. ref="selectTree"
  17. :accordion="accordion"
  18. :data="options"
  19. :props="objMap"
  20. :node-key="objMap.value"
  21. :expand-on-click-node="false"
  22. :default-expanded-keys="defaultExpandedKey"
  23. :filter-node-method="filterNode"
  24. @node-click="handleNodeClick"
  25. ></el-tree>
  26. </el-option>
  27. </el-select>
  28. </div>
  29. </template>
  30.  
  31. <script setup>
  32.  
  33. const { proxy } = getCurrentInstance();
  34.  
  35. const props = defineProps({
  36. /* 配置项 */
  37. objMap: {
  38. type: Object,
  39. default: () => {
  40. return {
  41. value: 'id', // ID字段名
  42. label: 'label', // 显示名称
  43. children: 'children' // 子级字段名
  44. }
  45. }
  46. },
  47. /* 自动收起 */
  48. accordion: {
  49. type: Boolean,
  50. default: () => {
  51. return false
  52. }
  53. },
  54. /**当前双向数据绑定的值 */
  55. value: {
  56. type: [String, Number],
  57. default: ''
  58. },
  59. /**当前的数据 */
  60. options: {
  61. type: Array,
  62. default: () => []
  63. },
  64. /**输入框内部的文字 */
  65. placeholder: {
  66. type: String,
  67. default: ''
  68. }
  69. })
  70.  
  71. const emit = defineEmits(['update:value']);
  72.  
  73. const valueId = computed({
  74. get: () => props.value,
  75. set: (val) => {
  76. emit('update:value', val)
  77. }
  78. });
  79. const valueTitle = ref('');
  80. const defaultExpandedKey = ref([]);
  81.  
  82. function initHandle() {
  83. nextTick(() => {
  84. const selectedValue = valueId.value;
  85. if(selectedValue !== null && typeof (selectedValue) !== 'undefined') {
  86. const node = proxy.$refs.selectTree.getNode(selectedValue)
  87. if (node) {
  88. valueTitle.value = node.data[props.objMap.label]
  89. proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
  90. defaultExpandedKey.value = [selectedValue] // 设置默认展开
  91. }
  92. } else {
  93. clearHandle()
  94. }
  95. })
  96. }
  97. function handleNodeClick(node) {
  98. valueTitle.value = node[props.objMap.label]
  99. valueId.value = node[props.objMap.value];
  100. defaultExpandedKey.value = [];
  101. proxy.$refs.treeSelect.blur()
  102. selectFilterData('')
  103. }
  104. function selectFilterData(val) {
  105. proxy.$refs.selectTree.filter(val)
  106. }
  107. function filterNode(value, data) {
  108. if (!value) return true
  109. return data[props.objMap['label']].indexOf(value) !== -1
  110. }
  111. function clearHandle() {
  112. valueTitle.value = ''
  113. valueId.value = ''
  114. defaultExpandedKey.value = [];
  115. clearSelected()
  116. }
  117. function clearSelected() {
  118. const allNode = document.querySelectorAll('#tree-option .el-tree-node')
  119. allNode.forEach((element) => element.classList.remove('is-current'))
  120. }
  121.  
  122. onMounted(() => {
  123. initHandle()
  124. })
  125.  
  126. watch(valueId, () => {
  127. initHandle();
  128. })
  129. </script>
  130.  
  131. <style lang='scss' scoped>
  132. @import "@/assets/styles/variables.module.scss";
  133. .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  134. padding: 0;
  135. background-color: #fff;
  136. height: auto;
  137. }
  138.  
  139. .el-select-dropdown__item.selected {
  140. font-weight: normal;
  141. }
  142.  
  143. ul li .el-tree .el-tree-node__content {
  144. height: auto;
  145. padding: 0 20px;
  146. box-sizing: border-box;
  147. }
  148.  
  149. :deep(.el-tree-node__content:hover),
  150. :deep(.el-tree-node__content:active),
  151. :deep(.is-current > div:first-child),
  152. :deep(.el-tree-node__content:focus) {
  153. background-color: mix(#fff, $--color-primary, 90%);
  154. color: $--color-primary;
  155. }
  156. </style>