├── src
    ├── xlsx.d.ts
    ├── lodash.d.ts
    ├── sortable.d.ts
    ├── require.d.ts
    ├── assets
    │   └── imgs
    │   │   └── green.png
    ├── components
    │   ├── NodeCascader
    │   │   ├── components
    │   │   │   ├── index.ts
    │   │   │   └── node-item.vue
    │   │   └── index.vue
    │   ├── Cascader
    │   │   ├── components
    │   │   │   ├── index.ts
    │   │   │   ├── filter-item.vue
    │   │   │   └── cascader-item.vue
    │   │   └── index.vue
    │   ├── index.ts
    │   ├── Table
    │   │   ├── style
    │   │   │   └── index.scss
    │   │   ├── index.vue
    │   │   └── recursiveRow.vue
    │   └── Upload
    │   │   └── index.vue
    ├── shims-vue.d.ts
    ├── index.js
    ├── store
    │   └── index.ts
    ├── import-png.d.ts
    ├── router
    │   └── index.ts
    ├── mock
    │   ├── upload
    │   │   └── index.js
    │   ├── cascader
    │   │   └── index.js
    │   └── table
    │   │   └── index.js
    ├── shims-tsx.d.ts
    ├── main.ts
    ├── App.vue
    ├── example
    │   ├── upload
    │   │   └── index.vue
    │   ├── cascader
    │   │   └── index.vue
    │   └── table
    │   │   └── index.vue
    └── mixins
    │   └── uploadXlsx.ts
├── cypress.json
├── .DS_Store
├── babel.config.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── jest.config.js
├── .gitignore
├── README.md
├── tsconfig.json
├── LICENSE
├── vue.config.js
└── package.json


/src/xlsx.d.ts:
--------------------------------------------------------------------------------
1 | declare module "xlsx";
2 | 


--------------------------------------------------------------------------------
/src/lodash.d.ts:
--------------------------------------------------------------------------------
1 | declare module "lodash";
2 | 


--------------------------------------------------------------------------------
/src/sortable.d.ts:
--------------------------------------------------------------------------------
1 | declare module "sortablejs";
2 | 


--------------------------------------------------------------------------------
/src/require.d.ts:
--------------------------------------------------------------------------------
1 | declare function require(string): string;
2 | 


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "pluginsFile": "tests/e2e/plugins/index.js"
3 | }
4 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hhl-web/vue-ts-components/HEAD/.DS_Store


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hhl-web/vue-ts-components/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/imgs/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hhl-web/vue-ts-components/HEAD/src/assets/imgs/green.png


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
3 | };
4 | 


--------------------------------------------------------------------------------
/src/components/NodeCascader/components/index.ts:
--------------------------------------------------------------------------------
1 | import nodeItem from "./node-item.vue";
2 | export { nodeItem };
3 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | //该声明文件是告诉TS以.vue为后缀的文件交给vue模块处理，文件中的vue是指vue的实例
2 | declare module "*.vue" {
3 |   import Vue from "vue";
4 |   export default Vue;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/Cascader/components/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import CascaderItem from "./cascader-item.vue";
3 | import FilterItem from "./filter-item.vue";
4 | export { CascaderItem, FilterItem };
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Table from "./example/table/index.vue";
2 | import Cascader from "./example/cascader/index.vue";
3 | import Upload from "./example/upload/index.vue";
4 | 
5 | export { Table, Cascader, Upload };
6 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {},
 8 |   mutations: {},
 9 |   actions: {},
10 |   modules: {}
11 | });
12 | 


--------------------------------------------------------------------------------
/src/import-png.d.ts:
--------------------------------------------------------------------------------
 1 | // declare module "*.svg";
 2 | // declare module "*.png";
 3 | // declare module "*.jpg";
 4 | // declare module "*.jpeg";
 5 | // declare module "*.gif";
 6 | // declare module "*.bmp";
 7 | // declare module "*.tiff";
 8 | 
 9 | declare module "*.png" {
10 |   const value: any;
11 |   export default value;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | const EventBus = new Vue();
3 | import Table from "./Table/index.vue";
4 | import UploadXlsx from "./Upload/index.vue";
5 | import Cascader from "./Cascader/index.vue";
6 | import NodeCascader from "./NodeCascader/index.vue";
7 | export { Table, UploadXlsx, EventBus, Cascader, NodeCascader };
8 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter, { RouteConfig } from "vue-router";
 3 | 
 4 | Vue.use(VueRouter);
 5 | 
 6 | const routes: Array<RouteConfig> = [];
 7 | 
 8 | const router = new VueRouter({
 9 |   mode: "history",
10 |   base: process.env.BASE_URL,
11 |   routes
12 | });
13 | 
14 | export default router;
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/mock/upload/index.js:
--------------------------------------------------------------------------------
1 | export const _headerStr = [
2 |   { str: "一级分类ID", key: "frontend_category_lv1", type: "number" },
3 |   { str: "二级分类ID", key: "frontend_category_lv2", type: "number" },
4 |   { str: "三级分类ID", key: "frontend_category_lv3", type: "number" },
5 |   { str: "商品名称", key: "product_name", type: "string" },
6 |   { str: "商品ID", key: "product_id", type: "number" }
7 | ];
8 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from "vue";
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import store from "./store";
 5 | import ElementUI from "element-ui";
 6 | import "element-ui/lib/theme-chalk/index.css";
 7 | 
 8 | Vue.use(ElementUI);
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | new Vue({
13 |   router,
14 |   store,
15 |   render: h => h(App)
16 | }).$mount("#app");
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-ts-components
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Table></Table>
 4 |     <Cascader></Cascader>
 5 |     <Upload></Upload>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import { Component, Prop, Vue } from "vue-property-decorator";
10 | import { Table, Cascader, Upload } from "./index";
11 | @Component({
12 |   name: "App",
13 |   components: {
14 |     Table,
15 |     Cascader,
16 |     Upload
17 |   }
18 | })
19 | export default class extends Vue {}
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/Table/style/index.scss:
--------------------------------------------------------------------------------
 1 | .cell {
 2 |     display: inline-block;
 3 |     text-align: left;
 4 |     font-size: 12px;
 5 |     line-height: 38px;
 6 |     height: 38px;
 7 |     box-sizing: border-box;
 8 |     min-width: 10%;
 9 | }
10 | 
11 | .el-input {
12 |     max-width: 10%;
13 | }
14 | 
15 | .content {
16 |     margin: 10px auto;
17 |     .header {
18 |         background: #eee;
19 |     }
20 | }
21 | 
22 | .footer {
23 |     text-align: right;
24 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/example/upload/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <UploadXlsx
 4 |       start="A"
 5 |       end="H"
 6 |       :headerStr="headerStr"
 7 |       :callback="handlerRequest"
 8 |     ></UploadXlsx>
 9 |   </div>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import { Component, Ref, Vue } from "vue-property-decorator";
14 | import { UploadXlsx } from "../../components/index";
15 | import { _headerStr } from "../../mock/upload";
16 | @Component({
17 |   name: "App",
18 |   components: {
19 |     UploadXlsx
20 |   }
21 | })
22 | export default class extends Vue {
23 |   @Ref() table: any;
24 |   private headerStr = _headerStr;
25 |   // 请求函数
26 |   handlerRequest(arg: any) {
27 |     setTimeout(() => {
28 |       console.log(arg, "arg");
29 |       return 1;
30 |     }, 2000);
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "experimentalDecorators": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "sourceMap": true,
14 |     "baseUrl": ".",
15 |     "allowJs": true,
16 |     "checkJs": true,
17 |     "noImplicitThis": false,
18 |     "types": ["webpack-env"],
19 |     "paths": {
20 |       "@/*": ["src/*"]
21 |     },
22 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
23 |   },
24 |   "include": [
25 |     "src/**/*.ts",
26 |     "src/**/*.tsx",
27 |     "src/**/*.vue",
28 |     "tests/**/*.ts",
29 |     "tests/**/*.tsx"
30 |   ],
31 |   "exclude": ["node_modules"]
32 | }
33 | 


--------------------------------------------------------------------------------
/src/example/cascader/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Cascader
 4 |       :options="data"
 5 |       v-model="selelt"
 6 |       :props="{ value: 'id', label: 'text' }"
 7 |       :iptProps="{ size: 'small', placeholder: '请选择' }"
 8 |       filterable
 9 |       isInput
10 |       reverseChoice
11 |     ></Cascader>
12 |   </div>
13 | </template>
14 | 
15 | <script lang="ts">
16 | import { Component, Ref, Vue, Watch } from "vue-property-decorator";
17 | import { Cascader } from "../../components/index";
18 | import { data } from "../../mock/cascader";
19 | @Component({
20 |   name: "App",
21 |   components: { Cascader }
22 | })
23 | export default class extends Vue {
24 |   private data = data;
25 |   private selelt = [1, 1.1]; //最后一个子数据就可以完成双向绑定。 如果是一个数组呢？需要兼容是数组的情况
26 |   @Watch("selelt")
27 |   handler(newVal: any) {
28 |     console.log(newVal);
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/Cascader/components/filter-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="filter-item">
 3 |     <span
 4 |       class="filter-label"
 5 |       v-for="(item, index) in filterableOpt"
 6 |       :key="index"
 7 |       @click="onClickOpt(item)"
 8 |     >
 9 |       {{ item.labelPath }}</span
10 |     >
11 |   </div>
12 | </template>
13 | <script lang="ts">
14 | import {
15 |   Component,
16 |   Mixins,
17 |   Ref,
18 |   Prop,
19 |   Vue,
20 |   Watch
21 | } from "vue-property-decorator";
22 | @Component({
23 |   name: "filterItem"
24 | })
25 | export default class extends Vue {
26 |   @Prop({
27 |     type: Array,
28 |     default: () => []
29 |   })
30 |   filterableOpt: any;
31 | 
32 |   onClickOpt(item: any) {
33 |     this.$emit("onClickOpt", item);
34 |   }
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | .filter-item {
39 |   display: flex;
40 |   flex-direction: column;
41 |   width: 200px;
42 |   .filter-label {
43 |     height: 28px;
44 |     cursor: pointer;
45 |   }
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/NodeCascader/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-containor">
 3 |     <div class="node-header">
 4 |       <el-input></el-input>
 5 |     </div>
 6 |     <div class="node-content">
 7 |       <template v-for="(item, index) in options">
 8 |         <nodeItem :node="item" :key="index"></nodeItem>
 9 |       </template>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script lang="ts">
14 | import {
15 |   Component,
16 |   Mixins,
17 |   Ref,
18 |   Prop,
19 |   Vue,
20 |   Watch
21 | } from "vue-property-decorator";
22 | import nodeItem from "./components/node-item.vue";
23 | @Component({
24 |   name: "nodeCascader",
25 |   components: {
26 |     nodeItem
27 |   }
28 | })
29 | export default class extends Vue {
30 |   @Prop({
31 |     type: Array,
32 |     default: () => []
33 |   })
34 |   options: any;
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | .node-containor {
39 |   display: flex;
40 |   flex-direction: column;
41 |   .node-header {
42 |   }
43 |   .node-content {
44 |   }
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/NodeCascader/components/node-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="node-item">
 3 |     <div class="node-label">
 4 |       <label>{{ node.text }}</label>
 5 |     </div>
 6 |     <div v-if="node.children" class="sub-item">
 7 |       <div v-for="(item, index) in node.children" v-bind:key="index">
 8 |         <nodeItem :node="item"></nodeItem>
 9 |       </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script lang="ts">
14 | import {
15 |   Component,
16 |   Mixins,
17 |   Ref,
18 |   Prop,
19 |   Vue,
20 |   Watch
21 | } from "vue-property-decorator";
22 | @Component({
23 |   name: "nodeItem"
24 | })
25 | export default class extends Vue {
26 |   @Prop({
27 |     type: Object,
28 |     default: () => {}
29 |   })
30 |   node: any;
31 |   mounted() {
32 |     console.log(this.node);
33 |   }
34 | }
35 | </script>
36 | <style lang="scss" scoped>
37 | .node-item {
38 |   display: flex;
39 |   .node-label {
40 |     width: 180px;
41 |     padding: 5px;
42 |     font-size: 14px;
43 |   }
44 |   .sub-item {
45 |     display: flex;
46 |     flex-direction: column;
47 |   }
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Chong Guo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/mock/cascader/index.js:
--------------------------------------------------------------------------------
 1 | export const data = [
 2 |   {
 3 |     text: "指南",
 4 |     id: 2,
 5 |     children: [
 6 |       {
 7 |         text: "设计原则",
 8 |         id: 2.1,
 9 |         children: [
10 |           {
11 |             text: "导航1",
12 |             id: 2.112
13 |           },
14 |           {
15 |             text: "导航2",
16 |             id: 2.113
17 |           },
18 |           {
19 |             text: "导航3",
20 |             id: 2.114
21 |           }
22 |         ]
23 |       },
24 |       {
25 |         text: "设计原则2",
26 |         id: 2.2,
27 |         children: [
28 |           {
29 |             text: "导航2",
30 |             id: 2.21
31 |           }
32 |         ]
33 |       }
34 |     ]
35 |   },
36 |   {
37 |     text: "代买早餐1",
38 |     id: 1,
39 |     children: [
40 |       {
41 |         text: "肯德基",
42 |         id: 1.1
43 |       },
44 |       {
45 |         text: "汉堡",
46 |         id: 1.2
47 |       }
48 |     ]
49 |   },
50 |   {
51 |     text: "可控3",
52 |     children: [],
53 |     id: 3
54 |   },
55 |   {
56 |     text: "可控4",
57 |     children: [],
58 |     id: 4
59 |   },
60 |   {
61 |     text: "可控5",
62 |     children: [],
63 |     id: 5
64 |   },
65 |   {
66 |     text: "可控6",
67 |     children: [],
68 |     id: 6
69 |   },
70 |   {
71 |     text: "可控7",
72 |     children: [],
73 |     id: 7
74 |   },
75 |   {
76 |     text: "可控8",
77 |     children: [],
78 |     id: 8
79 |   }
80 | ];
81 | 


--------------------------------------------------------------------------------
/src/mock/table/index.js:
--------------------------------------------------------------------------------
 1 | export const tableData = [
 2 |   {
 3 |     id: 1,
 4 |     text: "父1",
 5 |     level: 1,
 6 |     type: "自然属性",
 7 |     manage_categories: "无",
 8 |     remark: "无",
 9 |     children: [
10 |       {
11 |         id: 1 - 1,
12 |         text: "子1",
13 |         level: 2,
14 |         type: "自然属性",
15 |         manage_categories: "无",
16 |         remark: "无",
17 |         children: [],
18 |         parent_id: 1
19 |       },
20 |       {
21 |         id: 1 - 2,
22 |         text: "子2",
23 |         level: 2,
24 |         type: "自然属性",
25 |         manage_categories: "无",
26 |         remark: "无",
27 |         parent_id: 1,
28 |         children: [
29 |           {
30 |             id: 1 - 2 - 1,
31 |             text: "子2-子1",
32 |             level: 3,
33 |             type: "自然属性",
34 |             manage_categories: "无",
35 |             remark: "无",
36 |             children: [],
37 |             parent_id: 1 - 2
38 |           },
39 |           {
40 |             id: 1 - 2 - 2,
41 |             text: "子2-子2",
42 |             level: 3,
43 |             type: "自然属性",
44 |             manage_categories: "无",
45 |             remark: "无",
46 |             children: [],
47 |             parent_id: 1 - 2
48 |           }
49 |         ]
50 |       }
51 |     ]
52 |   },
53 |   {
54 |     id: 2,
55 |     text: "父2",
56 |     level: 1,
57 |     type: "分类属性",
58 |     manage_categories: "无",
59 |     remark: "无",
60 | 
61 |     children: [
62 |       {
63 |         id: 2 - 1,
64 |         text: "父-子1",
65 |         level: 2,
66 |         type: "自然属性",
67 |         manage_categories: "无",
68 |         remark: "无",
69 |         children: [],
70 |         parent_id: 2
71 |       }
72 |     ]
73 |   }
74 | ];
75 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const sourceMap = process.env.NODE_ENV === "development";
 3 | 
 4 | module.exports = {
 5 |   // 基本路径
 6 |   publicPath: "./",
 7 |   // 输出文件目录
 8 |   outputDir: "dist",
 9 |   // eslint-loader 是否在保存的时候检查
10 |   lintOnSave: false,
11 |   chainWebpack: () => {},
12 |   configureWebpack: config => {
13 |     if (process.env.NODE_ENV === "production") {
14 |       // 为生产环境修改配置
15 |       config.mode = "production";
16 |     } else {
17 |       // 为开发环境修改配置
18 |       config.mode = "development";
19 |     }
20 | 
21 |     Object.assign(config, {
22 |       // 开发生产共同配置
23 |       resolve: {
24 |         extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
25 |         alias: {
26 |           vue$: "vue/dist/vue.js",
27 |           "@": path.resolve(__dirname, "./src"),
28 |           "@c": path.resolve(__dirname, "./src/components")
29 |         }
30 |       }
31 |     });
32 |   },
33 |   // 生产环境是否生成 sourceMap 文件
34 |   productionSourceMap: sourceMap,
35 |   parallel: require("os").cpus().length > 1,
36 |   // PWA 插件相关配置
37 |   // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
38 |   pwa: {},
39 |   // webpack-dev-server 相关配置
40 |   // devServer: {
41 |   //     open: true, // 启动后自动打开浏览器
42 |   //     host: "localhost",
43 |   //     port: 9002,
44 |   //     ,
45 |   //     https: false,
46 |   //     hotOnly: false,
47 |   //     proxy: {
48 |   //         // 设置代理
49 |   //         // proxy all requests starting with /api to jsonplaceholder
50 |   //         "/api": {
51 |   //             target: "http://localhost:3000/",
52 |   //             changeOrigin: true,
53 |   //             ws: true,
54 |   //             pathRewrite: {
55 |   //                 "^/api": ""
56 |   //             }
57 |   //         }
58 |   //     },
59 |   //     before: app => {}
60 |   // },
61 |   // 第三方插件配置
62 |   pluginOptions: {
63 |     // ...
64 |   }
65 | };
66 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ts-components",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "css-loader": "^5.0.1",
13 |     "element-ui": "^2.14.0",
14 |     "lodash": "^4.17.20",
15 |     "sortablejs": "^1.12.0",
16 |     "vue": "^2.6.11",
17 |     "vue-class-component": "^7.2.3",
18 |     "vue-property-decorator": "^8.5.1",
19 |     "vue-router": "^3.2.0",
20 |     "vuex": "^3.4.0",
21 |     "xlsx": "^0.16.8"
22 |   },
23 |   "devDependencies": {
24 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
25 |     "@typescript-eslint/parser": "^2.33.0",
26 |     "@vue/cli-plugin-babel": "~4.5.0",
27 |     "@vue/cli-plugin-eslint": "~4.5.0",
28 |     "@vue/cli-plugin-router": "~4.5.0",
29 |     "@vue/cli-plugin-typescript": "~4.5.0",
30 |     "@vue/cli-plugin-vuex": "~4.5.0",
31 |     "@vue/cli-service": "~4.5.0",
32 |     "@vue/eslint-config-prettier": "^6.0.0",
33 |     "@vue/eslint-config-typescript": "^5.0.2",
34 |     "eslint": "^6.7.2",
35 |     "eslint-plugin-prettier": "^3.1.3",
36 |     "eslint-plugin-vue": "^6.2.2",
37 |     "node-sass": "^4.12.0",
38 |     "prettier": "^1.19.1",
39 |     "sass-loader": "^8.0.2",
40 |     "typescript": "~3.9.3",
41 |     "vue-template-compiler": "^2.6.11"
42 |   },
43 |   "eslintConfig": {
44 |     "root": true,
45 |     "env": {
46 |       "node": true
47 |     },
48 |     "extends": [
49 |       "plugin:vue/essential",
50 |       "eslint:recommended",
51 |       "@vue/typescript/recommended",
52 |       "@vue/prettier",
53 |       "@vue/prettier/@typescript-eslint"
54 |     ],
55 |     "parserOptions": {
56 |       "ecmaVersion": 2020
57 |     },
58 |     "rules": {}
59 |   },
60 |   "browserslist": [
61 |     "> 1%",
62 |     "last 2 versions",
63 |     "not dead"
64 |   ]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/mixins/uploadXlsx.ts:
--------------------------------------------------------------------------------
 1 | import { Component, Vue } from "vue-property-decorator";
 2 | import * as XLSX from "xlsx";
 3 | @Component
 4 | export default class UploadXlsx extends Vue {
 5 |   handlerUploadResult(headerStr: Array<any>, data: Array<any>) {
 6 |     const result: Array<any> = [];
 7 |     let arr: Array<any> = [];
 8 |     let obj: any = {};
 9 |     let flag = false;
10 |     let idx: number;
11 |     data.forEach((item: any) => {
12 |       arr = Object.keys(item);
13 |       headerStr.forEach((val: any) => {
14 |         if (arr.includes(val.str)) {
15 |           flag = true;
16 |           idx = arr.indexOf(val.str);
17 |         }
18 |         if (flag) {
19 |           if (val.type === "string") {
20 |             Object.assign(obj, { [val.key]: String(item[arr[idx]]) });
21 |           } else {
22 |             Object.assign(obj, { [val.key]: item[arr[idx]] });
23 |           }
24 |           flag = false;
25 |         } else {
26 |           if (val.type === "string") {
27 |             Object.assign(obj, { [val.key]: "" });
28 |           } else {
29 |             Object.assign(obj, { [val.key]: 0 });
30 |           }
31 |         }
32 |       });
33 |       result.push(obj);
34 |       obj = {};
35 |     });
36 |     return result;
37 |   }
38 |   handlerReaderFile(
39 |     file: any,
40 |     _headerStr: Array<any>,
41 |     start: string,
42 |     end: string
43 |   ) {
44 |     const reader = new FileReader();
45 |     reader.readAsBinaryString(file.raw); // 读取文件
46 |     return new Promise((resolve, reject) => {
47 |       const resultArr: any = [];
48 |       let count = 0;
49 | 
50 |       reader.onload = (evt: any) => {
51 |         try {
52 |           const bstr = evt.target.result;
53 |           // 以二进制流方式读取得到整份excel表格对象
54 |           const wb = XLSX.read(bstr, { type: "binary" });
55 |           let ws: any, data, result;
56 |           const len = wb.SheetNames.length;
57 |           for (let i = 0; i < len; i++) {
58 |             count++;
59 |             ws = wb.Sheets[wb.SheetNames[i]];
60 |             data = XLSX.utils.sheet_to_json(ws); // 对象：每个字段带表头的每行数据
61 |             console.log(data);
62 |             if (count === len) {
63 |               resolve(resultArr);
64 |             }
65 |             if (!ws["!ref"]) continue;
66 |             if (!(~ws["!ref"].indexOf(start) && ~ws["!ref"].lastIndexOf(end))) {
67 |               return this.$message({
68 |                 type: "error",
69 |                 message: `${file.name}表头数量不符合要求`
70 |               });
71 |             }
72 |             result = this.handlerUploadResult(_headerStr, data);
73 |             resultArr.push(result);
74 |           }
75 |         } catch (err) {
76 |           reject(err);
77 |         }
78 |       };
79 |     });
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/components/Table/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="table">
  3 |     <slot name="header"></slot>
  4 |     <div class="content">
  5 |       <div class="header">
  6 |         <template v-for="(item, index) in $attrs.tableHeader">
  7 |           <span
  8 |             :key="`${item.props}`"
  9 |             :class="{ cell: true, [`cell_${index}`]: true }"
 10 |             >{{ item.name }}</span
 11 |           >
 12 |         </template>
 13 |       </div>
 14 |       <recursiveRow
 15 |         v-bind="$attrs"
 16 |         v-on="$listeners"
 17 |         v-loading="$attrs.loading"
 18 |       ></recursiveRow>
 19 |     </div>
 20 |     <div class="footer">
 21 |       <slot name="footer"></slot>
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | <script lang="ts">
 26 | import "./style/index.scss";
 27 | import { Component, Vue, Watch, Mixins, Ref } from "vue-property-decorator";
 28 | import RecursiveRow from "./recursiveRow.vue";
 29 | import { EventBus } from "../index";
 30 | @Component({
 31 |   name: "Table",
 32 |   components: {
 33 |     RecursiveRow
 34 |   }
 35 | })
 36 | export default class extends Vue {
 37 |   private iptValue: any;
 38 |   private allCheck = "";
 39 |   /**
 40 |    * arr：列表数据
 41 |    * id：当前要删除的数据的id
 42 |    *
 43 |    */
 44 |   mounted() {
 45 |     EventBus.$on("select-change", (checkList: Array<any>) => {
 46 |       this.$emit("select-change", checkList);
 47 |     });
 48 |     EventBus.$on("tree-change", (treeList: Array<any>) => {
 49 |       this.$emit("tree-change", treeList);
 50 |     });
 51 |   }
 52 |   beforeDestroy() {
 53 |     EventBus.$off("select-change");
 54 |   }
 55 |   private handlerDepDel(arr: any = [], id: number) {
 56 |     if (!Array.isArray(arr)) return;
 57 |     arr.forEach((item: any, index: number) => {
 58 |       if (item.id === id) {
 59 |         this.$delete(arr, index);
 60 |         return;
 61 |       }
 62 |       if (item.children && item.children.length !== 0) {
 63 |         this.handlerDepDel(item.children, id);
 64 |       }
 65 |     });
 66 |   }
 67 |   /**
 68 |    * 全部打来数据
 69 |    */
 70 |   private openAllTree(bool: boolean) {
 71 |     let index = 0;
 72 |     while (this.$children[++index]) {
 73 |       const el: any = this.$children[index];
 74 |       if (el.$body) {
 75 |         el.allOpen(bool);
 76 |       }
 77 |     }
 78 |   }
 79 |   /**btn:按钮的信息
 80 |    * row：每行的数据
 81 |    * evt：事件对象
 82 |    * expre：表格数据字段
 83 |    * isChange:属性服务于动态组件component
 84 |    */
 85 |   private handlerEdit(row: any, evt: any, expre: string) {
 86 |     if (!row._$edit) {
 87 |       Object.assign(row, {
 88 |         isChange: expre,
 89 |         component: "input",
 90 |         attr: {
 91 |           value: row[expre]
 92 |         },
 93 |         listener: {
 94 |           ["change"]: (evt: any) => {
 95 |             this.iptValue = evt;
 96 |           }
 97 |         }
 98 |       });
 99 |       this.$set(row, "_$edit", true);
100 |     } else {
101 |       row[expre] = this.iptValue ? this.iptValue.target.value : row[expre];
102 |       this.$delete(row, "component");
103 |       this.$delete(row, "attr");
104 |       this.$delete(row, "listener");
105 |       this.$set(row, "_$edit", false);
106 |     }
107 |   }
108 | }
109 | </script>
110 | 


--------------------------------------------------------------------------------
/src/components/Upload/index.vue:
--------------------------------------------------------------------------------
  1 | <style scoped lang="scss">
  2 | .uploadContainer {
  3 |   display: flex;
  4 |   width: 200px;
  5 |   justify-content: space-between;
  6 | }
  7 | </style>
  8 | <template>
  9 |   <div class="uploadContainer">
 10 |     <el-upload
 11 |       class="upload"
 12 |       :ref="upload"
 13 |       name="file"
 14 |       with-credentials
 15 |       :on-change="onChangeHandler"
 16 |       :on-remove="handleRemove"
 17 |       :multiple="true"
 18 |       :show-file-list="true"
 19 |       :file-list="fileList"
 20 |       :auto-upload="false"
 21 |       action=""
 22 |     >
 23 |       <el-button type="primary">导入文件</el-button>
 24 |       <slot name="tip"></slot>
 25 |     </el-upload>
 26 |     <el-button
 27 |       type="primary"
 28 |       size="mini"
 29 |       @click="uploadFile"
 30 |       style="height: 35px"
 31 |       >上传</el-button
 32 |     >
 33 |   </div>
 34 | </template>
 35 | <script lang="ts">
 36 | // excel支持的格式
 37 | const _SheetJSFT = ["xlsx", "xls"].map(function(x) {
 38 |   return "." + x;
 39 | });
 40 | import { Component, Mixins, Prop } from "vue-property-decorator";
 41 | import UploadXlsx from "../../mixins/uploadXlsx";
 42 | const upload = Symbol("upload");
 43 | @Component({
 44 |   name: "Upload"
 45 | })
 46 | export default class extends Mixins(UploadXlsx) {
 47 |   @Prop({
 48 |     type: Array,
 49 |     default() {
 50 |       return [];
 51 |     }
 52 |   })
 53 |   headerStr: any;
 54 |   @Prop({
 55 |     type: Function,
 56 |     required: true
 57 |   })
 58 |   callback!: Function;
 59 |   @Prop({
 60 |     type: String,
 61 |     default: "A"
 62 |   })
 63 |   start!: string;
 64 |   @Prop({
 65 |     type: String,
 66 |     default: ""
 67 |   })
 68 |   end!: string;
 69 |   @Prop({
 70 |     type: Boolean,
 71 |     default: false
 72 |   })
 73 |   multiple?: boolean;
 74 |   private SheetJSFT = _SheetJSFT;
 75 |   private fileList: any = [];
 76 |   private upload = upload;
 77 |   //处理文件
 78 |   handlerFile() {
 79 |     this.fileList.forEach((file: any) => {
 80 |       const { name } = file;
 81 |       const str = name.slice(name.lastIndexOf("."), name.length);
 82 |       if (!this.SheetJSFT.includes(str)) {
 83 |         this.$message({
 84 |           type: "error",
 85 |           message: "文件格式不符合要求,请检查文件格式"
 86 |         });
 87 |         return;
 88 |       }
 89 |       this.handlerReaderFile(file, this.headerStr, this.start, this.end)
 90 |         .then((res: any) => {
 91 |           Promise.all(this.handlerCallback(res)).then(res => {
 92 |             console.log("res成功了", res); //输出3个1
 93 |           });
 94 |         })
 95 |         .catch((err: any) => {
 96 |           this.$message({
 97 |             type: "error",
 98 |             message: err
 99 |           });
100 |         });
101 |     });
102 |   }
103 |   //文件上传
104 |   uploadFile() {
105 |     this.handlerFile();
106 |   }
107 |   // 只保留最后新选择的文件
108 |   onChangeHandler(file: any, fileList: any) {
109 |     if (this.multiple) {
110 |       this.fileList = fileList;
111 |     } else {
112 |       if (fileList.length > 1) {
113 |         this.fileList = [fileList[fileList.length - 1]];
114 |       } else {
115 |         this.fileList = fileList;
116 |       }
117 |     }
118 |   }
119 |   //处理callback
120 |   handlerCallback(args: any) {
121 |     return args.map((arg: Array<any>) => {
122 |       return new Promise(resolve => {
123 |         resolve(this.callback(arg));
124 |       });
125 |     });
126 |   }
127 |   //文件移除
128 |   handleRemove(file: any, fileList: any) {
129 |     this.fileList = fileList;
130 |   }
131 | }
132 | </script>
133 | 


--------------------------------------------------------------------------------
/src/example/table/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Table
  4 |       :data.sync="tableData"
  5 |       :isSort="isSort"
  6 |       :tableHeader="headerData"
  7 |       :open="isOpen"
  8 |       ref="table"
  9 |       :callback="getTableData"
 10 |       @select-change="onSelectChange"
 11 |       @tree-change="onTreeChange"
 12 |       :loading="loading"
 13 |     >
 14 |       <template v-slot:header>
 15 |         <el-button @click="onExpandTree" size="mini">{{
 16 |           isOpen ? "关闭分类" : "展开分类"
 17 |         }}</el-button>
 18 |         <el-button @click="onSortable" size="mini">
 19 |           {{ isSort ? "关闭排序" : "开启排序" }}
 20 |         </el-button>
 21 |       </template>
 22 |       <template v-slot:footer>
 23 |         <el-pagination background layout="prev, pager, next" :total="1000">
 24 |         </el-pagination>
 25 |       </template>
 26 |     </Table>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script lang="ts">
 31 | import { Component, Ref, Vue } from "vue-property-decorator";
 32 | import { Table } from "../../components/index";
 33 | import { tableData } from "../../mock/table/index.js";
 34 | import img from "../../assets/imgs/green.png";
 35 | @Component({
 36 |   name: "App",
 37 |   components: {
 38 |     Table
 39 |   }
 40 | })
 41 | export default class extends Vue {
 42 |   @Ref() table: any;
 43 |   private headerData = [
 44 |     {
 45 |       name: "单选",
 46 |       props: "select",
 47 |       select: true,
 48 |       attr: {
 49 |         size: "mini"
 50 |       }
 51 |     },
 52 |     {
 53 |       name: "ID",
 54 |       props: "id"
 55 |     },
 56 |     {
 57 |       name: "名称",
 58 |       props: "text",
 59 |       tree: true,
 60 |       treeSelect: true,
 61 |       images: img,
 62 |       before: (row: any) => {
 63 |         if (row.level === 2) return `${row.text}（特殊）`;
 64 |         return `${row.text}`;
 65 |       }
 66 |     },
 67 |     {
 68 |       name: "级别",
 69 |       props: "level"
 70 |     },
 71 |     {
 72 |       name: "分类属性",
 73 |       props: "type"
 74 |     },
 75 |     {
 76 |       name: "类别",
 77 |       props: "manage_categories"
 78 |     },
 79 |     {
 80 |       name: "备注",
 81 |       props: "remark"
 82 |     },
 83 |     {
 84 |       name: "操作",
 85 |       props: "actions",
 86 |       actions: [
 87 |         {
 88 |           click: (row: any) => {
 89 |             const table: any = this.$refs.table;
 90 |             table.handlerDepDel(this.tableData, row.id);
 91 |             //调删除接口
 92 |             this.$message({
 93 |               type: `success`,
 94 |               message: `${row.text}删除成功！`
 95 |             });
 96 |           },
 97 |           label: "删除",
 98 |           attr: {
 99 |             size: "mini"
100 |           },
101 |           before: (row: any, i: any) => {
102 |             if (row.level === 2) {
103 |               return true;
104 |             }
105 |           }
106 |         },
107 |         {
108 |           click: (row: any, i: any, evt: any) => {
109 |             const table: any = this.$refs.table;
110 |             table.handlerEdit(row, evt, "type");
111 |             //调用编辑的接口
112 |           },
113 |           label: "编辑",
114 |           edit: true,
115 |           attr: {
116 |             size: "mini"
117 |           }
118 |         },
119 |         {
120 |           click: (row: any, i: any, evt: any) => {
121 |             console.log(row, i, evt);
122 |           },
123 |           label: "查看详情",
124 |           attr: {
125 |             size: "mini"
126 |           }
127 |         }
128 |       ]
129 |     }
130 |   ];
131 |   private tableData = tableData;
132 |   private isOpen = true;
133 |   private isSort = false;
134 |   private loading = false;
135 |   //是否开启展开关闭
136 |   private onExpandTree() {
137 |     this.isOpen = !this.isOpen;
138 |     this.table.openAllTree(this.isOpen);
139 |   }
140 |   //是否排序
141 |   private onSortable() {
142 |     this.isSort = !this.isSort;
143 |   }
144 |   //拖拽成功的回调
145 |   private getTableData(arr: Array<any>) {
146 |     console.log(arr);
147 |   }
148 |   //处理选择框
149 |   onSelectChange(rowArr: Array<any>) {
150 |     console.log("---所选择的值");
151 |   }
152 |   //树选中
153 |   onTreeChange(list: Array<any>) {
154 |     console.log(list);
155 |   }
156 | }
157 | </script>
158 | 


--------------------------------------------------------------------------------
/src/components/Cascader/components/cascader-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cascader-item">
  3 |     <div class="left">
  4 |       <div class="search" v-if="isInput">
  5 |         <el-input
  6 |           size="mini"
  7 |           placeholder="请输入名称搜索"
  8 |           v-model="searchVal"
  9 |           @input="handleInput"
 10 |         ></el-input>
 11 |       </div>
 12 |       <div class="item-content">
 13 |         <template v-for="(item, index) in panelData">
 14 |           <div
 15 |             :key="`${index}_text`"
 16 |             class="label-item cursor"
 17 |             :class="{ active: handlerActive(item) }"
 18 |             @click="onClickText(item, $event)"
 19 |           >
 20 |             <div class="label">
 21 |               <template v-if="isCheckbox">
 22 |                 <input
 23 |                   type="checkbox"
 24 |                   v-model="item.checked"
 25 |                   class="cursor"
 26 |                   id="checked"
 27 |                 />
 28 |                 <label for="checked"></label>
 29 |               </template>
 30 |               <span class="label">{{ item.text }}</span>
 31 |             </div>
 32 |             <i
 33 |               class="el-icon-arrow-right"
 34 |               v-if="item.children && item.children.length !== 0"
 35 |             ></i>
 36 |           </div>
 37 |         </template>
 38 |       </div>
 39 |     </div>
 40 |     <div class="right" v-if="showRightItem">
 41 |       <CascaderItem
 42 |         :level="level + 1"
 43 |         :selected.sync="selected"
 44 |         :options="showRightItem"
 45 |         :changeValToStr="changeValToStr"
 46 |         :isCheckbox="isCheckbox"
 47 |         :isInput="isInput"
 48 |         :reverseChoice="reverseChoice"
 49 |       ></CascaderItem>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | <script lang="ts">
 54 | import {
 55 |   Component,
 56 |   Mixins,
 57 |   Ref,
 58 |   Prop,
 59 |   Vue,
 60 |   Watch
 61 | } from "vue-property-decorator";
 62 | @Component({
 63 |   name: "CascaderItem"
 64 | })
 65 | export default class extends Vue {
 66 |   @Prop({
 67 |     type: Array,
 68 |     default() {
 69 |       return [];
 70 |     }
 71 |   })
 72 |   options: any;
 73 |   @Prop({
 74 |     type: Number,
 75 |     default: 0
 76 |   })
 77 |   level: any;
 78 |   @Prop({
 79 |     type: String,
 80 |     default: ""
 81 |   })
 82 |   changeValToStr: any;
 83 |   @Prop({
 84 |     type: Array,
 85 |     default() {
 86 |       return [];
 87 |     }
 88 |   })
 89 |   selected: any;
 90 |   @Prop({
 91 |     type: Boolean,
 92 |     default: false
 93 |   })
 94 |   isCheckbox: any;
 95 |   @Prop({
 96 |     type: Boolean,
 97 |     default: false
 98 |   })
 99 |   isInput: any;
100 | 
101 |   @Prop({
102 |     type: Boolean,
103 |     default: false
104 |   })
105 |   reverseChoice: any;
106 | 
107 |   private searchVal = "";
108 |   private panelData = [];
109 |   private initOptions = true;
110 | 
111 |   //处理input事件
112 |   handleInput(evt: any) {
113 |     if (this.searchVal) {
114 |       this.panelData = this.options.filter((item: any) =>
115 |         item.text.includes(this.searchVal)
116 |       );
117 |       const newLen = this.panelData.length;
118 |       if (newLen) {
119 |         this.initOptions = false;
120 |       }
121 |     } else {
122 |       this.panelData = this.options;
123 |     }
124 |   }
125 |   //处理被选中的样式
126 |   handlerActive(item: any) {
127 |     return this.selected.map((item: any) => item.text).includes(item.text);
128 |   }
129 |   //处理复选框值
130 |   private handleChecked(bool: boolean) {
131 |     const lastIdx = this.selected.length - 1;
132 |     const lastSelected = this.selected[lastIdx];
133 |     if (lastSelected) {
134 |       lastSelected["checked"] = !bool;
135 |     }
136 |   }
137 |   //反选的数据处理
138 |   private handleVal() {
139 |     let valCopy = [];
140 |     if (this.changeValToStr.includes("/")) {
141 |       valCopy = this.changeValToStr.split("/");
142 |     } else {
143 |       valCopy = this.changeValToStr.split(",");
144 |     }
145 |     return valCopy;
146 |   }
147 |   //处理正选和反选的逻辑
148 |   private handleValCopy(item: any) {
149 |     const valCopy = this.handleVal();
150 |     const index = valCopy.indexOf(item.text);
151 |     const len = this.selected.length;
152 |     if (~index) {
153 |       item.checked = false;
154 |       this.selected.splice(index, len - index);
155 |       this.handleChecked(false);
156 |     } else {
157 |       this.handleCheckedToTrue(item);
158 |     }
159 |   }
160 | 
161 |   //处理是否需要正选反选
162 |   handleChoice(item: any) {
163 |     if (this.reverseChoice) {
164 |       this.handleValCopy(item); //如果需要就开启,是否需要反选的功能。
165 |     } else {
166 |       this.handleCheckedToTrue(item);
167 |     }
168 |   }
169 |   //处理正选
170 |   handleCheckedToTrue(item: any) {
171 |     this.handleChecked(true);
172 |     item.checked = true;
173 |     this.selected[this.level] = item;
174 |   }
175 |   //点击处理
176 |   private onClickText(item: any, evt: any) {
177 |     this.handleChoice(item);
178 |     this.selected.splice(this.level + 1); //如果第一位被换了，那么第二会要删除，实现切换数据视图一致的效果
179 |     if (item.checked && item.children && item.children.length) {
180 |       this.handleChidlrenZero(item.children);
181 |     }
182 |     this.$emit("update:selected", this.selected);
183 |     this.initOptions = true;
184 |   }
185 | 
186 |   //选择默认每一级的第一位选中
187 |   handleChidlrenZero(item: any) {
188 |     const arr = [item[0]];
189 |     while (arr.length) {
190 |       const item = arr.shift();
191 |       this.selected.push(item);
192 |       if (item.children) {
193 |         this.handleChidlrenZero(item.children);
194 |       }
195 |     }
196 |   }
197 |   get showRightItem() {
198 |     if (this.initOptions) {
199 |       const selectedItem = this.selected[this.level];
200 |       if (
201 |         selectedItem &&
202 |         selectedItem.children &&
203 |         selectedItem.children.length > 0
204 |       ) {
205 |         return selectedItem.children;
206 |       }
207 |       return null;
208 |     }
209 |   }
210 | 
211 |   //监听
212 |   @Watch("options", { deep: true, immediate: true })
213 |   handleOptions(newVal: any) {
214 |     if (!this.searchVal) {
215 |       this.panelData = newVal;
216 |     }
217 |   }
218 | }
219 | </script>
220 | 
221 | <style scoped lang="scss">
222 | .cascader-item {
223 |   display: flex;
224 |   align-items: flex-start;
225 |   justify-content: flex-start;
226 |   height: 280px;
227 |   .left {
228 |     height: 100%;
229 |     width: 200px;
230 |     display: flex;
231 |     flex-direction: column;
232 |     box-sizing: border-box;
233 |     margin: 5px;
234 |     border: 1px solid #dddddd;
235 |     .search {
236 |       padding: 5px;
237 |       /deep/.el-input__inner {
238 |         width: 185px;
239 |       }
240 |     }
241 |     .item-content {
242 |       height: 100%;
243 |       width: 100%;
244 |       overflow: auto;
245 |       box-sizing: border-box;
246 |     }
247 |     .label-item:hover {
248 |       color: #1f2d3d;
249 |       font-weight: bold;
250 |     }
251 |     .cursor {
252 |       cursor: pointer;
253 |     }
254 |     .active {
255 |       border-right: 3px solid #009919;
256 |       background: #eee;
257 |     }
258 |   }
259 |   .right {
260 |     height: 100%;
261 |   }
262 |   .label-item {
263 |     display: flex;
264 |     flex-direction: row;
265 |     justify-content: space-between;
266 |     height: 38px;
267 |     align-items: center;
268 |     .label {
269 |       padding-left: 10px;
270 |     }
271 |   }
272 | }
273 | </style>
274 | 


--------------------------------------------------------------------------------
/src/components/Table/recursiveRow.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss" scoped>
  2 | .noData {
  3 |   text-align: center;
  4 |   font-size: 14px;
  5 |   color: #333;
  6 |   height: 35px;
  7 |   line-height: 35px;
  8 | }
  9 | .move {
 10 |   cursor: move;
 11 | }
 12 | .noDrop {
 13 |   cursor: no-drop;
 14 | }
 15 | .pointer {
 16 |   cursor: pointer;
 17 | }
 18 | .body {
 19 |   font-size: 12px;
 20 |   color: #1f2d3d;
 21 |   cursor: pointer;
 22 |   .img {
 23 |     height: 22px;
 24 |     width: 22px;
 25 |   }
 26 |   .header {
 27 |     background: #f2f2f2;
 28 |     font-size: 14px;
 29 |     font-weight: bold;
 30 |     font-size: 14px;
 31 |     width: 100%;
 32 |     height: 30px;
 33 |     line-height: 30px;
 34 |   }
 35 |   .row {
 36 |     // height: 45px;
 37 |   }
 38 |   .row:hover {
 39 |     background: #f7fcf7;
 40 |   }
 41 |   .operator {
 42 |     display: inline-block;
 43 |     width: 12px;
 44 |     height: 13px;
 45 |   }
 46 |   .space {
 47 |     padding-left: 16px;
 48 |   }
 49 |   .tool {
 50 |     width: 7px;
 51 |     margin-right: 4px;
 52 |     height: auto;
 53 |     cursor: move;
 54 |   }
 55 |   .row {
 56 |     border-bottom: 1px solid #eeeeee;
 57 |     height: auto;
 58 |   }
 59 |   .text-overflow {
 60 |     // overflow: hidden;
 61 |     // text-overflow: ellipsis;
 62 |   }
 63 |   .is-hide {
 64 |     color: #b3b3b3;
 65 |   }
 66 |   .hash {
 67 |     color: #009919;
 68 |   }
 69 |   .tree-bg {
 70 |     background: #e1e1e173;
 71 |   }
 72 |   /deep/.el-checkbox {
 73 |     margin-right: 10px;
 74 |   }
 75 | }
 76 | </style>
 77 | <template>
 78 |   <div
 79 |     :class="{
 80 |       body: tableData.length !== 0,
 81 |       noData: tableData.length === 0
 82 |     }"
 83 |     ref="$body"
 84 |   >
 85 |     <template v-for="(item, index) in tableData">
 86 |       <div
 87 |         :level="`${item.level}`"
 88 |         :key="`${item.level}_${item.id}`"
 89 |         :id="`${item.id}`"
 90 |       >
 91 |         <div class="row">
 92 |           <template v-for="(val, i) in tableHeader">
 93 |             <component
 94 |               :is="
 95 |                 val.component ||
 96 |                   (item.isChange == val.props ? item.component : false) ||
 97 |                   'div'
 98 |               "
 99 |               :key="val.props"
100 |               :class="{ cell: true, [`cell_${i}`]: true }"
101 |               :style="{ 'padding-left': val.tree ? `${item.level * 5}px` : 0 }"
102 |               v-bind="item.attr"
103 |               v-on="item.listener"
104 |             >
105 |               <template v-if="val.select">
106 |                 <el-checkbox
107 |                   v-bind="val.attr"
108 |                   @change="handlerSelection(item, $event)"
109 |                 ></el-checkbox>
110 |               </template>
111 |               <template v-else-if="val.tree">
112 |                 <i
113 |                   :class="{
114 |                     'el-icon-caret-bottom': item.isShowIcon,
115 |                     'el-icon-caret-right': !item.isShowIcon
116 |                   }"
117 |                   v-if="iSShow(item.children)"
118 |                   @click="onClick(item, $event)"
119 |                 ></i>
120 |                 <i v-else class="operator"></i>
121 |                 <el-checkbox
122 |                   v-if="val.treeSelect"
123 |                   v-bind="val.attr"
124 |                   v-model="item.treeSelectVal"
125 |                   @change="handlerAllTreeSelection(item, bool)"
126 |                 ></el-checkbox>
127 |                 <img
128 |                   :src="val.images || `@/assets/imgs/green.png`"
129 |                   class="tool"
130 |                   v-if="isSort"
131 |                 />
132 |                 {{ val.before ? val.before(item) : item[val.props] }}
133 |               </template>
134 |               <template v-else-if="val.actions"
135 |                 ><el-button
136 |                   v-for="(btn, i) in val.actions"
137 |                   :key="`${btn.label}_${i}`"
138 |                   v-bind="btn.attr"
139 |                   @click="btn.click(item, index, $event)"
140 |                   :disabled="btn.before ? btn.before(item, index) : false"
141 |                   >{{
142 |                     btn.edit ? (item._$edit ? "OK" : btn.label) : btn.label
143 |                   }}</el-button
144 |                 ></template
145 |               >
146 |               <template v-else>
147 |                 {{ val.before ? val.before(item) : item[val.props] }}</template
148 |               >
149 |             </component>
150 |           </template>
151 |         </div>
152 |         <recursiveRow
153 |           :data="item.children"
154 |           :callback="callback"
155 |           v-show="iSShow(item.children) && item.isShowIcon"
156 |           :tableHeader="tableHeader"
157 |           :isSort="isSort"
158 |           :open="open"
159 |           :class="{ 'tree-bg': item.children.length && item.isShowIcon }"
160 |           ref="recursiveRow"
161 |         ></recursiveRow>
162 |       </div>
163 |     </template>
164 |     <template v-if="tableData.length == 0"> 暂无数据 </template>
165 |   </div>
166 | </template>
167 | <script lang="ts">
168 | import "./style/index.scss";
169 | import { Component, Vue, Prop, Watch, Ref } from "vue-property-decorator";
170 | import { EventBus } from "../index";
171 | import Sortable from "sortablejs";
172 | import * as _ from "lodash";
173 | let $selectArr: any = [];
174 | @Component({
175 |   name: "recursiveRow"
176 | })
177 | export default class extends Vue {
178 |   @Ref() recursiveRow!: any;
179 |   @Ref() $body!: any;
180 |   @Prop({
181 |     type: Array,
182 |     default() {
183 |       return [];
184 |     }
185 |   })
186 |   data?: [];
187 |   @Prop({
188 |     type: Boolean,
189 |     default: false
190 |   })
191 |   isSort?: false;
192 |   @Prop({
193 |     type: Array,
194 |     default: () => []
195 |   })
196 |   tableHeader: any;
197 |   @Prop({
198 |     type: Boolean,
199 |     default: false
200 |   })
201 |   open: any;
202 |   @Prop({
203 |     type: Function,
204 |     default: () => {}
205 |   })
206 |   callback?: Function;
207 |   private tableData: any = [];
208 |   private sortable: any = {};
209 |   private selectArr: any = [];
210 |   private handlerSort: Function = () => {};
211 |   private selectVal = [];
212 | 
213 |   mounted() {
214 |     this.handlerSort = () => {
215 |       if (this.isSort === false) {
216 |         this.sortable &&
217 |           this.sortable.option &&
218 |           this.sortable.option("disabled", !this.isSort);
219 |         return;
220 |       }
221 |       const _$el = this.$body;
222 |       this.sortable =
223 |         _$el &&
224 |         new Sortable(_$el, {
225 |           // 结束拖拽
226 |           onEnd: async function(this: any, evt: any = {}) {
227 |             if (evt.oldIndex === evt.newIndex) return;
228 |             const row = this.tableData.splice(evt.oldIndex, 1);
229 |             this.tableData.splice(evt.newIndex, 0, row[0]);
230 |             //同层级的id
231 |             const arr = this.tableData.map((item: any = {}) => item.id);
232 |             await this.callback(arr);
233 |             this.$message({
234 |               type: "success",
235 |               message: "拖拽排序成功"
236 |             });
237 |           }.bind(this),
238 |           onMove: function(evt: any = {}) {
239 |             if (evt.dragged.id === evt.related.id) return false;
240 |           }
241 |         });
242 |     };
243 |   }
244 |   beforeDestroy() {
245 |     EventBus.$off("select-change");
246 |   }
247 | 
248 |   private handlerAllTreeSelection(row: any, bool: boolean) {
249 |     this.handlerTreeSelect(row, bool);
250 |     EventBus.$emit("tree-change", [{ ...row }]);
251 |   }
252 |   private handlerSelection(row: any, bool: boolean) {
253 |     if (bool) {
254 |       $selectArr.push(row);
255 |     } else {
256 |       $selectArr = $selectArr.filter((rw: any) => rw.id !== row.id);
257 |     }
258 |     EventBus.$emit("select-change", $selectArr);
259 |   }
260 |   private iSShow(children: Array<any>) {
261 |     if (children && children.length) {
262 |       return true;
263 |     }
264 |     return false;
265 |   }
266 |   //树形打开
267 |   private onClick(...args: any) {
268 |     const [item, evt] = args;
269 |     evt.preventDefault();
270 |     evt.stopPropagation();
271 |     item.isShowIcon = !item.isShowIcon;
272 |   }
273 |   //全部打开
274 |   private allOpen(expand: boolean) {
275 |     this.handlerTableData(this.tableData, expand);
276 |     this.recursiveRow &&
277 |       this.recursiveRow.forEach((el: any) => {
278 |         el.allOpen(expand);
279 |       });
280 |   }
281 |   //阻止冒泡事件
282 |   private handlerStop(evt: any) {
283 |     evt.preventDefault();
284 |     evt.stopPropagation();
285 |   }
286 |   private handlerTableData(arr: Array<any>, expand: boolean) {
287 |     Array.isArray(arr) &&
288 |       arr.forEach((item: any) => {
289 |         this.$set(item, "isShowIcon", expand);
290 |       });
291 |   }
292 |   //用来处理是否全选
293 |   private handlerTreeSelect(row: any, expand: boolean) {
294 |     this.$set(row, "treeSelectVal", expand);
295 |     row.children &&
296 |       row.children.forEach((item: any) => {
297 |         if (item.children && item.children.length !== 0) {
298 |           this.handlerTreeSelect(item, expand);
299 |         }
300 |         this.$set(item, "treeSelectVal", expand);
301 |       });
302 |   }
303 |   @Watch("data", { deep: true, immediate: true })
304 |   handlerData(newValue: any) {
305 |     this.tableData = _.cloneDeep(newValue);
306 |     this.handlerTableData(this.tableData, this.open);
307 |   }
308 |   @Watch("isSort")
309 |   handlerIsSort() {
310 |     this.handlerSort();
311 |   }
312 | }
313 | </script>
314 | 


--------------------------------------------------------------------------------
/src/components/Cascader/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="cascader-container" ref="cascader">
  3 |     <!--v-popover:popover -->
  4 |     <el-input
  5 |       v-model="changeValToStr"
  6 |       v-bind="iptProps"
  7 |       @input="onInput"
  8 |       @clear="onClear"
  9 |       @focus="onFocus"
 10 |     >
 11 |       <template slot="append">
 12 |         <i class="el-icon-arrow-down" v-if="downOrup"></i>
 13 |         <i v-else class="el-icon-arrow-up"></i>
 14 |       </template>
 15 |     </el-input>
 16 |     <div class="card-container" v-show="visiablePopover">
 17 |       <template v-if="getShowFilter">
 18 |         <filter-item
 19 |           @onClickOpt="onClickOpt"
 20 |           :filterableOpt="filterableOpt"
 21 |         ></filter-item>
 22 |       </template>
 23 |       <template v-else>
 24 |         <CascaderItem
 25 |           ref="cascaderItem"
 26 |           :options="source"
 27 |           :level="0"
 28 |           :changeValToStr="changeValToStr"
 29 |           :selected.sync="selected"
 30 |           :isCheckbox="isCheckbox"
 31 |           :isInput="isInput"
 32 |           :reverseChoice="reverseChoice"
 33 |           :objKey="key"
 34 |           :objLabel="label"
 35 |         ></CascaderItem>
 36 |       </template>
 37 |     </div>
 38 |     <!-- <el-popover ref="popover" id="popover" v-model="visiablePopover" trigger="focus">
 39 |       <template v-if="getShowFilter">
 40 |         <filter-item @onClickOpt="onClickOpt" :filterableOpt="filterableOpt"></filter-item>
 41 |       </template>
 42 |       <template v-else>
 43 |         <CascaderItem
 44 |         :options="source"
 45 |         :level="0"
 46 |         :changeValToStr="changeValToStr"
 47 |         :selected.sync="selected"
 48 |         :isCheckbox="isCheckbox"
 49 |         :isInput="isInput"
 50 |         :reverseChoice="reverseChoice"
 51 |       ></CascaderItem>
 52 |       </template>
 53 |     </el-popover> -->
 54 |   </div>
 55 | </template>
 56 | <script lang="ts">
 57 | import {
 58 |   Component,
 59 |   Mixins,
 60 |   Ref,
 61 |   Prop,
 62 |   Vue,
 63 |   Watch
 64 | } from "vue-property-decorator";
 65 | import { CascaderItem, FilterItem } from "./components/index";
 66 | @Component({
 67 |   name: "Cascader",
 68 |   components: {
 69 |     CascaderItem,
 70 |     FilterItem
 71 |   }
 72 | })
 73 | export default class extends Vue {
 74 |   @Prop({
 75 |     type: Array,
 76 |     default() {
 77 |       return [];
 78 |     }
 79 |   })
 80 |   options: any;
 81 | 
 82 |   @Prop()
 83 |   value: Array<any> | any;
 84 | 
 85 |   @Prop({
 86 |     type: Object,
 87 |     default() {
 88 |       return {
 89 |         value: "id",
 90 |         label: "text"
 91 |       };
 92 |     }
 93 |   })
 94 |   props: any;
 95 | 
 96 |   // 搜索框的属性
 97 |   @Prop({
 98 |     type: Object,
 99 |     default() {
100 |       return {};
101 |     }
102 |   })
103 |   iptProps: any;
104 | 
105 |   //是否可搜索
106 |   @Prop({
107 |     type: Boolean,
108 |     default: true
109 |   })
110 |   filterable: any;
111 | 
112 |   // 是否需要checkbox框
113 |   @Prop({
114 |     type: Boolean,
115 |     default: false
116 |   })
117 |   isCheckbox: any;
118 | 
119 |   //是否可搜索
120 |   @Prop({
121 |     type: Boolean,
122 |     default: false
123 |   })
124 |   isInput: any;
125 | 
126 |   @Prop({
127 |     type: Boolean,
128 |     default: false
129 |   })
130 |   reverseChoice: any; //处理是否正反选
131 | 
132 |   @Ref() cascader!: any;
133 |   private source: any = []; //资源池
134 |   private selected: any = []; //选中的数组
135 |   private changeValToStr = "";
136 |   private filterableVal = "";
137 |   private visiablePopover = false;
138 |   private filterableOpt: any = []; //过滤好的数据
139 |   private filterableSource: any = []; //过滤总数据
140 |   private initSelected = true; //初始面板时的输入框状态
141 |   private itemValue = [];
142 | 
143 |   private handleEvents(evt: any) {
144 |     if (this.cascader && this.cascader.contains(evt.target)) {
145 |       this.visiablePopover = true;
146 |     } else {
147 |       this.visiablePopover = false;
148 |     }
149 |   }
150 |   mounted() {
151 |     document.addEventListener("click", this.handleEvents);
152 |   }
153 |   beforeDestroy() {
154 |     document.removeEventListener("click", this.handleEvents);
155 |   }
156 |   // 获取焦点
157 |   onFocus() {
158 |     this.visiablePopover = true;
159 |   }
160 |   //清除
161 |   onClear() {
162 |     this.initSate();
163 |     this.$emit("input", []);
164 |     this.$emit("onChange", []);
165 |   }
166 | 
167 |   //将数据返回给用户
168 |   handleProps() {
169 |     this.changeValToStr = this.handleMapSelected(this.props.label).join("/"); //将数据转化
170 |     this.itemValue = this.handleMapPath();
171 |     if (this.itemValue.length) {
172 |       this.$emit("input", JSON.parse(JSON.stringify(this.itemValue)));
173 |       this.$emit("onChange", JSON.parse(JSON.stringify(this.itemValue)));
174 |     }
175 |   }
176 |   // 处理数据=>根据pathObj字段获取选中的值
177 |   handleMapPath() {
178 |     const pathArr = this.selected[this.selected.length - 1];
179 |     return pathArr
180 |       ? pathArr["pathObj"]
181 |         ? pathArr["pathObj"].id.split("/").map((id: any) => Number(id))
182 |         : []
183 |       : [];
184 |   }
185 | 
186 |   //处理数据=>映射选中的值
187 |   handleMapSelected(prop: string) {
188 |     return this.selected.map((item: any) => item[prop]);
189 |   }
190 |   //广度搜索数据
191 |   handleLabelToPath(args: any) {
192 |     let baseArr = JSON.parse(JSON.stringify(args));
193 |     let index = 0;
194 |     const arr: any = [];
195 |     while (index < baseArr.length) {
196 |       arr.push(baseArr[index].pathObj);
197 |       if (baseArr[index].children && baseArr[index].children.length !== 0) {
198 |         baseArr = baseArr.concat(baseArr[index].children);
199 |       }
200 |       ++index;
201 |     }
202 |     return arr;
203 |   }
204 |   //串行遍历原始数据:新增pathObj属性和checked属性，以及checkbox框的初始状态。
205 |   handleNodeToPath(data: any, bool: boolean, idVal: any) {
206 |     const arr = JSON.parse(JSON.stringify(data));
207 |     const noop = (child: any, text: string, idPath: string) => {
208 |       return child.forEach((val: any, index: number) => {
209 |         const path = text + val.text + "/"; //文本路径拼接
210 |         const id = idPath + val.id + "/"; //id拼接
211 |         val.pathObj = { labelPath: path.slice(0, -1), id: id.slice(0, -1) };
212 |         if (idVal === val.id) {
213 |           this.$set(val, "checked", !bool);
214 |         } else {
215 |           this.$set(val, "checked", bool);
216 |         }
217 |         if (val.children && val.children.length !== 0) {
218 |           noop(val.children, path, id);
219 |         }
220 |       });
221 |     };
222 |     noop(arr, "", "");
223 |     return arr;
224 |   }
225 | 
226 |   //根据value值映射selected的值
227 |   handleMapId(id: any, data: any) {
228 |     const source = [...data];
229 |     let res = [];
230 |     const noop = (arr: any, id: any, parent: any) => {
231 |       let target: any = [];
232 |       arr.forEach((item: any) => {
233 |         if (item.id === id) {
234 |           target = target.concat(parent, [item]);
235 |         }
236 |         if (item.children && item.children.length) {
237 |           target = [...noop(item.children, id, [...parent, item]), ...target];
238 |         }
239 |       });
240 |       return target;
241 |     };
242 |     res = noop(source, id, []);
243 |     return res;
244 |   }
245 |   //初始化数据
246 |   initSate() {
247 |     const ary = (this.source = this.handleNodeToPath(
248 |       this.options,
249 |       false,
250 |       this.value
251 |     ));
252 |     this.filterableOpt = this.filterableSource = this.handleLabelToPath(ary);
253 |     this.changeValToStr = this.handleMapSelected(this.props.label).join("/");
254 |   }
255 |   // 初始化value
256 |   initValueToSelected(val: any) {
257 |     this.$nextTick(() => {
258 |       this.selected = this.handleMapId(val, this.source);
259 |     });
260 |   }
261 |   //初始化展开面板
262 |   handleInitSelected() {
263 |     const arr = [this.source[0]],
264 |       result = [];
265 |     while (arr.length) {
266 |       const item = arr.shift();
267 |       result.push(item);
268 |       if (item.children) {
269 |         arr.push(item.children[0]);
270 |       }
271 |     }
272 |     return result;
273 |   }
274 |   //点击li的值
275 |   onClickOpt(item: any) {
276 |     this.changeValToStr = item.labelPath;
277 |     this.itemValue = item.id.split("/").map((id: string) => Number(id));
278 |     if (this.itemValue.length) {
279 |       this.$emit("input", JSON.parse(JSON.stringify(this.itemValue)));
280 |       this.$emit("onChange", JSON.parse(JSON.stringify(this.itemValue)));
281 |     }
282 |   }
283 |   //输入框的值
284 |   onInput(newVal: any) {
285 |     this.filterableVal = newVal;
286 |     if (!newVal) {
287 |       this.filterableOpt = this.filterableSource;
288 |     }
289 |     this.filterableOpt = this.filterableOpt.filter((item: any) =>
290 |       item.labelPath.includes(newVal)
291 |     );
292 |   }
293 |   //显示up or down
294 |   get downOrup() {
295 |     return !this.visiablePopover;
296 |   }
297 |   get getShowFilter() {
298 |     if (this.filterable && this.filterableVal) {
299 |       return true;
300 |     } else {
301 |       return false;
302 |     }
303 |   }
304 | 
305 |   @Watch("selected")
306 |   handleSelected(newVal: Array<any>) {
307 |     if (this.initSelected) {
308 |       this.handleProps();
309 |     }
310 |     this.initSelected = true;
311 |   }
312 | 
313 |   @Watch("options", { deep: true, immediate: true })
314 |   handleOpt(newVal: any) {
315 |     this.initSate();
316 |   }
317 | 
318 |   @Watch("value", { deep: true, immediate: true })
319 |   handleValue(newVal: any) {
320 |     if (newVal) {
321 |       if (JSON.stringify(newVal) !== JSON.stringify(this.itemValue))
322 |         this.initValueToSelected(newVal[newVal.length - 1]);
323 |     }
324 |   }
325 | 
326 |   @Watch("visiablePopover")
327 |   handleVisiable(newVal: any) {
328 |     if (newVal && this.itemValue.length == 0) {
329 |       this.initSelected = false;
330 |       this.selected = this.handleInitSelected();
331 |     }
332 |   }
333 | }
334 | </script>
335 | <style scoped lang="scss">
336 | .cascader-container {
337 |   width: 300px;
338 |   /deep/.el-input__inner {
339 |     text-overflow: ellipsis;
340 |     width: 300px;
341 |   }
342 |   .card-container {
343 |     margin-top: 10px;
344 |     position: absolute;
345 |     z-index: 999;
346 |     background: #ffffff;
347 |     height: 290px;
348 |     box-shadow: 0 2px 12px 0;
349 |     border-radius: 4px;
350 |   }
351 | }
352 | </style>
353 | 


--------------------------------------------------------------------------------