Tree树型选择框

基础用法

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树型选择框',
          prop: 'tree',
          type: 'tree',
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    };
  }
}
</script>
显示代码

默认值

value属性可以提供一个初始化的默认值

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '树型选择框',
            prop: 'tree',
            type: 'tree',
            dicData: [{
              label: '字典1',
              value: 0,
              children: [{
                label: '字典3',
                value: 2
              }]
            }, {
              label: '字典2',
              value: 1
            }],
            value: 0
          }
        ]
      }
    }
  }
}
</script>
显示代码

禁用状态

通过disabled属性指定是否禁用

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '树型选择框',
            prop: 'tree',
            type: 'tree',
            dicData: [{
              label: '字典1',
              value: 0,
              children: [{
                label: '字典3',
                value: 2
              }]
            }, {
              label: '字典2',
              value: 1
            }],
            disabled: true
          }
        ]
      }
    }
  }
}
</script>
显示代码

禁用选项

返回的字典中数据配置disabled属性指定是否禁用

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '树型选择框',
            prop: 'tree',
            type: 'tree',
            dicData: [{
              label: '字典1',
              value: 0,
              disabled: true,
              children: [{
                label: '字典3',
                value: 2
              }]
            }, {
              label: '字典2',
              value: 1
            }]
          }
        ]
      }
    }
  }
}
</script>
显示代码

可清空

使用clearable属性即可得到一个可清空的输入框,默认为true

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '树型选择框',
            prop: 'tree',
            type: 'tree',
            clearable: false,
            dicData: [{
              label: '字典1',
              value: 0,
              children: [{
                label: '字典3',
                value: 2
              }]
            }, {
              label: '字典2',
              value: 1
            }]
          }
        ]
      }
    }
  }
}
</script>
显示代码

辅助语

配置下拉数据中desc字段

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树型选择框',
          prop: 'tree',
          type: 'tree',
          dicData: [{
            label: '字典1',
            value: 0,
            desc: '字典描述',
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    }
  }
}
</script>
显示代码

下拉框样式

.popperClass .el-tree-node__content{
  background-color: rgba(0,0,0,.2);
}

popperClass属性配置样式的class名字

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树型选择框',
          prop: 'tree',
          type: 'tree',
          popperClass: 'popperClass',
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    };
  }
}
</script>
显示代码

字典属性

指定标签文本和值,默认为label和value

配置props属性来指定标签文本和值,默认为labelvalue

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树形下拉框',
          prop: 'tree',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code',
            children: 'list'
          },
          dicData: [{
            name: '字典1',
            code: 0,
            list: [{
              name: '字典3',
              code: 2
            }]
          }, {
            name: '字典2',
            value: 1
          }]
        }]
      }
    }
  }
}
</script>
显示代码

网络字典

更多用法参考表单数据字典

配置dicUrl指定后台接口的地址

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树形下拉框',
          prop: 'tree',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
        }]
      }
    }
  }
}
</script>
显示代码

基础多选

设置multiple属性即可启用多选,此时值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapseTags属性将它们合并为一段文字,同时配合maxCollapseTags最大显示个数和collapseTagsTooltip是否折叠提示

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>
<script>
const dicData = [{
  label: '字典1',
  value: 0,
  children: [{
    label: '字典3',
    value: 2
  }]
}, {
  label: '字典2',
  value: 1
}]
export default {
  data () {
    return {
      form: {
        tree: [0, 1, 2, 3, 4]
      },
      option: {
        column: [{
          label: '多选',
          prop: 'tree',
          type: 'tree',
          multiple: true,
          dicData: dicData
        }, {
          label: '多选',
          prop: 'tree',
          type: 'tree',
          multiple: true,
          collapseTags: true,
          maxCollapseTags: 3,
          collapseTagsTooltip: true,
          dicData: dicData
        }]
      }
    };
  }
}
</script>
显示代码

选择任意级别

当属性checkStrictlytrue 时,任何节点都可以被选择,否则只有子节点可被选择。

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树型选择框',
          prop: 'tree',
          type: 'tree',
          checkStrictly: true,
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }, {
          label: '树型选择框1',
          prop: 'tree1',
          type: 'tree',
          multiple: true,
          checkStrictly: true,
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    };
  }
}
</script>
显示代码

基础过滤

filterable 属性即可启用筛选功能

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '多选',
          prop: 'tree',
          type: 'tree',
          filterable: true,
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }, {
          label: '父类不可选',
          prop: 'tree1',
          type: 'tree',
          parent: false,
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2,
              children: [{
                label: '字典4',
                value: 3
              }]
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    };
  }
}
</script>
显示代码

手风琴模式

设置accordion对于同一级的节点,每次只能展开一个

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '树型选择框',
          prop: 'tree',
          type: 'tree',
          accordion: true,
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1,
            children: [{
              label: '字典4',
              value: 3
            }]
          }]
        }]
      }
    };
  }
}
</script>
显示代码

节点事件

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '多选',
          prop: 'tree',
          type: 'tree',
          multiple: true,
          nodeClick: (data, node, nodeComp) => {
            this.$message.success(JSON.stringify(data))
          },
          checked: (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) => {
            this.$message.success(JSON.stringify(checkedKeys))
          },
          dicData: [{
            label: '字典1',
            value: 0,
            children: [{
              label: '字典3',
              value: 2
            }]
          }, {
            label: '字典2',
            value: 1
          }]
        }]
      }
    };
  }
}
</script>
显示代码

自定义模板

配置prop名称加Type卡槽开启即可自定义下拉框的内容,typeformat配置回显的内容,但是你提交的值还是value并不会改变

<template>
  <avue-form :option="option"
             v-model="form">
    <template #code-type="{item,value,label}">
      <span>{{ item }}</span>
    </template>
  </avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {},
      option: {
        column: [{
          label: '单选',
          prop: 'code',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `${baseUrl}/getProvince`,
          typeformat (item, label, value) {
            return `值:${item[label]}-名:${item[value]}`
          },
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }, {
          label: '多选',
          prop: 'codes',
          type: 'tree',
          props: {
            label: 'name',
            value: 'code'
          },
          multiple: true,
          dicUrl: `${baseUrl}/getProvince`,
          typeformat (item, label, value) {
            return `值:${item[label]}-名:${item[value]}`
          },
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }
        ]
      }
    }
  }
}
</script>
显示代码

懒加载

cacheData懒加载节点的缓存数据,结构与数据相同,用于获取未加载数据的标签

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      option: {
        column: [{
          label: '懒加载',
          prop: 'id',
          type: 'tree',
          dicUrl: `${baseUrl}/getProvince?id={{key}}`,
          props: {
            label: 'name',
            value: 'code'
          },
          lazy: true,
          cacheData:[{
            name:'未加载数据',
            code:-1
          }],
          treeLoad: (node, resolve) => {
            let stop_level = 2;
            let level = node.level;
            let data = node.data || {}
            let code = data.code;
            let list = [];
            let callback = () => {
              resolve((list || []).map(ele => {
                return Object.assign(ele, {
                  leaf: level >= stop_level
                })
              }));
            }
            if (level == 0) {
              axios.get(`${baseUrl}/getProvince`).then(res => {
                list = res.data;
                callback()
              })
            }
            if (level == 1) {
              axios.get(`${baseUrl}/getCity/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else if (level == 2) {
              axios.get(`${baseUrl}/getArea/${code}`).then(res => {
                list = res.data;
                callback()
              })
            } else {
              list = []
              callback()
            }
          }
        }]
      }
    };
  }
}
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档