iT邦幫忙

0

element-ui 的 el-select 与 el-tree 的功能组合

  • 分享至 

  • xImage
  •  

[TOC]

简介

element-ui 的 el-selectel-tree 组件的功能组合。

使用

安装

npm install --save el-select-tree

对 element-ui 的依赖

如果你的项目中没有使用 element-ui,
你需要引入单独的 element-ui 包,像这样:

import 'el-select-tree/lib/element-ui';

全局注册

import Vue from 'vue';
import ElSelectTree from 'el-select-tree';

Vue.use(ElSelectTree);

局部注册

import ElSelectTree from 'el-select-tree';

export default {
  components: {
    ElSelectTree
  }
};

完整的实例

<template>
  <el-select-tree
    width="120px"
    placeholder="请选择内容"
    :data="treeData"
    :disabled-values="disabledValues"
    v-model="value"
  ></el-select-tree>
</template>

<script>
import ElSelectTree from 'el-select-tree';

export default {
  components: {
    ElSelectTree
  },
  data() {
    return {
      value: 2,
      treeData: [
        {
          value: 1,
          label: 'text1',
          children: [{ value: 5, label: 'text5' }, { value: 6, label: 'text6' }]
        },
        { value: 2, label: 'text2' },
        { value: 3, label: 'text3' },
        { value: 4, label: 'text5' }
      ],
      disabledValues: [3]
    };
  }
};
</script>

组件 API

属性

name type description
value/v-model */*[] 绑定值,如果 multiple 属性为 true,绑定的必须为 Array 类型
data object[] 下拉的选项数据,是一个树形结构,参考上面的实例数据
props object 树形结构的参数对照表,默认:{ value: 'value', label: 'label', children: 'children' }
multiple boolean 是否多选,默认:false
placement string 继承 element-ui 的 placement 属性,默认:botttom-start
size string 继承 element-ui 的 size 属性,默认: samll
width string 组件的宽度,默认: 240px
disabled boolean 是否禁用,默认:false
disabledValues *[] 禁用的值,默认:[]
placeholder string 占位符,默认:'请选择'

事件

  • change(value) 选项修改事件,返回修改的值

更多扩展组件:
el-table-infinite-scroll


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言