element-ui-vue-treeselect使用

一、下载

npm install @riophae/vue-treeselect --save

二、main.js配置

import Treeselect from '@riophae/vue-treeselect' // 导入vue-treeselect

import '@riophae/vue-treeselect/dist/vue-treeselect.css' // 导入样式

Vue.component('Treeselect', Treeselect); // 注册组件

三、使用

<Treeselect
          :disable-branch-nodes="true"//只允许选择叶子节点
          :multiple="true"//多选
          :options="deptNameOptions"
          :normalizer="normalizer"//normalizer属性
          placeholder="出院科室"
          v-model="searchForm.outDeptCode"
          :limit="1"//只显示一个
          :limitText="count => `+${count}`"//显示+1，+2,+3  多选输入框不换行单行显示加计数
           （limit和limitText综合使用效果：类似el-select的collapse-tags）
          noChildrenText="没有数据了"
          noOptionsText="没有数据"
          noResultsText="没有搜索结果">
          <p
            style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 90%;"
            slot="option-label"
            slot-scope="{node}"
            :title="node.label">
            <template> {{ node.label }}</template>
          </p>
</Treeselect>
methods: {
//是用于将options的值，转换为符合vue-treeselect要求的数据格式；可放在data中也可methods中
    normalizer: (node) => {
      if(node.childs && !node.childs.length) delete node.childs;
      return {
        id: node.id,
        label:node.name,
        children:node.childs
      }
    },
}

四、样式调整

<style lang="scss" scoped>
::v-deep(.vue-treeselect){
  width:240px;
  height:28px;
  display:inline-flex;
  .vue-treeselect__control{
    height: 28px;
    .vue-treeselect__placeholder, .vue-treeselect__single-value{
      line-height: 28px;
    }
    .vue-treeselect__value-container{
      .vue-treeselect__multi-value{
        margin-bottom:0;
        display: flex;
        .vue-treeselect__multi-value-item-container{
          max-width: 80%;
          .vue-treeselect__multi-value-item{
            max-width: 100%;
            display: flex;
            align-items: center;
            .vue-treeselect__multi-value-label{
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              display: inline-block;
              // max-width: 80%;
            }
          }
        }
      }
    }
  }
}
</style>