基础的配置

页面代码

ibps-tree-select基本的配置，下拉树形数据的展示。以及个性的插槽拓展，下拉数据选中时的自定义展示效果。

<template>
  <div>
    <template v-if="!readonly">
      <ibps-tree-select
        v-if="treeData"
        ref="treeSelect"
        v-model="selectData"
        :data="treeData"
        :props="props"
        :node-key="nodeKey"
        :placeholder="placeholder"
        :empty-text="emptyText"
        :clearable="clearable"
        v-on="$listeners"
      />
    </template>
    <template v-else>
      <el-tag v-if="$utils.isNotEmpty(value)">
        {{ value|optionsFilter(treeDataOptions,'label') }}
      </el-tag>
    </template>
  </div>
</template>
<script>
import { findTreeData } from '@/api/platform/cat/type'
import TreeUtils from '@/utils/tree'
// import i18n from '@/utils/i18n'
import IbpsTreeSelect from '@/components/ibps-tree-select'

export default {
  components: {
    IbpsTreeSelect
  },
  props: {
    value: {
      type: [String, Number, Array, Object],
      default: ''
    },
    data: {
      type: Array
    },
    placeholder: {
      type: String,
      default() {
        return this.$t('common.placeholder.please-select')
      }
    },
    emptyText: {
      type: String,
      default() {
        return this.$t('business.platform.cat.type.no-classification')
      }
    },
    readonly: { // 是否只读
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    categoryKey: {
      type: String
    },
    nodeKey: {
      type: String,
      default: 'typeKey'
    }
  },
  data: function() {
    return {
      props: {
        children: 'children',
        label: 'name'
      },
      selectData: this.value,
      treeData: [],
      treeDataOptions: []
    }
  },
  watch: {
    categoryKey: {
      handler(val, oldVal) {
        if (this.$utils.isEmpty(this.data)) {
          this.loadTreeData()
        } else {
          this.treeData = JSON.parse(JSON.stringify(this.data)) || []
        }
      },
      immediate: true
    },
    selectData(val, oldVal) {
      this.$emit('input', val)
    },
    value: {
      handler(val, oldVal) {
        this.selectData = val
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.treeData = null
    this.treeDataOptions = null
    this.props = null
    this.selectData = null
  },
  methods: {
    loadTreeData(categoryKey = this.categoryKey) {
      findTreeData({ categoryKey: categoryKey }).then(response => {
        const treeData = response.data.filter((d) => {
          return d.parentId !== '-1'
        })
        this.treeData = TreeUtils.transformToTreeFormat(treeData)
        this.treeDataOptions = treeData.map(item => {
          return {
            value: item[this.nodeKey],
            label: item.name
          }
        })
      }).catch(() => {
      })
    }
  }
}
</script>

获取内部值和方法

可以通过 ref 拿到树形下拉组件实时数据以及内部方法。

...
this.$refs.treeSelect.setSelectedNode()//设置选中的节点
...
this.$refs.treeSelect.handleQueryChange() //查询过滤
...

以上为暂时个例的取值和方法通过ref进行调用，详细的请查看API进行使用。