diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 559d8f9..88da54a 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -40,6 +40,7 @@ module.exports = { '/frontend/components/region-selector', '/frontend/components/search-form', '/frontend/components/upload-file', + '/frontend/components/tree-select', ] }, { diff --git a/docs/.vuepress/public/tree-select_multiple.png b/docs/.vuepress/public/tree-select_multiple.png new file mode 100644 index 0000000..59883f2 Binary files /dev/null and b/docs/.vuepress/public/tree-select_multiple.png differ diff --git a/docs/.vuepress/public/tree-select_single.png b/docs/.vuepress/public/tree-select_single.png new file mode 100644 index 0000000..fcb3826 Binary files /dev/null and b/docs/.vuepress/public/tree-select_single.png differ diff --git a/docs/frontend/README.md b/docs/frontend/README.md index 3d37384..0765e66 100644 --- a/docs/frontend/README.md +++ b/docs/frontend/README.md @@ -41,7 +41,7 @@ ## 目录结构 ``` ├── element-ui-personal # element-ui增强 -├── mock # 项目mock,需打开devServer.before的注释 +├── mock # 项目mock ├── public # 静态资源文件夹 ├── src │ ├── api # 数据请求集合 @@ -55,7 +55,8 @@ │ │ └── request.js # axios封装 │ ├── directive # 自定义指令集合 │ ├── filters # 自定义过滤器集合 -│ ├── layout # 布局文件夹,包含了导航栏、侧边栏、多页签、全局页脚、页面 +│ ├── globalMethods # 全局方法,使用this.$xx调用 +│ ├── layout # 布局文件夹,包含了导航栏、侧边栏、多页签、全局页脚 │ ├── mixins # 公用混入 │ ├── plugin # 一些插件,均使用import()来动态引入 │ ├── router diff --git a/docs/frontend/components/tree-select.md b/docs/frontend/components/tree-select.md new file mode 100644 index 0000000..cbe0245 --- /dev/null +++ b/docs/frontend/components/tree-select.md @@ -0,0 +1,49 @@ +# 树选择 + +基于 `` 和 ``,实现单选和多选。 + +
+ + +
+ + +### 引入: + +`@/components/TreeSelect` + +### 使用: +```html + +``` + +### TreeSelect Attributes: + +| 参数 | 说明 | 类型 | 默认 | +| :-----------------: | :-------------------------------------: | :--------: | :---: | +| value / v-model | 绑定值,多选时需要是array类型 | - | - | +| data | 等同于`el-tree`的`data ` | - | - | +| multiple | 是否多选 | `boolean` | - | +| disabled | 等同于`el-select` | `boolean` | - | +| size | 等同于`el-select` | `string` | - | +| clearable | 等同于`el-select` | `boolean` | true | +| placeholder | 等同于`el-select` | `string` | - | +| filterable | 是否显示用于筛选的输入框 | `boolean` | - | +| filter-method | 等同于`el-tree`的`filter-node-method` | `function` | - | +| node-key | 等同于`el-tree` | `string` | 'id' | +| props | 等同于`el-tree` | `object` | - | +| accordion | 等同于`el-tree` | `boolean` | true | +| popperAppendToBody | 等同于`el-select` | `boolean` | - | +| automaticDropdown | 等同于`el-select` | `boolean` | - | + +### TreeSelect Events: + +| 事件名称 | 说明 | +| :------: | :---------------: | +| input | 等同于`el-select` | +| change | 等同于`el-select` | + + +::: tip +使用多选时,如果value数组中有父节点但无子节点,会出现看上去父子全选中,但实际只选了父节点的情况 +::: diff --git a/docs/frontend/layout.md b/docs/frontend/layout.md index ae37047..fb7b189 100644 --- a/docs/frontend/layout.md +++ b/docs/frontend/layout.md @@ -35,8 +35,9 @@ 重复点击菜单可刷新路由,折叠时可以选择是否在折叠菜单上显示父级。 -侧边栏的滚动分两种情况,一种是整体的滚动,这是用 `` 做的,不过缺点就是移动端体验不好。 -另一种是弹出菜单的滚动,这是用 `css` 做的,不用 `` 是因为没办法避免bug,具体原因可以去看element-ui的 `submenu #handleMouseleave`。 +侧边栏的滚动分两种情况,一种是整体的滚动,这是用 `` 做的。 +另一种是弹出菜单的滚动,这是用 `css` 做的,不用 `` 是因为没办法避免bug, +具体原因可以去看element-ui的 ` #handleMouseleave`。 ## 全局页脚