Tree树型选择框

基础用法

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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属性来指定标签文本和值，默认为label和value

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  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',
          code: 1
        }
      ]
    }
  ]
});
</script>

网络字典

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

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '树形下拉框',
      prop: 'tree',
      type: 'tree',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: 'https://api.avuejs.com/area/getProvince'
    }
  ]
});
</script>

基础多选

效果预览可直接操作下方示例

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

正在加载示例…

<template>
  <avue-form v-model="form"
             :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const dicData = [
  {
    label: '字典1',
    value: 0,
    children: [
      {
        label: '字典3',
        value: 2
      }
    ]
  },
  {
    label: '字典2',
    value: 1
  }
];

const form = ref({
  tree: [0, 1, 2, 3, 4]
});

const option = ref({
  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>

选择任意级别

效果预览可直接操作下方示例

当属性checkStrictly为true 时，任何节点都可以被选择，否则只有子节点可被选择。

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';

const option = ref({
  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 setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const dicData = [
  {
    label: '字典1',
    value: 0,
    children: [
      {
        label: '字典3',
        value: 2
      }
    ]
  },
  {
    label: '字典2',
    value: 1
  }
];

const option = ref({
  column: [
    {
      label: '多选',
      prop: 'tree',
      type: 'tree',
      multiple: true,
      nodeClick: (data, node, nodeComp) => {
        ElMessage.success(JSON.stringify(data));
      },
      checked: (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) => {
        ElMessage.success(JSON.stringify(checkedKeys));
      },
      dicData: dicData
    }
  ]
});
</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 setup>
import { ref } from 'vue';

const baseUrl = 'https://api.avuejs.com/area';

const form = ref({});
const option = ref({
  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 setup>
import { ref } from 'vue';
import axios from 'axios';

const baseUrl = 'https://api.avuejs.com/area';

const option = ref({
  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) => {
        const stop_level = 2;
        const level = node.level;
        const data = node.data || {};
        const code = data.code;
        let list = [];

        const callback = () => {
          resolve((list || []).map(ele => ({
            ...ele,
            leaf: level >= stop_level
          })));
        };

        if (level === 0) {
          axios.get(`${baseUrl}/getProvince`).then(res => {
            list = res.data;
            callback();
          });
        } else 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>