PmTreeSelect

下拉树 继承自 vue-treeselect (opens new window)

基础用法

<PmTreeSelect
  :props="props"
  :options="treeData"
  v-model="value"
  clearable
/>
<script>
  export default {
    data(){
      return {
        value: 1, // 初始ID（可选）
        props: {
          // 配置项（必选）
          value: "id",
          label: "label",
          children: "children"
          // disabled:true
        },
        // 选项列表（必选）
        treeData:[
          {
            label:'直辖市',
            id:'1',
            children:[
              {label:'北京',id:'110'},
              {label:'上海',id:'120'},
              {label:'天津',id:'130'},
              {label:'重庆',id:'140'},
            ]
          },
        ],
      }
    },
  }
</script>

显示代码 复制代码 复制代码

多选

<PmTreeSelect
  style="width:300px;"
  :props="props"
  :options="treeData"
  v-model="value"
  multiple
  :normalizer="normalizer"
  valueConsistsOf="LEAF_PRIORITY"
  :checkFilter="isCity"
/>
<script>
  export default {
    data(){
      return {
        value: [], // 初始ID（可选）
        props: {
          // 配置项（必选）
          value: "id",
          label: "label",
          children: "children"
          // disabled:true
        },
        normalizer(node) {
          return {
            id: node.id,
            label: node.name,
          }
        },
        // 选项列表（必选）
        treeData:[
          {
            name:'直辖市',
            id:'1',
            children:[
              {name:'北京',id:'110',type:'city'},
              {name:'上海',id:'120',type:'city'},
              {name:'天津',id:'130',type:'city'},
              {name:'重庆',id:'140',type:'city'},
            ]
          },
        ],
      }
    },
   
    methods: {
      // 取值
      isCity(data){
        return data.type === 'city'
      }
    }
  }
</script>

显示代码 复制代码 复制代码

自定义节点

<PmTreeSelect
  style="width:300px;"
  :props="props"
  :options="treeData"
  v-model="value"
  multiple
  :normalizer="normalizer"
  valueConsistsOf="LEAF_PRIORITY"
  :checkFilter="isCity"
>
  <el-tooltip
    slot="option-label"
    slot-scope="{node}"
    :content="node.label" 
    placement="top-start">
      <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">{{node.label}}</p>
  </el-tooltip>
</PmTreeSelect>
<script>
  export default {
    data(){
      return {
        value: [], // 初始ID（可选）
        props: {
          // 配置项（必选）
          value: "id",
          label: "label",
          children: "children"
          // disabled:true
        },
        normalizer(node) {
          return {
            id: node.id,
            label: node.name,
          }
        },
        // 选项列表（必选）
        treeData:[
          {
            name:'城市',
            id:'1',
            children:[
              {name:'北京',id:'110',type:'city'},
              {name:'上海',id:'120',type:'city'},
              {name:'天津',id:'130',type:'city'},
              {name:'重庆',id:'140',type:'city'},
              {
                name:'临沧',
                id:'150',
                type:'city', 
                children:[
                  {name:'双江拉祜族佤族布朗族傣族自治县',id:'1501',type:'city'},
                ] 
              },
            ]
          },
        ],
      }
    },
   
    methods: {
      // 取值
      isCity(data){
        return data.type === 'city'
      },
    }
  }
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
options	树形数据	array	-	[]
multiple	多选	boolean	-	false
normalizer	自定义键名	function	-	-
valueConsistsOf	价值组合	string	ALL \ BRANCH_PRIORITY \ LEAF_PRIORITY \ ALL_WITH_INDETERMINATE	BRANCH_PRIORITY