el-select优化TSelect，下拉框只能选末级，启用状态

 封装组件 components/TSelect

<template>

  <el-select

    v-model="selectValue"

    v-loading="loading"

    :placeholder="placeholder"

    filterable

    clearable

    :disabled="disabled"

    @change="changeEvent"

    @clear="clearEvent"

  >

    <el-option

      v-for="item in opitonList"

      :key="item.treedataid"

      :disabled="isLast?((!!item[props['disabled']||'blnisinactive'])||(!item[props['last']||'blnisdetail'])):!!item[props['disabled']||'blnisinactive']"

      :label="props['codes'] ? (item[props['label']||'treedataname']+item.dot+item.pinyin) : (item[props['label']||'treedatacodeandname']+item.dot+item.pinyin)"

      :value="item[props['value']||'treedataid']"

    >

      <span :style="{'float':'left','text-indent':(item.level-1)*1+'em','width':'100%'}" @click="selectEvent(item)">{{ item[props['label']||'treedatacodeandname'] }}</span>

    </el-option>

  </el-select>

</template>

<script>

import { flatten } from '@/base/utils'

export default {

  name: 'TSelect',

  props: {

    props: { // 配置项

      type: Object,

      default() {

        return {

          value: 'treedataid',

          label: 'treedatacodeandname',

          disabled: 'blnisinactive',

          last: 'blnisdetail',

          codes: false

        }

      }

    },

    isLast: {

      type: Boolean,

      default: false

    },

    disabled: {

      type: Boolean,

      default: false

    },

    value: {

      type: [Number, String],

      default: ''

    },

    dotLength: {

      type: Number,

      default: 200

    },

    options: { // 选项列表数据

      type: Array,

      default() {

        return []

      }

    },

    placeholder: {

      type: String,

      default: '请选择'

    },

    isInline: {

      type: Boolean,

      default: false

    },

    loading: {

      type: Boolean,

      default: false

    }

  },

  data() {

    return {

      opitonList: [],

      firstLoad: true

    }

  },

  computed: {

    selectValue: {

      get() {

        return this.value

      },

      set(val) {

        this.$emit('input', val)

      }

    }

  },

  watch: {

    'options'(newval) {

      if (newval.length >= 0 && this.firstLoad) {

        this.firstLoad = false

        setTimeout(() => {

          this.firstLoad = true

        }, 300)

        this.opitonList = this.flatten(this.options).map(item => { return { pinyin: this.allPinYin(this.props['codes'] ? (item[this.props['label'] || 'treedataname']) : (item[this.props['label'] || 'treedatacodeandname'])), dot: this.getDots(this.dotLength), ...item } })

      }

    }

  },

  created() {

    if (this.isInline && this.options.length > 0 && this.firstLoad) {

      this.firstLoad = false

      this.opitonList = this.flatten(this.options).map(item => { return { pinyin: this.allPinYin(this.props['codes'] ? (item[this.props['label'] || 'treedataname']) : (item[this.props['label'] || 'treedatacodeandname'])), dot: this.getDots(this.dotLength), ...item } })

    }

  },

  methods: {

    flatten,

    // 获取选中的value值

    changeEvent(val) {

      this.$emit('change', val)

    },

    clearEvent() {

      this.$emit('clear')

    },

    // 获取整个条目对象

    selectEvent(item) {

      if (item[this.props['value']] === this.selectValue) {

        return false

      }

      this.$emit('select', item)

    },

    allPinYin(str) {

      if (!window.pinyinUtil) {

        console.log('缺少拼音库依赖,需要在index.html引入pinyinjs库！')

        return ''

      }

      // eslint-disable-next-line

      return pinyinUtil.getFirstLetter(str).toLowerCase() + pinyinUtil.getPinyin(str).replace(/\s/g, '')

    },

    getDots(num = 10) {

      return ' '.repeat(num)

    }

  }

}

</script>

base/utils/index.js

// 扁平化树形json

export function flatten(data, level = 0) {

  if (data.length === 0) {

    level = 0

  }

  ++level

  return data.reduce((arr, { treedataid, treedatacode, treedataname, treedatacodeandname, lngparentid, lngextendid, blnisdetail, path, intlevel, blnisinactive, childList = [] }) =>

    arr.concat([{ treedataid, treedatacode, treedataname, treedatacodeandname, lngparentid, lngextendid, blnisdetail, path, intlevel, blnisinactive, level: level }], flatten(childList, level)), [])

}

引入组件在项目中使用

<el-form-item label="支出项目类别" prop="lngoutitemtypeid">

        <TSelect

          v-model="formInline.lngoutitemtypeid"

          style="width:130px"

          placeholder="请选择"

          :options="outItemTypeList"

          :is-last="true"

        />

      </el-form-item>