weixin_30493401
weixin_30493401

Cascader 级联选择器

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

基础用法

有两种触发子菜单的方式

只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。

通过expand-trigger可以定义展开子级菜单的触发方式。

本例还展示了change事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。


  默认 click 触发子菜单
  
  




  hover 触发子菜单

　　

禁用选项

通过在数据源中设置 disabled 字段来声明该选项是禁用的

本例中，options指定的数组中的第一个元素含有disabled: true键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的disabled字段是否为true，如果你的数据中表示禁用含义的字段名不为disabled，可以通过props属性来指定（详见下方 API 表格）。当然，value、label和children这三个字段名也可以通过同样的方式指定。

  1 <el-cascader
  2   :options="optionsWithDisabled"
  3 >el-cascader>
  4 <script>
  5   export default {
  6     data() {
  7       return {
  8         optionsWithDisabled: [{
  9           value: 'zhinan',
 10           label: '指南',
 11           disabled: true,
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '设计原则',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反馈'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '导航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '侧向导航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '顶部导航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '组件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字体'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 图标'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按钮'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 单选框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多选框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 输入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 计数器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 选择器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 级联选择器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 开关'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑块'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 时间选择器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期选择器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期时间选择器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上传'
100             }, {
101               value: 'rate',
102               label: 'Rate 评分'
103             }, {
104               value: 'form',
105               label: 'Form 表单'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 标签'
116             }, {
117               value: 'progress',
118               label: 'Progress 进度条'
119             }, {
120               value: 'tree',
121               label: 'Tree 树形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分页'
125             }, {
126               value: 'badge',
127               label: 'Badge 标记'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加载'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 弹框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 导航菜单'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 标签页'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜单'
163             }, {
164               value: 'steps',
165               label: 'Steps 步骤条'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 对话框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 弹出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走马灯'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折叠面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '资源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '组件交互文档'
202           }]
203         }]
204       };
205     }
206   };
207 script>
View Code

 

仅显示最后一级

可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。

属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

  1 <el-cascader
  2   :options="options"
  3   :show-all-levels="false"
  4 >el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '设计原则',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反馈'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '导航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '侧向导航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '顶部导航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '组件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字体'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 图标'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按钮'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 单选框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多选框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 输入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 计数器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 选择器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 级联选择器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 开关'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑块'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 时间选择器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期选择器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期时间选择器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上传'
100             }, {
101               value: 'rate',
102               label: 'Rate 评分'
103             }, {
104               value: 'form',
105               label: 'Form 表单'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 标签'
116             }, {
117               value: 'progress',
118               label: 'Progress 进度条'
119             }, {
120               value: 'tree',
121               label: 'Tree 树形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分页'
125             }, {
126               value: 'badge',
127               label: 'Badge 标记'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加载'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 弹框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 导航菜单'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 标签页'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜单'
163             }, {
164               value: 'steps',
165               label: 'Steps 步骤条'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 对话框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 弹出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走马灯'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折叠面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '资源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '组件交互文档'
202           }]
203         }]
204       };
205     }
206   };
207 script>
View Code

 

默认值

默认值通过数组的方式指定。

  1 <el-cascader
  2   :options="options"
  3   v-model="selectedOptions3"
  4 >el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '设计原则',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反馈'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '导航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '侧向导航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '顶部导航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '组件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字体'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 图标'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按钮'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 单选框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多选框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 输入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 计数器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 选择器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 级联选择器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 开关'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑块'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 时间选择器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期选择器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期时间选择器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上传'
100             }, {
101               value: 'rate',
102               label: 'Rate 评分'
103             }, {
104               value: 'form',
105               label: 'Form 表单'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 标签'
116             }, {
117               value: 'progress',
118               label: 'Progress 进度条'
119             }, {
120               value: 'tree',
121               label: 'Tree 树形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分页'
125             }, {
126               value: 'badge',
127               label: 'Badge 标记'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加载'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 弹框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 导航菜单'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 标签页'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜单'
163             }, {
164               value: 'steps',
165               label: 'Steps 步骤条'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 对话框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 弹出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走马灯'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折叠面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '资源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '组件交互文档'
202           }]
203         }],
204         selectedOptions3: ['zujian', 'data', 'tag']
205       };
206     }
207   };
208 script>
View Code

 

选择即改变

点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。

若需要允许用户选择任意一级选项，则可将change-on-select赋值为true

  1 <el-cascader
  2   :options="options"
  3   change-on-select
  4 >el-cascader>
  5 <script>
  6   export default {
  7     data() {
  8       return {
  9         options: [{
 10           value: 'zhinan',
 11           label: '指南',
 12           children: [{
 13             value: 'shejiyuanze',
 14             label: '设计原则',
 15             children: [{
 16               value: 'yizhi',
 17               label: '一致'
 18             }, {
 19               value: 'fankui',
 20               label: '反馈'
 21             }, {
 22               value: 'xiaolv',
 23               label: '效率'
 24             }, {
 25               value: 'kekong',
 26               label: '可控'
 27             }]
 28           }, {
 29             value: 'daohang',
 30             label: '导航',
 31             children: [{
 32               value: 'cexiangdaohang',
 33               label: '侧向导航'
 34             }, {
 35               value: 'dingbudaohang',
 36               label: '顶部导航'
 37             }]
 38           }]
 39         }, {
 40           value: 'zujian',
 41           label: '组件',
 42           children: [{
 43             value: 'basic',
 44             label: 'Basic',
 45             children: [{
 46               value: 'layout',
 47               label: 'Layout 布局'
 48             }, {
 49               value: 'color',
 50               label: 'Color 色彩'
 51             }, {
 52               value: 'typography',
 53               label: 'Typography 字体'
 54             }, {
 55               value: 'icon',
 56               label: 'Icon 图标'
 57             }, {
 58               value: 'button',
 59               label: 'Button 按钮'
 60             }]
 61           }, {
 62             value: 'form',
 63             label: 'Form',
 64             children: [{
 65               value: 'radio',
 66               label: 'Radio 单选框'
 67             }, {
 68               value: 'checkbox',
 69               label: 'Checkbox 多选框'
 70             }, {
 71               value: 'input',
 72               label: 'Input 输入框'
 73             }, {
 74               value: 'input-number',
 75               label: 'InputNumber 计数器'
 76             }, {
 77               value: 'select',
 78               label: 'Select 选择器'
 79             }, {
 80               value: 'cascader',
 81               label: 'Cascader 级联选择器'
 82             }, {
 83               value: 'switch',
 84               label: 'Switch 开关'
 85             }, {
 86               value: 'slider',
 87               label: 'Slider 滑块'
 88             }, {
 89               value: 'time-picker',
 90               label: 'TimePicker 时间选择器'
 91             }, {
 92               value: 'date-picker',
 93               label: 'DatePicker 日期选择器'
 94             }, {
 95               value: 'datetime-picker',
 96               label: 'DateTimePicker 日期时间选择器'
 97             }, {
 98               value: 'upload',
 99               label: 'Upload 上传'
100             }, {
101               value: 'rate',
102               label: 'Rate 评分'
103             }, {
104               value: 'form',
105               label: 'Form 表单'
106             }]
107           }, {
108             value: 'data',
109             label: 'Data',
110             children: [{
111               value: 'table',
112               label: 'Table 表格'
113             }, {
114               value: 'tag',
115               label: 'Tag 标签'
116             }, {
117               value: 'progress',
118               label: 'Progress 进度条'
119             }, {
120               value: 'tree',
121               label: 'Tree 树形控件'
122             }, {
123               value: 'pagination',
124               label: 'Pagination 分页'
125             }, {
126               value: 'badge',
127               label: 'Badge 标记'
128             }]
129           }, {
130             value: 'notice',
131             label: 'Notice',
132             children: [{
133               value: 'alert',
134               label: 'Alert 警告'
135             }, {
136               value: 'loading',
137               label: 'Loading 加载'
138             }, {
139               value: 'message',
140               label: 'Message 消息提示'
141             }, {
142               value: 'message-box',
143               label: 'MessageBox 弹框'
144             }, {
145               value: 'notification',
146               label: 'Notification 通知'
147             }]
148           }, {
149             value: 'navigation',
150             label: 'Navigation',
151             children: [{
152               value: 'menu',
153               label: 'NavMenu 导航菜单'
154             }, {
155               value: 'tabs',
156               label: 'Tabs 标签页'
157             }, {
158               value: 'breadcrumb',
159               label: 'Breadcrumb 面包屑'
160             }, {
161               value: 'dropdown',
162               label: 'Dropdown 下拉菜单'
163             }, {
164               value: 'steps',
165               label: 'Steps 步骤条'
166             }]
167           }, {
168             value: 'others',
169             label: 'Others',
170             children: [{
171               value: 'dialog',
172               label: 'Dialog 对话框'
173             }, {
174               value: 'tooltip',
175               label: 'Tooltip 文字提示'
176             }, {
177               value: 'popover',
178               label: 'Popover 弹出框'
179             }, {
180               value: 'card',
181               label: 'Card 卡片'
182             }, {
183               value: 'carousel',
184               label: 'Carousel 走马灯'
185             }, {
186               value: 'collapse',
187               label: 'Collapse 折叠面板'
188             }]
189           }]
190         }, {
191           value: 'ziyuan',
192           label: '资源',
193           children: [{
194             value: 'axure',
195             label: 'Axure Components'
196           }, {
197             value: 'sketch',
198             label: 'Sketch Templates'
199           }, {
200             value: 'jiaohu',
201             label: '组件交互文档'
202           }]
203         }]
204       };
205     }
206   };
207 script>
View Code

 

动态加载次级选项

当选中某一级时，动态加载该级下的选项。

本例的选项数据源在初始化时不包含城市数据。利用active-item-change事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了props属性的用法。

　　

可搜索

可以快捷地搜索选项并选择。

将filterable赋值为true即可打开搜索功能。

  1 <div class="block">
  2   <span class="demonstration">只可选择最后一级菜单的选项span>
  3   <el-cascader
  4     placeholder="试试搜索：指南"
  5     :options="options"
  6     filterable
  7   >el-cascader>
  8 div>
  9 <div class="block">
 10   <span class="demonstration">可选择任意一级菜单的选项span>
 11   <el-cascader
 12     placeholder="试试搜索：指南"
 13     :options="options"
 14     filterable
 15     change-on-select
 16   >el-cascader>
 17 div>
 18 
 19 <script>
 20   export default {
 21     data() {
 22       return {
 23         options: [{
 24           value: 'zhinan',
 25           label: '指南',
 26           children: [{
 27             value: 'shejiyuanze',
 28             label: '设计原则',
 29             children: [{
 30               value: 'yizhi',
 31               label: '一致'
 32             }, {
 33               value: 'fankui',
 34               label: '反馈'
 35             }, {
 36               value: 'xiaolv',
 37               label: '效率'
 38             }, {
 39               value: 'kekong',
 40               label: '可控'
 41             }]
 42           }, {
 43             value: 'daohang',
 44             label: '导航',
 45             children: [{
 46               value: 'cexiangdaohang',
 47               label: '侧向导航'
 48             }, {
 49               value: 'dingbudaohang',
 50               label: '顶部导航'
 51             }]
 52           }]
 53         }, {
 54           value: 'zujian',
 55           label: '组件',
 56           children: [{
 57             value: 'basic',
 58             label: 'Basic',
 59             children: [{
 60               value: 'layout',
 61               label: 'Layout 布局'
 62             }, {
 63               value: 'color',
 64               label: 'Color 色彩'
 65             }, {
 66               value: 'typography',
 67               label: 'Typography 字体'
 68             }, {
 69               value: 'icon',
 70               label: 'Icon 图标'
 71             }, {
 72               value: 'button',
 73               label: 'Button 按钮'
 74             }]
 75           }, {
 76             value: 'form',
 77             label: 'Form',
 78             children: [{
 79               value: 'radio',
 80               label: 'Radio 单选框'
 81             }, {
 82               value: 'checkbox',
 83               label: 'Checkbox 多选框'
 84             }, {
 85               value: 'input',
 86               label: 'Input 输入框'
 87             }, {
 88               value: 'input-number',
 89               label: 'InputNumber 计数器'
 90             }, {
 91               value: 'select',
 92               label: 'Select 选择器'
 93             }, {
 94               value: 'cascader',
 95               label: 'Cascader 级联选择器'
 96             }, {
 97               value: 'switch',
 98               label: 'Switch 开关'
 99             }, {
100               value: 'slider',
101               label: 'Slider 滑块'
102             }, {
103               value: 'time-picker',
104               label: 'TimePicker 时间选择器'
105             }, {
106               value: 'date-picker',
107               label: 'DatePicker 日期选择器'
108             }, {
109               value: 'datetime-picker',
110               label: 'DateTimePicker 日期时间选择器'
111             }, {
112               value: 'upload',
113               label: 'Upload 上传'
114             }, {
115               value: 'rate',
116               label: 'Rate 评分'
117             }, {
118               value: 'form',
119               label: 'Form 表单'
120             }]
121           }, {
122             value: 'data',
123             label: 'Data',
124             children: [{
125               value: 'table',
126               label: 'Table 表格'
127             }, {
128               value: 'tag',
129               label: 'Tag 标签'
130             }, {
131               value: 'progress',
132               label: 'Progress 进度条'
133             }, {
134               value: 'tree',
135               label: 'Tree 树形控件'
136             }, {
137               value: 'pagination',
138               label: 'Pagination 分页'
139             }, {
140               value: 'badge',
141               label: 'Badge 标记'
142             }]
143           }, {
144             value: 'notice',
145             label: 'Notice',
146             children: [{
147               value: 'alert',
148               label: 'Alert 警告'
149             }, {
150               value: 'loading',
151               label: 'Loading 加载'
152             }, {
153               value: 'message',
154               label: 'Message 消息提示'
155             }, {
156               value: 'message-box',
157               label: 'MessageBox 弹框'
158             }, {
159               value: 'notification',
160               label: 'Notification 通知'
161             }]
162           }, {
163             value: 'navigation',
164             label: 'Navigation',
165             children: [{
166               value: 'menu',
167               label: 'NavMenu 导航菜单'
168             }, {
169               value: 'tabs',
170               label: 'Tabs 标签页'
171             }, {
172               value: 'breadcrumb',
173               label: 'Breadcrumb 面包屑'
174             }, {
175               value: 'dropdown',
176               label: 'Dropdown 下拉菜单'
177             }, {
178               value: 'steps',
179               label: 'Steps 步骤条'
180             }]
181           }, {
182             value: 'others',
183             label: 'Others',
184             children: [{
185               value: 'dialog',
186               label: 'Dialog 对话框'
187             }, {
188               value: 'tooltip',
189               label: 'Tooltip 文字提示'
190             }, {
191               value: 'popover',
192               label: 'Popover 弹出框'
193             }, {
194               value: 'card',
195               label: 'Card 卡片'
196             }, {
197               value: 'carousel',
198               label: 'Carousel 走马灯'
199             }, {
200               value: 'collapse',
201               label: 'Collapse 折叠面板'
202             }]
203           }]
204         }, {
205           value: 'ziyuan',
206           label: '资源',
207           children: [{
208             value: 'axure',
209             label: 'Axure Components'
210           }, {
211             value: 'sketch',
212             label: 'Sketch Templates'
213           }, {
214             value: 'jiaohu',
215             label: '组件交互文档'
216           }]
217         }]
218       };
219     }
220   };
221 script>
View Code

 

Attributes

参数 说明 类型 可选值 默认值
options 可选项数据源，键名可通过 props 属性配置 array — —
props 配置选项，具体见下表 object — —
value 选中项绑定值 array — —
separator 选项分隔符 string — 斜杠'/'
popper-class 自定义浮层类名 string — —
placeholder 输入框占位文本 string — 请选择
disabled 是否禁用 boolean — false
clearable 是否支持清空选项 boolean — false
expand-trigger 次级菜单的展开方式 string click / hover click
show-all-levels 输入框中是否显示选中值的完整路径 boolean — true
filterable 是否可搜索选项 boolean — —
debounce 搜索关键词输入的去抖延迟，毫秒 number — 300
change-on-select 是否允许选择任意一级的选项 boolean — false
size 尺寸 string medium / small / mini —
before-filter 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 function(value) — —

props

参数 说明 类型 可选值 默认值
value 指定选项的值为选项对象的某个属性值 string — —
label 指定选项标签为选项对象的某个属性值 string — —
children 指定选项的子选项为选项对象的某个属性值 string — —
disabled 指定选项的禁用为选项对象的某个属性值 string — —

Events

事件名称 说明 回调参数
change 当绑定值变化时触发的事件 当前值
active-item-change 当父级选项变化时触发的事件，仅在 change-on-select为 false 时可用 各父级选项组成的数组
blur 在 Cascader 失去焦点时触发 (event: Event)
focus 在 Cascader 获得焦点时触发 (event: Event)

转载于:https://www.cnblogs.com/grt322/p/8553319.html

你可能感兴趣的:(Cascader 级联选择器)

  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
    爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • Prometheus运维六 PromQL查询语言详解及操作 安顾里 Prometheus监控类大数据kubernetes运维linux
    海阔凭鱼跃，天高任鸟飞Prometheus官网：https://prometheus.io/文章目录1.什么是PromQL?2.PromQL的基本使用2.1时间序列选择器2.1.1瞬时向量选择器2.2区间向量选择器2.2.1范围向量选择器2.2.2时间位移操作2.2.3使用聚合操作2.3标量和字符串3.PromQL操作符4.内置常用函数5.HTTPAPI操作PromQL6.使用建议1.什么是Pro
  • 交换机级联 weixin_33701251
    一、级联简介级联是交换机组网的一种结构，级联技术可以实现两台或两台以上交换机之间的互联，在多种网络中被广泛应用二、简单实验实验拓扑：1-1，1-2，1-3三台交换机级联至1-3；2-1，2-2两台级联至2-2；1-3和2-2上联至HX，所有网段网关都在HX上。Server1A：10.3.1.1/2410.3.1.254vlan10Server1B：10.3.1.2/2410.3.1.254vlan
  • 【Java实战】使用自定义注解实现参数校验详解 .猫的树 【Java实战】系列java自定义注解参数校验
    文章目录前言一、Java注解简介二、启用注解校验1.启用注解2.注解@Valid和@Validated2.1@Valid级联校验2.2@Validated高级使用三、自定义注解1.统一异常处理2.编写注解2.1自定义校验2.2多参数校验2.3列表校验总结前言由于实际开发中遇到大量相同的条件参数验证，不想写重复代码及让代码看起来更加优雅简洁，所以决定使用自定义注解进行参数校验一、Java注解简介Ja
  • vue3 内置组件＜Teleport＞ fishmemory7sec vue3vue.js前端
    官方文档：Teleport内置组件将一个组件的模板内容渲染到指定的DOM节点位置，而不是在组件自身的挂载点。组件的参数说明：to：必填项。指定目标容器。可以是选择器或实际元素。类型：string|HTMLElement作用：指定要将内容传送（teleport）到的目标位置。可以是一个CSS选择器字符串，用于选择一个现存的DOM元素，也可以是一个实际的DOM元素对象引用。示例：disabled：可选
  • 前端学习之三种css样式写法 MissPSTime
    选择器/*内嵌式样式书写*/-->，不使用-->后代选择器标签选择器标签选择器标签选择器
  • 电源管理芯片4644关键指标及测试方法 国科安芯 产品fpga开发嵌入式硬件硬件工程
    以国科安芯(ANSILIC)推出四通道输出降压微型模块稳压器ASP4644为例，该器件支持多路级联输出最高16A。工程师可以快速设计出满足FPGA、ASIC和微处理器等多种电压和负载电流要求驱动，ASP4644模块稳压器包括DC/DC控制器、电源开关、电感器和补偿组件，采用BGA封装。仅需8个外部陶瓷电容器和4个反馈电阻器就能调节4个可独立地调整并介于0.6V至5.5V的输出。单独的输入引脚使4个
  • angular的viewChild和viewChildren yang295242361 angular.jsjavascript前端
    属性选择器，用来从模板视图上获取匹配的元素。可以在ngAfterViewInit中获取到查询的元素。格式：ViewChild(selector:string|Function|Type,opts?:{read?:any;static?:boolean}):any1：元数据属性selector:用于查询指令类型或名字。read:告诉viewChild返回什么类型的数据，取值可以是ElementRef
  • 如何将dom转化为pdf Olivia小饼干 javascripthtmldom
    1.先局部打印方法一：通过id选择器来替换内容打印2.这样打印转化成PDF是调用浏览器默认的功能存在的问题就是echarts生成的canvas显示不出来这样就要到以下方法:3.htmljs打印图片不显示canvas将canvas转化成base64用img标签显示出来4.浏览器默认的打印可以转化成PDF,选中就行了
  • CSS思维导图 weixin_45544617 html前端css
    一、概念css——cascadingstylesheet（层叠样式表）作用：规定html元素如何在网页中显示特点：实现了结构与表现相分离（可维护性更高）二、css语法选择器{属性:属性值;}eg:h1{color:red;}三、样式表的创建1.行内样式（内联样式）eg:hello2.内部样式（嵌入式样式）eg:h1{color:red;}注：建议将style标签放在head部分3.外部样式表首先创
  • vue2快速入门 m0_66357705 vue.js前端javascript
    vue2创建HTML界面，引用Vue.js文件 编写视图      {{message}}       {{type}}:插值表达式变量三元运算符函数调用算数运算在JS代码区域,创建Vue核心对象,定义数据模型     --> ​  //创建一个新的Vue实例 newVue({  //指定Vue实例挂载到的DOM元素，使用'#app'选择器找到id为app的元素  el:"#app",    //
  • VUE3学习路线 蜡笔小新星 Vue学习vue经验分享
    以下是一份详细的Vue3学习路线，涵盖从基础到进阶的各个方面，以帮助你系统掌握Vue3开发。第一阶段：基础知识理解前端基础HTML:了解文档结构，常用标签，语义化HTML。CSS:学习选择器、布局、Flexbox和Grid，基本的样式应用。JavaScript:理解基本语法、DOM操作、事件处理、异步编程（Promises,async/await），以及ES6+特性（如箭头函数、解构赋值、模块化）
  • CSS学习14[重点]--定位、边偏移、定位模式 乌鸦不像写字台 css学习css学习前端
    定位前言一、定位二、定位模式1.静态定位static2.相对定位relative3.绝对定位absolute4.子绝父相5.绝对定位的盒子水平居中6.固定定位（fixed）7.叠放次序（z）三、四种定位总结四、定位模式转换前言为什么学习定位？应用场景：图片上移动的物体、突出的部分、导航栏…一、定位边偏移top:100px;bottom:;left:;right:;定位模式选择器{position:
  • CSS基本语法结构 nice66660 css前端开发语言javaidea算法数据结构
    1.CSS基本语法结构文章目录1.CSS基本语法结构2.HTML中引入CSS样式2.1行内样式2.2内部样式表2.3外部样式表2.3.1链接式2.3.2导入式2.4CSS基本选择器2.4.1标签选择器2.4.2类选择器2.4.3ID选择器3.CSS的高级选择器3.1层次选择器3.1.1后代选择器3.1.2子代选择器3.1.3相邻兄弟选择器3.1.4通用兄弟选择器3.2结构伪类选择器3.3属性选择器
  • jQuery选择器 VaporGas 前端jquery前端javascript学习
    jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
  • css3动画延迟运行 animation-delay 努力，加油，奋斗 笔记
    1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
  • CSS前端经典面试题及解析——小白入门必备 2301_82243710 程序员前端css
    12.如何实现一个使用非标准字体的网页设计？使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从DOM中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。例如，对于形如
  • 前端基础面试题·第二篇——CSS（其二） DT—— 前端面试前端css
    1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
  • 【LangChain】使用LangChain的提示词模板：技巧与总结 子夜时辰 LangChain的学习langchainjavascriptnode.jsAIGCchatgpt
    作者简介：前端开发爱好者，致力学习前端开发技术⭐️个人主页：夜宵饽饽的主页❔系列专栏：JavaScript小贴士学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气前言：这里是关于LangChain框架中的提示词模板使用的技巧，希望可以帮助到大家，欢迎大家的补充和纠正文章目录一、使用LangChain的提示词模板：技巧与总结1、格式化示例集2、示例选择器来组合提示词模板3、在聊天模型中
  • 十年一剑，一朝封王 Syvi
    2018年11月7日，注定是中国足球职业联赛历史上具有重要历史意义的一天。上海上港提前一轮夺得了中国男子足球超级联赛（中超）冠军！此前这一冠军头衔已经被广州恒大淘宝队连续7年获得。恒大2010年入主广州足球时，恰逢足球反腐后期，经过大地震的中国职业足球联赛陷入低估，后备力量断代，资本投资信心全无。此时的恒大背靠房地产的雄厚资金，现代化企业的管理模式，迅速崛起。那一年，武磊、张琳芃、蔡慧康等还在范志
  • ElementUI Cascader 级联选择器实现点击文本选中 阿程_88 #ElementUIelementui
    一、遇到的问题使用官方案例级联选择器时，只有点击前面小圆点才能选中，点击文本无法选中。二、需求级联选择器各层级都能选中，并且点击文本也能选中三、相关代码//级联选择器自定义浮层类名，实现前面单选框隐藏，点击文本即可选中功能.popper-custom{.el-cascader-panel{.el-cascader-menu{.el-radio{height:100%;width:150px;opa
  • elementui Cascader 级联选择器的使用总结 XUE_雪 elementui前端javascript
    实现效果技术要点总结如下：1、点击添加自动增加多行，实现自主选择增加多条节点数据2、节点地址使用的是Cascader级联选择器，需要动态生成，涉及到一个技术要点是：因v-modal只能获取value不能获取label，故需要解决在多个动态生成的Cascader分别获取他们选中的label和value,下面开始展示相关代码：html:添加删除确定取消js:handleChange(index){va
  • CSS样式的引用方式以及选择器使用 爱掉发的小龙 css前端开发语言java后端小程序笔记
    1.CSS引用方式CSS可以通过三种方式引用到HTML文件中：行内样式（InlineStyles）：直接在HTML元素中定义样式。内部样式表（InternalCSS）：在HTML文档的部分使用标签定义样式。外部样式表（ExternalCSS）：将样式写在单独的.css文件中，并通过标签进行引用。示例：CSS示例body{background-color:#f0f0f0;font-family:Ar
  • JavaScript - Api学习 Day1（WebApi、操作DOM对象） 你会魔法吗✧(≖ ◡ ≖✿) HTML+CSS+JSjavascript学习开发语言
    应用编程接口(API)是编程语言中提供的结构，允许开发者更轻松地创建复杂的功能。、webapi是一套操作网页内容(DOM)与浏览器窗口(BOM)的对象Js由ECMAScript、DOM、BOM三个部分组成。文章目录零、前言0.1变量声明壹、WebAPI的认识1.1作用1.2什么是DOM1.3什么是DOM对象主要概念：示例代码：二、获取DOM对象2.1根据CSS选择器获取DOM元素2.1.1`que
  • 节点选择(NodeSelector、NodeAffinity) 大江东去了吗 kubernetes容器云原生
    节点选择器NodeSelectorNodeSelector会将Pod根据定义的标签选定到匹配的Node上去。示例：cat>nodeselector.yamlnodeAffinity.yaml<
  • vue 过滤器 王玉伟的伟
    过滤器Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示支持级联操作过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本全局注册时是filter，没有s的。而局部过滤器是filters，是有s的{{msg|upper}}{{msg|upper|l
  • armv8/armv9中断系列详解-软件篇-Linux kernel中断相关软件导读 代码改变世界ctw ARM-TEE-Androidirqarmv8armv9异常中断ARM代码改变世界
    快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:联系方式-加入交流群----联系方式-加入交流群个人博客笔记导读目录(全部)引流关键词:armv8,armv9,gic,gicv2,gicv3,异常,中断，irq,fiq,serror,sync，同步异常，异步异常，向量表，向量表基地址，VBAR，vbar_el3，中断嵌套，中断级联，LinuxKernel，
  • 微信小程序中如何监听元素进入目标元素 _处女座程序员的日常 微信小程序js交互微信小程序小程序
    Page({onLoad:function(){//如果目标节点（用选择器.target-class指定）进入显示区域以下100px时，就会触发回调函数。wx.createIntersectionObserver().relativeToViewport({bottom:100}).observe('.target-class',(res)=>{res.intersectionRatio//相交区
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他