ElementUi 组织机构封装组件问题

最新推荐文章于 2024-06-12 09:14:01 发布

就是那块料

最新推荐文章于 2024-06-12 09:14:01 发布

阅读量115

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_61449795/article/details/134557798

版权

效果：

组件：

<template>
  <el-popover
    v-model="visible"
    :disabled="disabled"
    trigger="focus"
    :visible-arrow="false"
    placement="bottom"
    @after-leave="inputIsFocus = false"
  >
    <div style="overflow-y: auto; height: 600px">
      <el-tree
        ref="tree"
        :data="data"
        :props="defaultProps"
        node-key="id"
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-expand-all="true"
        @node-click="nodeClick"
      />
    </div>
    <el-input
      slot="reference"
      :suffix-icon="disabled?'':inputIsFocus?'el-icon-arrow-up':'el-icon-arrow-down'"
      :value="orgUnitName"
      :disabled="disabled"
      @focus="disabled?'':inputIsFocus = true"
    />
  </el-popover>

</template>
<script>

import { construct } from '@aximario/json-tree'
import { listOrg } from '@/service/global'
import { mapOrg } from '@/service/global'

export default {
  name: 'OrgSelect',
  props: {
    value: {
      type: String,
      default: function() {
        return ''
      }
    },
    disabled: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },
  data() {
    return {
      visible: false,
      defaultProps: {
        children: 'children',
        label: 'orgUnitName'
      },
      inputIsFocus: false,
      orgUnitName: '',
      data: [],
      orgMap: []
    }
  },
  methods: {
    init() {
      this.loadOrgTreeData()
    },
    loadOrgTreeData() {
      const _this = this
      listOrg(this.$http, {}).then(result => {
        _this.data = construct(result, {
          id: 'orgUnitId',
          pid: 'parentId',
          children: 'children'
        })
      })
    },
    getSelectName() {
      const _this = this
      mapOrg(this.$http).then(result => {
        _this.orgMap = result
        _this.orgUnitName = _this.orgMap[_this.value]
        _this.$refs['tree'].setCurrentKey(_this.value)
      })
    },
    nodeClick() {
      const current = this.$refs['tree'].getCurrentNode()
      this.orgUnitName = current.orgUnitName
      this.$emit('update:value', current.orgUnitCode)
    },
    clear() {
      this.orgUnitName = ''
      this.$emit('update:value', '')
    }
  }
}
</script>

<style scoped>

</style>

页面引用：

import OrgSelect from '@/components/org-select'

页面使用：

<org-select ref="orgSelect" :value.sync="searchForm.affiliatedUnit"/>

初始化数据：

this.$refs.orgSelect.init()

详情：this.$refs.orgSelect.getSelectName()

清空：this.$refs.orgSelect.clear()