Hawthorn-Api

# HtCascader 级联字典框

HtCascader 自定义输入框组件，基于el-cascader实现 Author andy.ten@tom.com & xukaixing@hotmail.com

# 示例

<template>
  <div>
    <ht-form ref-form="dictForm" :form-list="dictFormList" divider="级联字典组件" :form-style="{width:'800px'}" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      dictFormList: [
        {
          type: 'layer',
          format: [0, 'isAny', 30],
          label: '级联',
          options: '',
          field: 'xzqh4',
          change: (val) => this.handleCascaderCB(val)
        },
        {
          type: 'layer',
          format: [0, 'isAny', 30],
          label: '区划级联',
          options: 'xzqh',
          field: 'xzqh5',
          change: (val) => this.handleCascaderCB(val)
        },
        {
          type: 'layer',
          format: [0, 'isAny', 30],
          label: '区划级联2',
          options: 'xzqh-city',
          // lazy: true, // 懒加载方式
          // lazyLoad: (node, resolve) => {
          //   alert(11);
          // },
          field: 'xzqh6',
          change: (val) => this.handleCascaderCB(val)
        },
        {
          type: 'layer',
          format: [0, 'isAny', 30],
          label: '多选级联2',
          options: 'xzqh-city',
          multiple: true,
          // lazy: true, // 懒加载方式
          // lazyLoad: (node, resolve) => {
          //   alert(11);
          // },
          field: 'xzqh6',
          change: (val) => this.handleCascaderCB(val)
        }
      ]
    };
  },
  created(){
    const cascader = this.dictFormList.filter((x) => {
      if (x.field === 'xzqh4')
        return x;
    });
    if (cascader)
      cascader[0].options = [
        {
          value: 'f1',
          label: '一级1',
          children: [
            {
              value: 's1',
              label: '二级1',
              children: [
                {
                  value: 't1',
                  label: '三级1'
                }, {
                  value: 't2',
                  label: '三级2'
                }
              ]
            },
            {
              value: 's2',
              label: '二级',
              children: [
                {
                  value: 't22',
                  label: '三级22'
                }, {
                  value: 't23',
                  label: '三级23'
                }
              ]
            }
          ]
        },
        {
          value: 'f2',
          label: '一级2',
          children: [{
            value: 's3',
            label: '二级3'
          }, {
            value: 't33',
            label: '三级33'
          }, {
            value: 't34',
            label: '三级44'
          }]
        }
      ];
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
Expand Copy

# API

# Cascader Attributes

参数 说明 类型 可选值 默认值
vref 设置级联组件的ref属性 String — —
name 设置级联组件的name属性 String — —
value 设置级联的value属性 Array — —
options 设置级联的数组内容 String,Array — —
placeholder 设置placeholder属性 String — 请选择
disabled 设置disabled属性 Boolean,String true / false false
clearable 设置是否可清除内容 Boolean true / false true
visible 设置是否可见 Boolean true / false true
multiple 设置是否多选 Boolean true / false false
filterable 设置是否支持输入过滤 Boolean true / false true
showAllLevels 输入框中是否显示选中值的完整路径 Boolean true / false true
separator 选项分隔符 String — /
trigger 设置触发方式 String click / hover hover
lazy 设置是否懒加载 Boolean true / false false
lazyLoad 设置懒加载方法 Function — —

# Cascader Event

方法名 说明 参数
blur 获取失去焦点方法 (event)
change 获取选中字典后回调用方法 (val)

# 版本

  • v1.0.1

← HtCheckbox多选框 →