├── .gitignore
├── .npmignore
├── LICENSE
├── build
    └── rollup.config.js
├── dist
    ├── vue-virtual-table.esm.css
    ├── vue-virtual-table.esm.js
    ├── vue-virtual-table.min.js
    └── vue-virtual-table.umd.js
├── example
    ├── complexTable.vue
    ├── mockData.js
    └── simpleTable.vue
├── package.json
├── readme.md
└── src
    ├── components
        ├── base-button.vue
        ├── base-checkgroup.vue
        ├── base-icon.vue
        ├── base-input.vue
        ├── base-popover.vue
        ├── base-select.vue
        ├── base-tooltip.vue
        ├── icons
        │   ├── arrowCarrotDown.vue
        │   ├── arrowCarrotRight.vue
        │   ├── boxChecked.vue
        │   ├── boxEmpty.vue
        │   ├── closeAlt2.vue
        │   ├── cloudDownloadAlt.vue
        │   └── documentsAlt.vue
        └── virtual-scroller.vue
    ├── entry.js
    ├── utils
        └── index.js
    └── vue-virtual-table.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | yarn.lock


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | example/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 waningflow
 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.


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import vue from 'rollup-plugin-vue'
  3 | import babel from 'rollup-plugin-babel'
  4 | import commonjs from 'rollup-plugin-commonjs'
  5 | import replace from 'rollup-plugin-replace'
  6 | import { terser } from 'rollup-plugin-terser'
  7 | import minimist from 'minimist'
  8 | import resolve from '@rollup/plugin-node-resolve';
  9 | import css from 'rollup-plugin-css-only'
 10 | 
 11 | const argv = minimist(process.argv.slice(2))
 12 | 
 13 | const baseConfig = {
 14 |   input: 'src/entry.js',
 15 |   plugins: [
 16 |     replace({
 17 |       'process.env.NODE_ENV': JSON.stringify('production')
 18 |     }),
 19 |     resolve(),
 20 |     commonjs(),
 21 |     vue({
 22 |       css: true,
 23 |       compileTemplate: true,
 24 |       template: {
 25 |         isProduction: true
 26 |       }
 27 |     }),
 28 |     css(),
 29 |     babel()
 30 |   ]
 31 | }
 32 | 
 33 | // UMD/IIFE shared settings: externals and output.globals
 34 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 35 | const external = [
 36 |   // list external dependencies, exactly the way it is written in the import statement.
 37 |   // eg. 'jquery'
 38 | ]
 39 | const globals = {
 40 |   // Provide global variable names to replace your external imports
 41 |   // eg. jquery: '$'
 42 | }
 43 | 
 44 | // Customize configs for individual targets
 45 | const buildFormats = []
 46 | if (!argv.format || argv.format === 'es') {
 47 |   const esConfig = {
 48 |     ...baseConfig,
 49 |     output: {
 50 |       file: 'dist/vue-virtual-table.esm.js',
 51 |       format: 'esm',
 52 |       exports: 'named'
 53 |     },
 54 |     plugins: [
 55 |       ...baseConfig.plugins,
 56 |       terser({
 57 |         output: {
 58 |           ecma: 6
 59 |         }
 60 |       })
 61 |     ]
 62 |   }
 63 |   buildFormats.push(esConfig)
 64 | }
 65 | 
 66 | if (!argv.format || argv.format === 'umd') {
 67 |   const umdConfig = {
 68 |     ...baseConfig,
 69 |     external,
 70 |     output: {
 71 |       compact: true,
 72 |       file: 'dist/vue-virtual-table.umd.js',
 73 |       format: 'umd',
 74 |       name: 'VueVirtualTable',
 75 |       exports: 'named',
 76 |       globals
 77 |     },
 78 |     plugins: [
 79 |       ...baseConfig.plugins,
 80 |       terser({
 81 |         output: {
 82 |           ecma: 6
 83 |         }
 84 |       })
 85 |     ]
 86 |   }
 87 |   buildFormats.push(umdConfig)
 88 | }
 89 | 
 90 | if (!argv.format || argv.format === 'iife') {
 91 |   const unpkgConfig = {
 92 |     ...baseConfig,
 93 |     external,
 94 |     output: {
 95 |       compact: true,
 96 |       file: 'dist/vue-virtual-table.min.js',
 97 |       format: 'iife',
 98 |       name: 'VueVirtualTable',
 99 |       exports: 'named',
100 |       globals
101 |     },
102 |     plugins: [
103 |       ...baseConfig.plugins,
104 |       terser({
105 |         output: {
106 |           ecma: 5
107 |         }
108 |       })
109 |     ]
110 |   }
111 |   buildFormats.push(unpkgConfig)
112 | }
113 | 
114 | // Export config
115 | export default buildFormats
116 | 


--------------------------------------------------------------------------------
/dist/vue-virtual-table.esm.css:
--------------------------------------------------------------------------------
1 | .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}


--------------------------------------------------------------------------------
/example/complexTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div style="width: 1000px;margin: auto;">
  4 |       <vue-virtual-table
  5 |         :config="tableConfig"
  6 |         :data="tableData"
  7 |         :height="tableAttribute.height"
  8 |         :itemHeight="tableAttribute.itemHeight"
  9 |         :minWidth="tableAttribute.minWidth"
 10 |         :selectable="tableAttribute.selectable"
 11 |         :enableExport="tableAttribute.enableExport"
 12 |         :bordered="tableAttribute.bordered"
 13 |         :hoverHighlight="tableAttribute.hoverHighlight"
 14 |         :language="tableAttribute.language"
 15 |         v-on:changeSelection="handleSelectionChange"
 16 |       >
 17 |       </vue-virtual-table>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import VueVirtualTable from "../src/vue-virtual-table";
 24 | import { _uuid } from "../src/utils/index.js";
 25 | import mockData from "./mockData.js";
 26 | 
 27 | export default {
 28 |   name: "app",
 29 |   data() {
 30 |     return {
 31 |       tableConfig: [
 32 |         {
 33 |           prop: "_index",
 34 |           name: "#",
 35 |           width: 80
 36 |         },
 37 |         {
 38 |           prop: "name",
 39 |           name: "Name",
 40 |           width: 400,
 41 |           sortable: true,
 42 |           searchable: true,
 43 |           summary: "COUNT",
 44 |           eClass: { twoLines: "true" },
 45 |           eTip: ["name"],
 46 |           eTipWithProp: false
 47 |         },
 48 |         {
 49 |           prop: "status",
 50 |           name: "Status",
 51 |           filterable: true,
 52 |           filterTag: {
 53 |             ACTIVE: "successTag",
 54 |             PAUSED: "warningTag",
 55 |             DELETED: "dangerTag"
 56 |           }
 57 |         },
 58 |         {
 59 |           prop: "mobile_app_install",
 60 |           name: "Result",
 61 |           sortable: true,
 62 |           summary: "SUM",
 63 |           numberFilter: true
 64 |         },
 65 |         {
 66 |           prop: "reach",
 67 |           name: "Reach",
 68 |           sortable: true,
 69 |           summary: "SUM",
 70 |           numberFilter: true
 71 |         },
 72 |         {
 73 |           prop: "cpr",
 74 |           name: "CPR",
 75 |           sortable: true,
 76 |           summary: "${spend}/${mobile_app_install}",
 77 |           prefix: "$",
 78 |           numberFilter: true
 79 |         },
 80 |         {
 81 |           prop: "spend",
 82 |           name: "Spend",
 83 |           sortable: true,
 84 |           summary: "SUM",
 85 |           prefix: "$",
 86 |           numberFilter: true
 87 |         },
 88 |         {
 89 |           prop: "budget",
 90 |           name: "Budget",
 91 |           sortable: true,
 92 |           summary: "SUM",
 93 |           prefix: "$",
 94 |           eClass: { warningColor: "${daily_budget}<${spend}" },
 95 |           numberFilter: true
 96 |         },
 97 |         {
 98 |           prop: "clicks",
 99 |           name: "Clicks",
100 |           sortable: true,
101 |           summary: "SUM",
102 |           numberFilter: true
103 |         },
104 |         {
105 |           prop: "ctr",
106 |           name: "CTR",
107 |           sortable: true,
108 |           summary: "${clicks}*100/${reach}",
109 |           suffix: "%",
110 |           numberFilter: true
111 |         },
112 |         {
113 |           prop: "cpc",
114 |           name: "CPC",
115 |           sortable: true,
116 |           summary: "${spend}/${clicks}",
117 |           prefix: "$",
118 |           numberFilter: true
119 |         },
120 |         {
121 |           prop: "impressions",
122 |           name: "Imp",
123 |           sortable: true,
124 |           summary: "SUM",
125 |           numberFilter: true
126 |         },
127 |         {
128 |           prop: "cpm",
129 |           name: "CPM",
130 |           sortable: true,
131 |           summary: "${spend}*1000/${impressions}",
132 |           prefix: "$",
133 |           numberFilter: true
134 |         },
135 |         {
136 |           prop: "cr",
137 |           name: "CR",
138 |           sortable: true,
139 |           summary: "${mobile_app_install}/${clicks}",
140 |           numberFilter: true
141 |         },
142 |         {
143 |           prop: "country",
144 |           name: "Country",
145 |           filterable: true
146 |         }
147 |       ],
148 |       tableData: mockData,
149 |       tableAttribute: {
150 |         height: 650,
151 |         itemHeight: 45,
152 |         minWidth: 1800,
153 |         selectable: true,
154 |         enableExport: true,
155 |         bordered: false,
156 |         hoverHighlight: true,
157 |         language: "en"
158 |       }
159 |     };
160 |   },
161 |   components: {
162 |     VueVirtualTable
163 |   },
164 |   mounted() {},
165 |   methods: {
166 |     handleSelectionChange(rows) {
167 |       console.log(rows);
168 |     },
169 |     edit(index, row) {
170 |       console.log(index);
171 |     },
172 |     del(index, row) {
173 |       console.log(index);
174 |     }
175 |   }
176 | };
177 | </script>
178 | 
179 | <style>
180 | #app {
181 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
182 |   -webkit-font-smoothing: antialiased;
183 |   -moz-osx-font-smoothing: grayscale;
184 |   text-align: center;
185 |   color: #2c3e50;
186 |   margin-top: 60px;
187 |   margin: auto;
188 | }
189 | </style>
190 | 


--------------------------------------------------------------------------------
/example/mockData.js:
--------------------------------------------------------------------------------
 1 | export default Array(200).fill({
 2 |   id: '83nbd9282130jd03e',
 3 |   name:
 4 |     'XXXXX-XXXXXX-YYYYYYY-NNNNNNN-MMMMMM-SSSSSSS-LLLLLL-SSSSSS-PPPPPP-OOOOOOO-JJJJJJJJ-LLLLLLLL-AAAAAAAA',
 5 |   status: 'Active',
 6 |   budget: 15,
 7 |   country: 'US',
 8 |   impressions: 1157,
 9 |   reach: 1101,
10 |   clicks: 6,
11 |   spend: 2.04,
12 |   mobile_app_install: 1,
13 |   ctr: 0.54,
14 |   cpc: 0.34,
15 |   cpm: 1.76,
16 |   cpr: 2.04,
17 |   cr: 0.17
18 | })
19 | 


--------------------------------------------------------------------------------
/example/simpleTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div style="width: 1000px;margin: auto;">
  4 |       <vue-virtual-table
  5 |         :config="tableConfig"
  6 |         :data="tableData"
  7 |         :height="tableAttribute.height"
  8 |         :itemHeight="tableAttribute.itemHeight"
  9 |         :minWidth="tableAttribute.minWidth"
 10 |         :selectable="tableAttribute.selectable"
 11 |         :enableExport="tableAttribute.enableExport"
 12 |         :bordered="tableAttribute.bordered"
 13 |         :hoverHighlight="tableAttribute.hoverHighlight"
 14 |         :language="tableAttribute.language"
 15 |         v-on:changeSelection="handleSelectionChange"
 16 |         v-on:click="handleClickRow"
 17 |         v-on:contextmenu="handleContextmenu"
 18 |       >
 19 |         <template slot-scope="scope" slot="actionCommon">
 20 |           <button size="mini" @click="edit(scope.index, scope.row)">
 21 |             Edit
 22 |           </button>
 23 |           <button size="mini" @click="del(scope.index, scope.row)">
 24 |             Delete
 25 |           </button>
 26 |         </template>
 27 |       </vue-virtual-table>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import VueVirtualTable from "../src/vue-virtual-table";
 34 | import { _uuid } from "../src/utils/index.js";
 35 | 
 36 | export default {
 37 |   name: "app",
 38 |   data: () => ({
 39 |     tableConfig: [
 40 |       { prop: "_index", name: "#", width: 80 },
 41 |       {
 42 |         prop: "user",
 43 |         name: "User",
 44 |         searchable: true,
 45 |         sortable: true,
 46 |         summary: "COUNT"
 47 |       },
 48 |       { prop: "age", name: "Age", numberFilter: true },
 49 |       { prop: "city", name: "City", filterable: true },
 50 |       { prop: "_action", name: "Action", actionName: "actionCommon" },
 51 |       { prop: "city", name: "City", filterable: true }
 52 |     ],
 53 |     tableData: [
 54 |       { user: "a1", age: 20, city: "a" },
 55 |       { user: "a2", age: 21, city: "b" },
 56 |       { user: "a3", age: 23, city: "a" }
 57 |     ],
 58 |     tableAttribute: {
 59 |       height: 650,
 60 |       itemHeight: 42,
 61 |       minWidth: 1000,
 62 |       selectable: true,
 63 |       enableExport: true,
 64 |       bordered: false,
 65 |       hoverHighlight: true,
 66 |       language: "en"
 67 |     },
 68 |     lineNum: 1000,
 69 |     userConfig: {
 70 |       prop: "user",
 71 |       name: "User",
 72 |       searchable: true,
 73 |       sortable: true,
 74 |       summary: "COUNT",
 75 |       alignItems: "center",
 76 |       isHidden: false
 77 |     },
 78 |     ageConfig: {
 79 |       prop: "age",
 80 |       name: "Age",
 81 |       numberFilter: true,
 82 |       sortable: false,
 83 |       summary: "",
 84 |       alignItems: "center",
 85 |       isHidden: false
 86 |     },
 87 |     cityConfig: {
 88 |       prop: "city",
 89 |       name: "City",
 90 |       filterable: true,
 91 |       summary: "",
 92 |       alignItems: "center",
 93 |       isHidden: false
 94 |     }
 95 |   }),
 96 |   components: {
 97 |     VueVirtualTable
 98 |   },
 99 |   mounted() {
100 |     this.genData();
101 |   },
102 |   methods: {
103 |     updateTableConfig(prop, conf) {
104 |       let propIndex = this.tableConfig.findIndex(v => v.prop == prop);
105 |       this.tableConfig.splice(propIndex, 1, conf);
106 |     },
107 |     handleSelectionChange(rows) {
108 |       console.log(rows);
109 |     },
110 |     handleClickRow(row, e) {
111 |       console.log(row, e);
112 |     },
113 |     handleContextmenu(row, e) {
114 |       console.log(row, e);
115 |     },
116 |     edit(index, row) {
117 |       console.log(index);
118 |     },
119 |     del(index, row) {
120 |       console.log(index);
121 |     },
122 |     genData() {
123 |       this.randomData(this.lineNum);
124 |     },
125 |     randomData(len) {
126 |       let cts = [
127 |         "a",
128 |         "b",
129 |         "c",
130 |         "d",
131 |         "e",
132 |         "f",
133 |         "g",
134 |         "h",
135 |         "i",
136 |         "j",
137 |         "k",
138 |         "l",
139 |         "m",
140 |         "n"
141 |       ];
142 |       let all_data = [];
143 |       for (let i = 0; i < len; i++) {
144 |         let user = "u" + _uuid(6, 10),
145 |           age = Math.floor((34 - 16) * Math.random()) + 16;
146 |         let cityIndex = Math.floor(cts.length * Math.random());
147 |         let city = cts[cityIndex];
148 |         all_data.push({ user, age, city });
149 |       }
150 |       this.tableData = all_data;
151 |     }
152 |   }
153 | };
154 | </script>
155 | 
156 | <style>
157 | #app {
158 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
159 |   -webkit-font-smoothing: antialiased;
160 |   -moz-osx-font-smoothing: grayscale;
161 |   text-align: center;
162 |   color: #2c3e50;
163 |   margin-top: 60px;
164 |   margin: auto;
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-virtual-table",
 3 |   "version": "0.2.22",
 4 |   "description": "vue table component with virtual dom",
 5 |   "author": "https://github.com/waningflow",
 6 |   "license": "MIT",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/waningflow/vue-virtual-table.git"
10 |   },
11 |   "keywords": [
12 |     "vue",
13 |     "virtual",
14 |     "component",
15 |     "table",
16 |     "smooth",
17 |     "easy"
18 |   ],
19 |   "main": "dist/vue-virtual-table.umd.js",
20 |   "module": "dist/vue-virtual-table.esm.js",
21 |   "unpkg": "dist/vue-virtual-table.min.js",
22 |   "browser": {
23 |     "./sfc": "src/vue-virtual-table.vue"
24 |   },
25 |   "files": [
26 |     "dist/*",
27 |     "src/*"
28 |   ],
29 |   "scripts": {
30 |     "ins": "yarn --registry https://registry.yarnpkg.com",
31 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
32 |     "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd",
33 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
34 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife"
35 |   },
36 |   "publishConfig": {
37 |     "registry": "https://registry.npmjs.org"
38 |   },
39 |   "dependencies": {
40 |     "v-tooltip": "2.0.2",
41 |     "vue-observe-visibility": "^0.4.3",
42 |     "vue-resize": "^0.4.5"
43 |   },
44 |   "devDependencies": {
45 |     "@babel/core": "^7.4.3",
46 |     "@rollup/plugin-node-resolve": "^8.1.0",
47 |     "cross-env": "^5.2.0",
48 |     "minimist": "^1.2.0",
49 |     "node-sass": "^4.11.0",
50 |     "rollup": "^1.32.1",
51 |     "rollup-plugin-babel": "^4.3.2",
52 |     "rollup-plugin-buble": "^0.19.6",
53 |     "rollup-plugin-commonjs": "^9.2.1",
54 |     "rollup-plugin-css-only": "^2.1.0",
55 |     "rollup-plugin-replace": "^2.1.0",
56 |     "rollup-plugin-terser": "^4.0.4",
57 |     "rollup-plugin-vue": "^4.7.2",
58 |     "sass-loader": "^7.1.0",
59 |     "vue": "^2.6.8",
60 |     "vue-template-compiler": "^2.6.8"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # vue-virtual-table
  2 | 
  3 | [![npm version](https://badge.fury.io/js/vue-virtual-table.svg)](https://badge.fury.io/js/vue-virtual-table)
  4 | [![downloads](https://img.shields.io/npm/dm/vue-virtual-table.svg)](https://www.npmjs.com/package/vue-virtual-table)
  5 | 
  6 | Vue table component with virtual dom and easy api.
  7 | 
  8 | - Keep smooth when the data reachs thousands of rows or even more.
  9 | - Easy to use with a simple config.
 10 | 
 11 | [live demo](https://waningflow.com/vue-virtual-table/)
 12 | 
 13 | # Installation
 14 | 
 15 | ```
 16 | yarn add vue-virtual-table
 17 | ```
 18 | 
 19 | or
 20 | 
 21 | ```
 22 | npm install --save vue-virtual-table
 23 | ```
 24 | 
 25 | # Usage
 26 | 
 27 | A simplest example:
 28 | 
 29 | ```html
 30 | <template>
 31 |   <vue-virtual-table :config="tableConfig" :data="tableData"> </vue-virtual-table>
 32 | </template>
 33 | 
 34 | <script>
 35 |   import VueVirtualTable from 'vue-virtual-table'
 36 |   export default {
 37 |     components: {
 38 |       VueVirtualTable
 39 |     },
 40 |     data: () => ({
 41 |       tableConfig: [{ prop: 'user' }, { prop: 'age' }],
 42 |       tableData: [{ user: 'a1', age: 20 }, { user: 'a2', age: 21 }, { user: 'a3', age: 23 }]
 43 |     })
 44 |   }
 45 | </script>
 46 | ```
 47 | 
 48 | Every item of the config refers to a column. When you don't set sepcific 'name' of the table column header, it will uses the 'prop' value as default. Or you can set the tableConfig like:
 49 | 
 50 | ```js
 51 | tableConfig: [{ prop: 'user', name: 'User Name' }, { prop: 'age', name: 'Age' }]
 52 | ```
 53 | 
 54 | And if you want to search in the 'user' column, set the tableConfig like:
 55 | 
 56 | ```js
 57 | tableConfig: [{ prop: 'user', name: 'User Name', searchable: true }, { prop: 'age', name: 'Age' }]
 58 | ```
 59 | 
 60 | For the 'age' column which is a set of number, you'd better use 'numberFilter' to filter numbers with "<", ">", "between" etc.
 61 | 
 62 | ```js
 63 | tableConfig: [{ prop: 'user', name: 'User Name', searchable: true }, { prop: 'age', name: 'Age', numberFilter: true }]
 64 | ```
 65 | 
 66 | There are many convenient features hard to explain one by one.
 67 | Here is a complex example and you can get more info in the tables below the example:
 68 | 
 69 | ```html
 70 | <template>
 71 |   <vue-virtual-table
 72 |     :config="tableConfig"
 73 |     :data="tableData"
 74 |     :height="800"
 75 |     :itemHeight="55"
 76 |     :minWidth="1000"
 77 |     :selectable="true"
 78 |     :enableExport="true"
 79 |     v-on:changeSelection="handleSelectionChange"
 80 |   >
 81 |     <template slot-scope="scope" slot="actionCommon">
 82 |       <button @click="edit(scope.index, scope.row)">Edit</button>
 83 |       <button @click="del(scope.index, scope.row)">Delete</button>
 84 |     </template>
 85 |   </vue-virtual-table>
 86 | </template>
 87 | 
 88 | <script>
 89 |   import VueVirtualTable from 'vue-virtual-table'
 90 |   export default {
 91 |     components: {
 92 |       VueVirtualTable
 93 |     },
 94 |     data: () => ({
 95 |       tableConfig: [
 96 |         { prop: '_index', name: '#', width: 80 },
 97 |         {
 98 |           prop: 'user',
 99 |           name: 'User',
100 |           searchable: true,
101 |           sortable: true,
102 |           summary: 'COUNT'
103 |         },
104 |         { prop: 'age', name: 'Age', numberFilter: true },
105 |         { prop: 'city', name: 'City', filterable: true },
106 |         { prop: '_action', name: 'Action', actionName: 'actionCommon' }
107 |       ],
108 |       tableData: [
109 |         { user: 'a1', age: 20, city: 'aaaa' },
110 |         { user: 'a2', age: 21, city: 'bbbb' },
111 |         { user: 'a3', age: 23, city: 'aaaa' }
112 |       ]
113 |     }),
114 |     methods: {
115 |       handleSelectionChange(rows) {
116 |         console.log(rows)
117 |       },
118 |       edit(index, row) {
119 |         console.log(index)
120 |       },
121 |       del(index, row) {
122 |         console.log(index)
123 |       }
124 |     }
125 |   }
126 | </script>
127 | ```
128 | 
129 | ### Examples
130 | 
131 | [Click here](https://github.com/waningflow/vue-virtual-table/blob/master/example/simpleTable.vue) to see the examples. You can clone this repo and use `vue serve example/xxx.vue` to preview.
132 | 
133 | ### Table Attributes
134 | 
135 | | name           | type    | description                             | required | default |
136 | | -------------- | ------- | --------------------------------------- | -------- | ------- |
137 | | data           | Array   | The array of data. Every item is a row. | Yes      |         |
138 | | config         | Array   | The config of table.                    | Yes      |         |
139 | | minWidth       | Number  | Set the minimum width of table.         | No       | 1200px  |
140 | | height         | Number  | Set the height of table.                | No       | 300px   |
141 | | itemHeight     | Number  | Set the height of row.                  | No       | 42px    |
142 | | bordered       | Boolean | Whether table has vertical border.      | No       | false   |
143 | | hoverHighlight | Boolean | Whether to hightlight current row.      | No       | true    |
144 | | selectable     | Boolean | Whether row is selectable.              | No       | false   |
145 | | enableExport   | Boolean | Whether to show export-to-table button  | No       | false   |
146 | | language       | String  | Language from ['en', 'cn', 'ptBR']              | No       | 'cn'    |
147 | 
148 | ### Table Events
149 | 
150 | | name            | parameters | description                   |
151 | | --------------- | ---------- | ----------------------------- |
152 | | changeSelection | rows       | When the selected rows change |
153 | | click           | row, $event| When row is clicked           |
154 | | contextmenu     | row, $event| When row is right-clicked     |
155 | 
156 | ### Table Config
157 | 
158 | | param          | type    | description                                                                                                                             | required | default                   |
159 | | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------- |
160 | | prop           | String  | Property name                                                                                                                           | Yes      |                           |
161 | | key            | String  | Key of element with data need in filter                                                                                                 | No       | same to the property name |
162 | | name           | String  | Display name                                                                                                                            | No       | same to the property name |
163 | | width          | Number  | Column width                                                                                                                            | No       | auto                      |
164 | | sortable       | Boolean | Whether this column is sortable                                                                                                         | No       | false                     |
165 | | searchable     | Boolean | Whether this column is searchable                                                                                                       | No       | false                     |
166 | | filterable     | Boolean | Whether this column is filterable                                                                                                       | No       | false                     |
167 | | numberFilter   | Boolean | If it's a column of number. You can use this.                                                                                           | No       | false                     |
168 | | summary        | String  | summary type from ['COUNT', 'SUM'] or customize(eg. `${clicks}*100/${reach}` is calculated with the summary of other two columns).      | No       |                           |
169 | | prefix         | String  | Display before the value                                                                                                                | No       |                           |
170 | | suffix         | String  | Display after the value                                                                                                                 | No       |                           |
171 | | alignItems     | String  | Same with flex. Control the content of a cell                                                                                           | No       | center                    |
172 | | justifyContent | String  | Defines how the browser distributes space between and around content items.                                                             | No       | center                    |
173 | | isHidden       | Boolean | Whether this column is hidden                                                                                                           | No       | false                     |
174 | | eTip           | Array   | Tool tip of a cell to display certain props (eg. `['name']` will display the value of 'name' prop in the tool tip )                     | No       |                           |
175 | | eTipWithProp   | Boolean | Whether to show the prop name in the tool tip                                                                                           | No       |                           |
176 | | eClass         | Object  | Attach class to the cell (eg. `{redColor: '${spend}>100'}` add the 'redColor' class to the cell whose 'spend' prop is greater than 100) | No       | No                        |
177 | 
178 | ### Special Props
179 | 
180 | | name     | description                          |
181 | | -------- | ------------------------------------ |
182 | | \_index  | Show the index of row                |
183 | | \_action | A slot to customize the content      |
184 | | \_expand | A slot to customize a popover window |
185 | 
186 | 
187 | ### Custom slot with formatted data and filter
188 | 
189 | ```javascript
190 | {prop: '_action', key: 'price', name: 'Price', sortable: true, numberFilter: true, prefix: "R$ ", actionName: 'price-info'}
191 | ```
192 | 
193 | ```javascript
194 | {id: v.id, name: obj.name, price: obj.price, price_formatted: currency(obj.price)}
195 | ```
196 | 
197 | ```html
198 | <template slot-scope="scope" slot="price-info">
199 |     <div>{{ scope.row.price_formatted }}</div>
200 | </template>
201 | ```


--------------------------------------------------------------------------------
/src/components/base-button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<button class="base-button" :class="{[type+'-btn']: true, 'disabled': disabled}">
 3 | 		<slot></slot>
 4 | 	</button>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     type: {
10 |       type: String,
11 |       default: "plain"
12 |     },
13 |     disabled: {
14 |       type: Boolean,
15 |       default: false
16 |     }
17 |   }
18 | };
19 | </script>
20 | <style scoped lang="scss">
21 | $default-color: #3caed2;
22 | $danger-color: #f56c6c;
23 | 
24 | .base-button {
25 |   font-size: 13px;
26 |   display: inline-block;
27 |   vertical-align: top;
28 |   min-width: 55px;
29 |   min-height: 28px;
30 |   border-radius: 2px;
31 |   outline: none;
32 |   focus-outline: none;
33 | 
34 |   &:active {
35 |     border-style: solid;
36 |   }
37 | 
38 |   &:hover {
39 |     cursor: pointer;
40 |   }
41 |   &.disabled {
42 |     opacity: 0.5;
43 |     cursor: not-allowed;
44 |   }
45 | }
46 | 
47 | .plain-btn {
48 |   color: #606266;
49 |   background: #fff;
50 |   border-color: #dcdfe6;
51 |   &:hover {
52 |     color: $default-color;
53 |     background-color: transparentize($default-color, 0.9);
54 |     border-color: transparentize($default-color, 0.8);
55 |   }
56 |   &.disabled:hover {
57 |     color: #606266;
58 |     background: #fff;
59 |     border-color: #dcdfe6;
60 |   }
61 | }
62 | 
63 | .primary-btn {
64 |   color: $default-color;
65 |   background-color: transparentize($default-color, 0.9);
66 |   border-color: transparentize($default-color, 0.8);
67 |   &:hover {
68 |     color: #fff;
69 |     background-color: $default-color;
70 |     border-color: $default-color;
71 |   }
72 |   &.disabled:hover {
73 |     color: $default-color;
74 |     background-color: transparentize($default-color, 0.9);
75 |     border-color: transparentize($default-color, 0.8);
76 |   }
77 | }
78 | .danger-btn {
79 |   color: $danger-color;
80 |   background-color: transparentize($danger-color, 0.9);
81 |   border-color: transparentize($danger-color, 0.8);
82 |   &:hover {
83 |     color: #fff;
84 |     background-color: $danger-color;
85 |     border-color: $danger-color;
86 |   }
87 |   &.disabled:hover {
88 |     color: $danger-color;
89 |     background-color: transparentize($danger-color, 0.9);
90 |     border-color: transparentize($danger-color, 0.8);
91 |   }
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/components/base-checkgroup.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div class="check-box">
  3 | 		<div class="check-item" v-for="checkItem in choiceList" @click="clickItem(checkItem)" :class="{'checked': checkedGroup.includes(checkItem)}">
  4 | 			<div class="check-icon">
  5 | 				<base-icon icon-name="boxChecked" icon-color="#3caed2" width="14" height="14" v-if="checkedGroup.includes(checkItem)" ></base-icon>
  6 | 				<base-icon icon-name="boxEmpty" icon-color="#dcdfe6" width="14" height="14" v-else></base-icon>
  7 | 			</div>
  8 | 			<div class="check-label">{{checkItem}}</div>
  9 | 		</div>
 10 | 	</div>
 11 | </template>
 12 | <script>
 13 | import BaseIcon from "./base-icon.vue";
 14 | 
 15 | export default {
 16 |   components: {
 17 |     BaseIcon
 18 |   },
 19 |   model: {
 20 |     prop: "checkedValue",
 21 |     event: "change"
 22 |   },
 23 |   props: {
 24 |     checkedValue: Array,
 25 |     choiceList: {
 26 |       type: Array,
 27 |       default: function() {
 28 |         return [];
 29 |       }
 30 |     }
 31 |   },
 32 |   watch: {
 33 |     checkedValue() {
 34 |       this.init();
 35 |     }
 36 |   },
 37 |   data() {
 38 |     return {
 39 |       checkedGroup: []
 40 |     };
 41 |   },
 42 |   mounted() {
 43 |     this.init();
 44 |   },
 45 |   methods: {
 46 |     init() {
 47 |       this.checkedGroup = this.checkedValue.slice();
 48 |     },
 49 |     clickItem(checkItem) {
 50 |       let index = this.checkedGroup.indexOf(checkItem);
 51 |       if (index > -1) {
 52 |         this.checkedGroup.splice(index, 1);
 53 |       } else {
 54 |         this.checkedGroup.push(checkItem);
 55 |       }
 56 |       this.$emit("change", this.checkedGroup);
 57 |     }
 58 |   }
 59 | };
 60 | </script>
 61 | <style scoped lang="scss">
 62 | $default-color: #3caed2;
 63 | $icon-width: 20px;
 64 | $line-height: 25px;
 65 | 
 66 | .check-box {
 67 |   &:hover {
 68 |     cursor: pointer;
 69 |   }
 70 | }
 71 | .check-item {
 72 |   position: relative;
 73 |   padding-left: $icon-width;
 74 |   font-size: 14px;
 75 |   height: $line-height;
 76 |   line-height: $line-height;
 77 | 
 78 |   .icon_box-empty {
 79 |     color: #dcdfe6;
 80 |   }
 81 |   &:hover {
 82 |     cursor: pointer;
 83 |     .icon_box-empty {
 84 |       color: $default-color;
 85 |     }
 86 |   }
 87 | 
 88 |   &.checked {
 89 |     color: $default-color;
 90 |   }
 91 | 
 92 |   .check-icon {
 93 |     position: absolute;
 94 |     left: 0;
 95 |     top: 0;
 96 |     width: $icon-width;
 97 |     height: 100%;
 98 |     display: flex;
 99 |     justify-content: center;
100 |     align-items: center;
101 |   }
102 | 
103 |   .check-label {
104 |     text-align: left;
105 |   }
106 | }
107 | </style>
108 | 


--------------------------------------------------------------------------------
/src/components/base-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg xmlns="http://www.w3.org/2000/svg" 
 3 |     :width="width" 
 4 |     :height="height" 
 5 |     viewBox="0 0 32 32" 
 6 |     :aria-labelledby="iconName" 
 7 |     role="presentation"
 8 |   >
 9 |     <title :id="iconName" lang="en">{{iconName}} icon</title>
10 |     <g :fill="iconColor">
11 |       <component :is="iconName" />
12 |     </g>
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 | import arrowCarrotDown from "./icons/arrowCarrotDown.vue";
18 | import arrowCarrotRight from "./icons/arrowCarrotRight.vue";
19 | import boxChecked from "./icons/boxChecked.vue";
20 | import boxEmpty from "./icons/boxEmpty.vue";
21 | import closeAlt2 from "./icons/closeAlt2.vue";
22 | import cloudDownloadAlt from "./icons/cloudDownloadAlt.vue";
23 | import documentsAlt from "./icons/documentsAlt.vue";
24 | 
25 | export default {
26 |   components: {
27 |     arrowCarrotDown,
28 |     arrowCarrotRight,
29 |     boxChecked,
30 |     boxEmpty,
31 |     closeAlt2,
32 |     cloudDownloadAlt,
33 |     documentsAlt
34 |   },
35 |   props: {
36 |     iconName: {
37 |       type: String,
38 |       default: "box"
39 |     },
40 |     width: {
41 |       type: [Number, String],
42 |       default: 18
43 |     },
44 |     height: {
45 |       type: [Number, String],
46 |       default: 18
47 |     },
48 |     iconColor: {
49 |       type: String,
50 |       default: "currentColor"
51 |     }
52 |   }
53 | };
54 | </script>
55 | 
56 | <style scoped>
57 | svg {
58 |   display: inline-block;
59 |   vertical-align: baseline;
60 |   margin-bottom: -2px; /* yes, I'm that particular about formatting */
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/components/base-input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 		<input :type="type" name="" :value="inputValue" @change="$emit('change', $event.target.value)" class="input-box" :placeholder="placeholder" ref="input" v-observe-visibility="handleVisible">
 3 | </template>
 4 | <script>
 5 | import { ObserveVisibility } from "vue-observe-visibility";
 6 | 
 7 | export default {
 8 |   directives: {
 9 |     ObserveVisibility
10 |   },
11 |   model: {
12 |     prop: "inputValue",
13 |     event: "change"
14 |   },
15 |   props: {
16 |     inputValue: [String, Number],
17 |     type: {
18 |       type: String,
19 |       default: "text"
20 |     },
21 |     placeholder: {
22 |       type: String,
23 |       default: ""
24 |     },
25 |     autoFocus: {
26 |       type: Boolean,
27 |       default: false
28 |     }
29 |   },
30 |   data() {
31 |     return {};
32 |   },
33 |   methods: {
34 |     handleVisible(visible) {
35 |       if (visible && this.autoFocus) {
36 |         this.$refs.input.focus();
37 |       }
38 |     }
39 |   }
40 | };
41 | </script>
42 | <style scoped lang="scss">
43 | $default-color: #3caed2;
44 | 
45 | .input-box {
46 |   display: inline-block;
47 |   box-sizing: border-box;
48 |   height: 32px;
49 |   border: 1px solid #d3d4d6;
50 |   border-radius: 4px;
51 |   padding: 0 5px;
52 |   outline: none;
53 |   font-size: 12px;
54 |   vertical-align: top;
55 | 
56 |   &:focus {
57 |     border-color: $default-color;
58 |     outline: none;
59 |   }
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/components/base-popover.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: inline-block;vertical-align: top;position: relative">
  3 |     <transition :name="animationMode">
  4 |       <div
  5 |         class="pop-card"
  6 |         v-if="isShow"
  7 |         :style="{'left': offset.left +'px', 'top': offset.top+'px','width': width+'px'}"
  8 |         ref="popCard"
  9 |         v-click-out-side="closeCard"
 10 |       >
 11 |         <slot></slot>
 12 |         <div class="pop-arrow" :style="{'left': offset.arrowLeft+'px'}"></div>
 13 |       </div>
 14 |     </transition>
 15 |     <div @click="togglePop" class="pop-handler" ref="popHandler" v-observe-visibility="setSize">
 16 |       <slot name="reference"></slot>
 17 |     </div>
 18 |   </div>
 19 | </template>
 20 | <script>
 21 | import { ObserveVisibility } from "vue-observe-visibility";
 22 | 
 23 | export default {
 24 |   directives: {
 25 |     ObserveVisibility,
 26 |     "click-out-side": {
 27 |       bind(el, binding, vnode) {
 28 |         el.clickOutsideEvent = event => {
 29 |           if (
 30 |             !(
 31 |               el == event.target ||
 32 |               el.contains(event.target) ||
 33 |               !vnode.context.isShow
 34 |             ) ||
 35 |             vnode.context.clickToClose
 36 |           ) {
 37 |             vnode.context[binding.expression](event);
 38 |           }
 39 |         };
 40 |         setTimeout(_ => {
 41 |           document.body.addEventListener("click", el.clickOutsideEvent);
 42 |         }, 0);
 43 |       },
 44 |       unbind(el) {
 45 |         document.body.removeEventListener("click", el.clickOutsideEvent);
 46 |       }
 47 |     }
 48 |   },
 49 |   props: {
 50 |     width: {
 51 |       type: Number,
 52 |       default: function() {
 53 |         return 120;
 54 |       }
 55 |     },
 56 |     clickToClose: {
 57 |       type: Boolean,
 58 |       default: function() {
 59 |         return false;
 60 |       }
 61 |     },
 62 |     animationMode: {
 63 |       type: String,
 64 |       default: function() {
 65 |         return "fade";
 66 |       }
 67 |     },
 68 |     visible: {
 69 |       type: Boolean,
 70 |       default: true
 71 |     },
 72 |     boundary: {
 73 |       default: () => document.body
 74 |     }
 75 |   },
 76 |   data() {
 77 |     return {
 78 |       isShow: false,
 79 |       offset: {
 80 |         left: 0,
 81 |         top: 0,
 82 |         arrowLeft: 0
 83 |       }
 84 |     };
 85 |   },
 86 |   methods: {
 87 |     togglePop(e) {
 88 |       if (!this.visible) {
 89 |         return;
 90 |       }
 91 |       if (this.isShow) {
 92 |         e.stopPropagation();
 93 |       }
 94 |       this.isShow = !this.isShow;
 95 |       this.$emit("showChange", this.isShow);
 96 |       if(this.isShow){
 97 |         this.setSize()
 98 |       }
 99 |     },
100 |     closeCard() {
101 |       if (!this.visible) {
102 |         return;
103 |       }
104 |       this.isShow = false;
105 |       this.$emit("showChange", this.isShow);
106 |     },
107 |     setSize() {
108 |       if (!this.$refs.popHandler) {
109 |         return;
110 |       }
111 |       let {
112 |         x,
113 |         y,
114 |         width,
115 |         height
116 |       } = this.$refs.popHandler.getBoundingClientRect();
117 |       let {
118 |         x: bx,
119 |         y: by,
120 |         width: bwidth,
121 |         height: bheight
122 |       } = this.boundary.getBoundingClientRect();
123 | 
124 |       let moveLeft = 0;
125 |       if (x + this.width > bx + bwidth) {
126 |         moveLeft = x + this.width - (bx + bwidth);
127 |       }
128 |       this.offset.left = -moveLeft;
129 | 
130 |       this.offset.top = height + 10;
131 |       this.offset.arrowLeft = width / 2 - 6 + moveLeft;
132 |     }
133 |   },
134 |   mounted() {
135 |     if (!this.visible) {
136 |       return;
137 |     }
138 |     this.setSize();
139 |     window.addEventListener("resize", this.setSize);
140 |   },
141 |   unmounted() {
142 |     window.removeEventListener("resize", this.setSize);
143 |   }
144 | };
145 | </script>
146 | <style scoped>
147 | .pop-handler {
148 |   display: inline-block;
149 | }
150 | .pop-card {
151 |   /*width: 150px;*/
152 |   min-width: 10px;
153 |   min-height: 10px;
154 |   border: 1px solid #ebeef5;
155 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
156 |   position: absolute;
157 |   top: 60px;
158 |   z-index: 2001;
159 |   background-color: #fff;
160 |   border-radius: 5px;
161 |   box-sizing: border-box;
162 |   transform-origin: 0 0;
163 | }
164 | .pop-arrow,
165 | .pop-arrow::after {
166 |   top: -6px;
167 |   position: absolute;
168 |   display: block;
169 |   width: 0;
170 |   height: 0;
171 |   border-color: transparent;
172 |   border-style: solid;
173 |   border-width: 6px;
174 |   filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
175 |   margin-right: 3px;
176 |   border-top-width: 0;
177 |   border-bottom-color: #ebeef5;
178 | }
179 | .pop-arrow {
180 |   left: 50px;
181 | }
182 | .pop-arrow::after {
183 |   content: " ";
184 |   margin-left: -6px;
185 |   top: 1px;
186 |   /*margin-left: -6px;*/
187 |   /*border-top-width: 0;*/
188 |   border-bottom-color: #fff;
189 | }
190 | .fade-enter-active,
191 | .fade-leave-active,
192 | .slidedown-enter-active,
193 | .slidedown-leave-active {
194 |   transition: all ease 0.2s;
195 | }
196 | .fade-enter,
197 | .fade-leave-to {
198 |   opacity: 0;
199 | }
200 | .slidedown-enter,
201 | .slidedown-leave-to {
202 |   transform: scaleY(0);
203 | }
204 | </style>
205 | 


--------------------------------------------------------------------------------
/src/components/base-select.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 		<BasePopover
  3 | 			:clickToClose="true"
  4 | 			@showChange="handlePopoverChange"
  5 | 			:width="width"
  6 | 			animation-mode="slidedown">
  7 | 			<div class="option-list">
  8 | 				<div v-for="option in choiceList" class="option-item" :class="{'selected': option.value == selected.value}" @click="updateChoice(option)">{{option.label}}</div>
  9 | 			</div>
 10 | 			<div slot="reference" class="select-box" :style="{'width': width+'px'}">
 11 | 					{{selected.label}}
 12 | 				<div class="arrow-side">
 13 | 					<base-icon icon-name="arrowCarrotDown" :style="{'transform': 'rotate(' +arrowRotate +'deg)'}" class="select-arrow" icon-color="#909399" width="16" height="16"></base-icon>
 14 | 				</div>
 15 | 			</div>
 16 | 		</BasePopover>
 17 | </template>
 18 | <script>
 19 | import BasePopover from "./base-popover.vue";
 20 | import BaseIcon from "./base-icon.vue";
 21 | export default {
 22 |   components: {
 23 |     BasePopover,
 24 |     BaseIcon
 25 |   },
 26 |   model: {
 27 |     prop: "selectedValue",
 28 |     event: "change"
 29 |   },
 30 |   props: {
 31 |     choiceList: {
 32 |       type: Array,
 33 |       default: function() {
 34 |         return [];
 35 |       }
 36 |     },
 37 |     selectedValue: [String, Number],
 38 |     width: {
 39 |       type: Number,
 40 |       default: 80
 41 |     }
 42 |   },
 43 |   data() {
 44 |     return {
 45 |       selected: {},
 46 |       arrowRotate: 0
 47 |     };
 48 |   },
 49 |   mounted() {
 50 |     this.updateSelected(this.selectedValue);
 51 |   },
 52 |   methods: {
 53 |     updateSelected(val) {
 54 |       this.selected = this.choiceList.find(v => v.value == val) || {
 55 |         value: val,
 56 |         label: val
 57 |       };
 58 |     },
 59 |     handlePopoverChange(isShow) {
 60 |       if (isShow) {
 61 |         this.arrowRotate = -180;
 62 |       } else {
 63 |         this.arrowRotate = 0;
 64 |       }
 65 |     },
 66 |     updateChoice(option) {
 67 |       this.$emit("change", option.value);
 68 |       this.updateSelected(option.value);
 69 |       // this.selected
 70 |       // this.value = option.value
 71 |       // this.selected = Object.assign({}, option)
 72 |     }
 73 |   }
 74 | };
 75 | </script>
 76 | <style scoped lang="scss">
 77 | $default-color: #3caed2;
 78 | $backgroud-color: #f5f7fa;
 79 | $border-color: #dcdfe6;
 80 | $font-color: #909399;
 81 | $line-height: 32px;
 82 | 
 83 | .select-box {
 84 |   font-size: 13px;
 85 |   height: $line-height;
 86 |   line-height: $line-height;
 87 |   border-radius: 4px;
 88 |   outline: none;
 89 |   background-color: $backgroud-color;
 90 |   color: $font-color;
 91 |   position: relative;
 92 |   border: 1px solid $border-color;
 93 |   white-space: nowrap;
 94 |   padding-left: 5px;
 95 |   padding-right: 20px;
 96 |   box-sizing: border-box;
 97 |   text-align: center;
 98 |   &:hover {
 99 |     cursor: pointer;
100 |   }
101 | }
102 | .option-list {
103 |   font-size: 13px;
104 |   text-align: center;
105 |   padding: 5px 0;
106 |   .option-item {
107 |     padding: 5px;
108 |     &:hover {
109 |       cursor: pointer;
110 |       background-color: $backgroud-color;
111 |     }
112 |     &.selected {
113 |       color: $default-color;
114 |     }
115 |   }
116 | }
117 | .arrow-side {
118 |   position: absolute;
119 |   right: 0;
120 |   top: 0;
121 |   width: 20px;
122 |   height: 100%;
123 |   display: flex;
124 |   justify-content: center;
125 |   align-items: center;
126 | 
127 |   .select-arrow {
128 |     color: $font-color;
129 |     font-size: 16px;
130 |     transition: all ease 0.2s;
131 |   }
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/components/base-tooltip.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: inline-block;vertical-align: top" class="mainCard">
  3 |     <transition :name="animationMode">
  4 |       <div
  5 |         class="pop-card"
  6 |         :style="{'left': offset.left +'px', 'top': offset.top+'px','width': width+'px'}"
  7 |         ref="popCard"
  8 |         @click="handleClick"
  9 |       >
 10 |         <slot></slot>
 11 |         <div class="pop-arrow" :style="{'left': offset.arrowLeft+'px'}"></div>
 12 |       </div>
 13 |     </transition>
 14 |     <div class="pop-handler" ref="popHandler" v-observe-visibility="setSize">
 15 |       <slot name="reference"></slot>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | <script>
 20 | import { ObserveVisibility } from "vue-observe-visibility";
 21 | 
 22 | export default {
 23 |   directives: {
 24 |     ObserveVisibility
 25 |   },
 26 |   props: {
 27 |     width: {
 28 |       type: [Number, String],
 29 |       default: function() {
 30 |         return "auto";
 31 |       }
 32 |     },
 33 |     animationMode: {
 34 |       type: String,
 35 |       default: function() {
 36 |         return "fade";
 37 |       }
 38 |     },
 39 |     visible: {
 40 |       type: Boolean,
 41 |       default: true
 42 |     },
 43 |     boundary: {
 44 |       default: () => document.body
 45 |     }
 46 |   },
 47 |   data() {
 48 |     return {
 49 |       isShow: false,
 50 |       offset: {
 51 |         left: 0,
 52 |         top: 0,
 53 |         arrowLeft: 0
 54 |       }
 55 |     };
 56 |   },
 57 |   methods: {
 58 |     handleClick(e) {
 59 |       e.stopPropagation();
 60 |     },
 61 |     togglePop(e) {
 62 |       if (!this.visible) {
 63 |         return;
 64 |       }
 65 |       if (this.isShow) {
 66 |         e.stopPropagation();
 67 |       }
 68 |       this.isShow = !this.isShow;
 69 |       this.$emit("showChange", this.isShow);
 70 |     },
 71 |     closeCard() {
 72 |       if (!this.visible) {
 73 |         return;
 74 |       }
 75 |       this.isShow = false;
 76 |       this.$emit("showChange", this.isShow);
 77 |     },
 78 |     setSize() {
 79 |       if (!this.$refs.popHandler) {
 80 |         return;
 81 |       }
 82 |       let {
 83 |         x,
 84 |         y,
 85 |         width,
 86 |         height
 87 |       } = this.$refs.popHandler.getBoundingClientRect();
 88 |       let {
 89 |         x: bx,
 90 |         y: by,
 91 |         width: bwidth,
 92 |         height: bheight
 93 |       } = this.boundary.getBoundingClientRect();
 94 | 
 95 |       let moveLeft = 0;
 96 |       if (x + this.width > bx + bwidth) {
 97 |         moveLeft = x + this.width - (bx + bwidth);
 98 |       }
 99 |       this.offset.left = -moveLeft;
100 | 
101 |       this.offset.top = height;
102 |       this.offset.arrowLeft = width / 2 - 6 + moveLeft;
103 |     }
104 |   },
105 |   mounted() {
106 |     if (!this.visible) {
107 |       return;
108 |     }
109 |     this.setSize();
110 |     window.addEventListener("resize", this.setSize);
111 |   },
112 |   unmounted() {
113 |     window.removeEventListener("resize", this.setSize);
114 |   }
115 | };
116 | </script>
117 | <style scoped>
118 | .mainCard:hover .pop-card {
119 |   display: block;
120 | }
121 | .pop-handler {
122 |   display: inline-block;
123 | }
124 | .pop-card {
125 |   /*width: 150px;*/
126 |   min-width: 10px;
127 |   min-height: 10px;
128 |   border: 1px solid #ebeef5;
129 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
130 |   position: absolute;
131 |   top: 60px;
132 |   z-index: 2001;
133 |   background-color: #fff;
134 |   border-radius: 5px;
135 |   box-sizing: border-box;
136 |   transform-origin: 0 0;
137 |   padding: 5px;
138 |   display: none;
139 |   font-size: 13px;
140 | }
141 | .pop-card:hover {
142 |   display: block;
143 | }
144 | .pop-arrow,
145 | .pop-arrow::after {
146 |   top: -6px;
147 |   position: absolute;
148 |   display: block;
149 |   width: 0;
150 |   height: 0;
151 |   border-color: transparent;
152 |   border-style: solid;
153 |   border-width: 6px;
154 |   filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
155 |   margin-right: 3px;
156 |   border-top-width: 0;
157 |   border-bottom-color: #ebeef5;
158 | }
159 | .pop-arrow {
160 |   left: 50px;
161 | }
162 | .pop-arrow::after {
163 |   content: " ";
164 |   margin-left: -6px;
165 |   top: 1px;
166 |   /*margin-left: -6px;*/
167 |   /*border-top-width: 0;*/
168 |   border-bottom-color: #fff;
169 | }
170 | .fade-enter-active,
171 | .fade-leave-active,
172 | .slidedown-enter-active,
173 | .slidedown-leave-active {
174 |   transition: all ease 0.2s;
175 | }
176 | .fade-enter,
177 | .fade-leave-to {
178 |   opacity: 0;
179 | }
180 | .slidedown-enter,
181 | .slidedown-leave-to {
182 |   transform: scaleY(0);
183 | }
184 | </style>
185 | 


--------------------------------------------------------------------------------
/src/components/icons/arrowCarrotDown.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 22.782,13.8L 17,19.582L 11.218,13.8c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414 l 6.486,6.486c 0.196,0.196, 0.454,0.294, 0.71,0.292c 0.258,0, 0.514-0.096, 0.71-0.292l 6.486-6.486c 0.39-0.39, 0.39-1.024,0-1.414 C 23.806,13.41, 23.172,13.41, 22.782,13.8z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/arrowCarrotRight.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 13.8,24.196c 0.39,0.39, 1.024,0.39, 1.414,0l 6.486-6.486c 0.196-0.196, 0.294-0.454, 0.292-0.71 c0-0.258-0.096-0.514-0.292-0.71L 15.214,9.804c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414L 19.582,17 L 13.8,22.782C 13.41,23.172, 13.41,23.806, 13.8,24.196z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/boxChecked.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 26,26L 6,26 L 6,6 l 14.752,0 L 22,4L 6,4 C 4.896,4, 4,4.896, 4,6l0,20 c0,1.104, 0.896,2, 2,2l 20,0 c 1.104,0, 2-0.896, 2-2L 28,12.794 L 26,16L 26,26 zM 29.366,2.228C 29.13,2.074, 28.864,2, 28.602,2c-0.456,0-0.904,0.224-1.172,0.634L 16.558,18.318l-4.206-4.8 C 11.782,12.992, 10.898,13.026, 10.372,13.594S 9.882,15.048, 10.45,15.572l 5.056,5.77c 0.032,0.052, 0.082,0.092, 0.122,0.14l 0.128,0.146 c 0.016,0.014, 0.036,0.018, 0.052,0.032c 0.040,0.032, 0.064,0.076, 0.106,0.106c 0.086,0.056, 0.18,0.092, 0.274,0.126 c 0.022,0.008, 0.040,0.022, 0.062,0.028c 0.14,0.046, 0.286,0.074, 0.43,0.074c 0.006,0, 0.012-0.004, 0.018-0.004 c 0.38,0.002, 0.758-0.138, 1.036-0.438c 0.052-0.056, 0.072-0.124, 0.114-0.186c 0.002-0.002, 0.004-0.004, 0.006-0.006l 11.918-17.194 C 30.194,3.52, 30.014,2.652, 29.366,2.228z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/boxEmpty.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 26,4L 6,4 C 4.896,4, 4,4.896, 4,6l0,20 c0,1.104, 0.896,2, 2,2l 20,0 c 1.104,0, 2-0.896, 2-2L 28,6 C 28,4.896, 27.104,4, 26,4z M 26,26L 6,26 L 6,6 l 20,0 L 26,26 z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/closeAlt2.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 17,2C 8.716,2, 2,8.716, 2,17S 8.716,32, 17,32S 32,25.284, 32,17S 25.284,2, 17,2z M 17,30 C 9.832,30, 4,24.168, 4,17S 9.832,4, 17,4S 30,9.832, 30,17S 24.168,30, 17,30zM 22.536,10.050L 17.038,15.548L 12.108,10.050c-0.39-0.39-1.024-0.39-1.414,0c-0.39,0.39-0.39,1.024,0,1.414 l 4.932,5.498l-5.574,5.574c-0.39,0.39-0.39,1.024,0,1.414c 0.39,0.39, 1.024,0.39, 1.414,0l 5.498-5.498l 4.932,5.498 c 0.39,0.39, 1.024,0.39, 1.414,0s 0.39-1.024,0-1.414L 18.376,17.038l 5.574-5.574c 0.39-0.39, 0.39-1.024,0-1.414 C 23.56,9.66, 22.926,9.66, 22.536,10.050z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/cloudDownloadAlt.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 26.166,16c 1.868-4.29, 0.716-7.018-0.222-8.332c-1.424-1.994-4.018-3.088-6.296-2.65 C 15.688,5.774, 14,8.458, 14,14l0,4.628 L 11.684,16.312c-0.39-0.39-1.024-0.39-1.414,0s-0.39,1.024,0,1.414l 4.024,4.022 c 0.202,0.202, 0.468,0.294, 0.732,0.288c 0.264,0.006, 0.53-0.086, 0.732-0.288l 4.044-4.042c 0.39-0.39, 0.39-1.024,0-1.414 s-1.024-0.39-1.414,0L 16,18.678L 16,14 c0-5.768, 1.986-6.628, 4.020-7.018c 1.306-0.24, 3.196,0.308, 4.294,1.848 c 1.344,1.878, 1.086,4.664-0.726,7.84c-0.192,0.338-0.172,0.756, 0.052,1.072s 0.618,0.476, 0.992,0.408 c 0.242-0.042, 0.964-0.152, 1.42-0.152C 28.23,17.998, 30,19.792, 30,22c0,2.206-1.794,4-4,4l-19.854,0.012C 3.822,25.668, 2,23.466, 2,21 c0-2.456, 1.844-4.57, 4.292-4.92l 0.86-0.124c 0.492-0.070, 0.858-0.492, 0.858-0.99L 7.994,13.902C 8,10.32, 10.208,7.376, 13.25,6.902 C 13.794,6.816, 14.168,6.306, 14.084,5.76C 13.998,5.214, 13.5,4.844, 12.94,4.926C 8.92,5.552, 6,9.326, 5.994,13.898 c0,0.002, 0.016,0.202, 0.016,0.202l0,0 C 2.584,14.59,0,17.556,0,21c0,3.492, 2.516,6.496, 6,7l 20,0 c 3.308,0, 6-2.692, 6-6 C 32,18.728, 29.392,16.060, 26.166,16z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/icons/documentsAlt.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<path d="M 4,28l 2,0 l0,2 c0,1.104, 0.896,2, 2,2l 20,0 c 1.104,0, 2-0.896, 2-2L 30,6 c0-1.104-0.896-2-2-2l-2,0 L 26,2 c0-1.104-0.896-2-2-2L 4,0 C 2.896,0, 2,0.896, 2,2l0,24 C 2,27.104, 2.896,28, 4,28z M 24,26L 4,26 L 4,2 l 20,0 L 24,26 z M 28,6l0,24 L 8,30 l0-2 l 16,0 c 1.104,0, 2-0.896, 2-2L 26,6 L 28,6 zM 10,7C 10,7.552, 10.448,8, 11,8l 10,0 C 21.552,8, 22,7.552, 22,7C 22,6.448, 21.552,6, 21,6l-10,0 C 10.448,6, 10,6.448, 10,7zM 7,14l 14,0 C 21.552,14, 22,13.552, 22,13C 22,12.448, 21.552,12, 21,12l-14,0 C 6.448,12, 6,12.448, 6,13 C 6,13.552, 6.448,14, 7,14zM 7,18l 14,0 C 21.552,18, 22,17.552, 22,17C 22,16.448, 21.552,16, 21,16l-14,0 C 6.448,16, 6,16.448, 6,17 C 6,17.552, 6.448,18, 7,18zM 7,22l 14,0 c 0.552,0, 1-0.448, 1-1c0-0.552-0.448-1-1-1l-14,0 C 6.448,20, 6,20.448, 6,21 C 6,21.552, 6.448,22, 7,22z"></path>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/src/components/virtual-scroller.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <component
  3 |     :is="mainTag"
  4 |     class="virtual-scroller"
  5 |     :class="cssClass"
  6 |     @scroll="handleScroll"
  7 |     v-observe-visibility="handleVisibilityChange"
  8 |   >
  9 |     <slot
 10 |       name="before-container"
 11 |     />
 12 |     <component
 13 |       ref="itemContainer"
 14 |       :is="containerTag"
 15 |       class="item-container"
 16 |       :class="containerClass"
 17 |       :style="itemContainerStyle"
 18 |     >
 19 |       <slot
 20 |         name="before-content"
 21 |       />
 22 |       <component
 23 |         ref="items"
 24 |         :is="contentTag"
 25 |         class="items"
 26 |         :class="contentClass"
 27 |         :style="itemsStyle"
 28 |       >
 29 |       <slot
 30 |         name="before-item"
 31 |       />
 32 |         <template v-if="renderers">
 33 |           <component
 34 |             class="item"
 35 |             v-for="(item, index) in visibleItems"
 36 |             :key="keysEnabled && item[keyField] || ''"
 37 |             :is="renderers[item[typeField]]"
 38 |             :item="item"
 39 |             :item-index="$_startIndex + index"
 40 |           />
 41 |         </template>
 42 |         <template v-else>
 43 |           <slot
 44 |             class="item"
 45 |             v-for="(item, index) in visibleItems"
 46 |             :item="item"
 47 |             :item-index="$_startIndex + index"
 48 |             :item-key="keysEnabled && item[keyField] || ''"
 49 |           />
 50 |         </template>
 51 |       </component>
 52 |       <slot
 53 |         name="after-content"
 54 |       />
 55 |     </component>
 56 |     <slot
 57 |       name="after-container"
 58 |     />
 59 |     <resize-observer @notify="handleResize" />
 60 |   </component>
 61 | </template>
 62 | 
 63 | <script>
 64 | import { ResizeObserver } from "vue-resize";
 65 | import { ObserveVisibility } from "vue-observe-visibility";
 66 | 
 67 | export default {
 68 |   name: "virtual-scroller",
 69 | 
 70 |   components: {
 71 |     ResizeObserver
 72 |   },
 73 | 
 74 |   directives: {
 75 |     ObserveVisibility
 76 |   },
 77 | 
 78 |   props: {
 79 |     items: {
 80 |       type: Array,
 81 |       required: true
 82 |     },
 83 |     renderers: {
 84 |       default: null
 85 |     },
 86 |     itemHeight: {
 87 |       type: [Number, String],
 88 |       default: null
 89 |     },
 90 |     typeField: {
 91 |       type: String,
 92 |       default: "type"
 93 |     },
 94 |     keyField: {
 95 |       type: String,
 96 |       default: "id"
 97 |     },
 98 |     heightField: {
 99 |       type: String,
100 |       default: "height"
101 |     },
102 |     mainTag: {
103 |       type: String,
104 |       default: "div"
105 |     },
106 |     containerTag: {
107 |       type: String,
108 |       default: "div"
109 |     },
110 |     containerClass: {
111 |       default: null
112 |     },
113 |     contentTag: {
114 |       type: String,
115 |       default: "div"
116 |     },
117 |     contentClass: {
118 |       default: null
119 |     },
120 |     pageMode: {
121 |       type: Boolean,
122 |       default: false
123 |     },
124 |     buffer: {
125 |       type: [Number, String],
126 |       default: 200
127 |     },
128 |     poolSize: {
129 |       type: [Number, String],
130 |       default: 2000
131 |     },
132 |     prerender: {
133 |       type: [Number, String],
134 |       default: 0
135 |     },
136 |     emitUpdate: {
137 |       type: Boolean,
138 |       default: false
139 |     },
140 |     delayPreviousItems: {
141 |       type: Boolean,
142 |       default: false
143 |     }
144 |   },
145 | 
146 |   data() {
147 |     return {
148 |       visibleItems: [],
149 |       itemContainerStyle: null,
150 |       itemsStyle: null,
151 |       keysEnabled: true
152 |     };
153 |   },
154 | 
155 |   computed: {
156 |     cssClass() {
157 |       return {
158 |         "page-mode": this.pageMode
159 |       };
160 |     },
161 | 
162 |     heights() {
163 |       if (this.itemHeight === null) {
164 |         const heights = {};
165 |         const items = this.items;
166 |         const field = this.heightField;
167 |         let accumulator = 0;
168 |         for (let i = 0; i < items.length; i++) {
169 |           accumulator += items[i][field];
170 |           heights[i] = accumulator;
171 |         }
172 |         return heights;
173 |       }
174 |     }
175 |   },
176 | 
177 |   watch: {
178 |     items: {
179 |       handler() {
180 |         this.updateVisibleItems(true);
181 |       },
182 |       deep: true
183 |     },
184 |     pageMode() {
185 |       this.applyPageMode();
186 |       this.updateVisibleItems(true);
187 |     },
188 |     itemHeight: "setDirty"
189 |   },
190 | 
191 |   created() {
192 |     this.$_ready = false;
193 |     this.$_startIndex = 0;
194 |     this.$_oldScrollTop = null;
195 |     this.$_oldScrollBottom = null;
196 |     this.$_offsetTop = 0;
197 |     this.$_height = 0;
198 |     this.$_scrollDirty = false;
199 |     this.$_updateDirty = false;
200 | 
201 |     const prerender = parseInt(this.prerender);
202 |     if (prerender > 0) {
203 |       this.visibleItems = this.items.slice(0, prerender);
204 |       this.$_length = this.visibleItems.length;
205 |       this.$_endIndex = this.$_length - 1;
206 |       this.$_skip = true;
207 |     } else {
208 |       this.$_endIndex = 0;
209 |       this.$_length = 0;
210 |       this.$_skip = false;
211 |     }
212 |   },
213 | 
214 |   mounted() {
215 |     this.applyPageMode();
216 |     this.$nextTick(() => {
217 |       this.updateVisibleItems(true);
218 |       this.$_ready = true;
219 |     });
220 |   },
221 | 
222 |   beforeDestroy() {
223 |     this.removeWindowScroll();
224 |   },
225 | 
226 |   methods: {
227 |     getScroll() {
228 |       const el = this.$el;
229 |       let scroll;
230 | 
231 |       if (this.pageMode) {
232 |         const rect = el.getBoundingClientRect();
233 |         let top = -rect.top;
234 |         let height = window.innerHeight;
235 |         if (top < 0) {
236 |           height += top;
237 |           top = 0;
238 |         }
239 |         if (top + height > rect.height) {
240 |           height = rect.height - top;
241 |         }
242 |         scroll = {
243 |           top: top,
244 |           bottom: top + height
245 |         };
246 |       } else {
247 |         scroll = {
248 |           top: el.scrollTop,
249 |           bottom: el.scrollTop + el.clientHeight
250 |         };
251 |       }
252 | 
253 |       if (scroll.bottom >= 0 && scroll.top <= scroll.bottom) {
254 |         return scroll;
255 |       } else {
256 |         return null;
257 |       }
258 |     },
259 | 
260 |     updateVisibleItems(force = false) {
261 |       if (!this.$_updateDirty) {
262 |         this.$_updateDirty = true;
263 |         this.$nextTick(() => {
264 |           this.$_updateDirty = false;
265 | 
266 |           const l = this.items.length;
267 |           const scroll = this.getScroll();
268 |           const items = this.items;
269 |           const itemHeight = this.itemHeight;
270 |           let containerHeight, offsetTop;
271 |           if (scroll) {
272 |             let startIndex = -1;
273 |             let endIndex = -1;
274 | 
275 |             const buffer = parseInt(this.buffer);
276 |             const poolSize = parseInt(this.poolSize);
277 |             const scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer;
278 |             const scrollBottom =
279 |               Math.ceil(scroll.bottom / poolSize) * poolSize + buffer;
280 | 
281 |             if (
282 |               !force &&
283 |               ((scrollTop === this.$_oldScrollTop &&
284 |                 scrollBottom === this.$_oldScrollBottom) ||
285 |                 this.$_skip)
286 |             ) {
287 |               this.$_skip = false;
288 |               return;
289 |             } else {
290 |               this.$_oldScrollTop = scrollTop;
291 |               this.$_oldScrollBottom = scrollBottom;
292 |             }
293 | 
294 |             // Variable height mode
295 |             if (itemHeight === null) {
296 |               const heights = this.heights;
297 |               let h;
298 |               let a = 0;
299 |               let b = l - 1;
300 |               let i = ~~(l / 2);
301 |               let oldI;
302 | 
303 |               // Searching for startIndex
304 |               do {
305 |                 oldI = i;
306 |                 h = heights[i];
307 |                 if (h < scrollTop) {
308 |                   a = i;
309 |                 } else if (i < l && heights[i + 1] > scrollTop) {
310 |                   b = i;
311 |                 }
312 |                 i = ~~((a + b) / 2);
313 |               } while (i !== oldI);
314 |               i < 0 && (i = 0);
315 |               startIndex = i;
316 | 
317 |               // For containers style
318 |               offsetTop = i > 0 ? heights[i - 1] : 0;
319 |               containerHeight = heights[l - 1];
320 | 
321 |               // Searching for endIndex
322 |               for (
323 |                 endIndex = i;
324 |                 endIndex < l && heights[endIndex] < scrollBottom;
325 |                 endIndex++
326 |               );
327 |               if (endIndex === -1) {
328 |                 endIndex = items.length - 1;
329 |               } else {
330 |                 endIndex++;
331 |                 // Bounds
332 |                 endIndex > l && (endIndex = l);
333 |               }
334 |             } else {
335 |               // Fixed height mode
336 |               startIndex = ~~(scrollTop / itemHeight);
337 |               endIndex = Math.ceil(scrollBottom / itemHeight);
338 | 
339 |               // Bounds
340 |               startIndex < 0 && (startIndex = 0);
341 |               endIndex > l && (endIndex = l);
342 | 
343 |               offsetTop = startIndex * itemHeight;
344 |               containerHeight = l * itemHeight;
345 |             }
346 | 
347 |             if (
348 |               force ||
349 |               this.$_startIndex !== startIndex ||
350 |               this.$_endIndex !== endIndex ||
351 |               this.$_offsetTop !== offsetTop ||
352 |               this.$_height !== containerHeight ||
353 |               this.$_length !== l
354 |             ) {
355 |               this.keysEnabled = !(
356 |                 startIndex > this.$_endIndex || endIndex < this.$_startIndex
357 |               );
358 | 
359 |               this.itemContainerStyle = {
360 |                 height: containerHeight + "px"
361 |               };
362 |               this.itemsStyle = {
363 |                 marginTop: offsetTop + "px"
364 |               };
365 | 
366 |               if (this.delayPreviousItems) {
367 |                 // Add next items
368 |                 this.visibleItems = items.slice(this.$_startIndex, endIndex);
369 |                 // Remove previous items
370 |                 this.$nextTick(() => {
371 |                   this.visibleItems = items.slice(startIndex, endIndex);
372 |                 });
373 |               } else {
374 |                 this.visibleItems = items.slice(startIndex, endIndex);
375 |               }
376 | 
377 |               this.emitUpdate && this.$emit("update", startIndex, endIndex);
378 | 
379 |               this.$_startIndex = startIndex;
380 |               this.$_endIndex = endIndex;
381 |               this.$_length = l;
382 |               this.$_offsetTop = offsetTop;
383 |               this.$_height = containerHeight;
384 |             }
385 |           }
386 |         });
387 |       }
388 |     },
389 | 
390 |     scrollToItem(index) {
391 |       let scrollTop;
392 |       if (this.itemHeight === null) {
393 |         scrollTop = index > 0 ? this.heights[index - 1] : 0;
394 |       } else {
395 |         scrollTop = index * this.itemHeight;
396 |       }
397 |       this.$el.scrollTop = scrollTop;
398 |     },
399 | 
400 |     setDirty() {
401 |       this.$_oldScrollTop = null;
402 |       this.$_oldScrollBottom = null;
403 |     },
404 | 
405 |     applyPageMode() {
406 |       if (this.pageMode) {
407 |         this.addWindowScroll();
408 |       } else {
409 |         this.removeWindowScroll();
410 |       }
411 |     },
412 | 
413 |     addWindowScroll() {
414 |       window.addEventListener("scroll", this.handleScroll, true);
415 |       window.addEventListener("resize", this.handleResize);
416 |     },
417 | 
418 |     removeWindowScroll() {
419 |       window.removeEventListener("scroll", this.handleScroll, true);
420 |       window.removeEventListener("resize", this.handleResize);
421 |     },
422 | 
423 |     handleScroll() {
424 |       if (!this.$_scrollDirty) {
425 |         this.$_scrollDirty = true;
426 |         requestAnimationFrame(() => {
427 |           this.$_scrollDirty = false;
428 |           this.updateVisibleItems();
429 |         });
430 |       }
431 |     },
432 | 
433 |     handleResize() {
434 |       this.$emit("resize");
435 |       this.$_ready && this.updateVisibleItems();
436 |     },
437 | 
438 |     handleVisibilityChange(isVisible, entry) {
439 |       if (
440 |         this.$_ready &&
441 |         (isVisible ||
442 |           entry.boundingClientRect.width !== 0 ||
443 |           entry.boundingClientRect.height !== 0)
444 |       ) {
445 |         this.$emit("visible");
446 |         this.$nextTick(() => {
447 |           this.updateVisibleItems();
448 |         });
449 |       }
450 |     }
451 |   }
452 | };
453 | </script>
454 | 
455 | <style scoped>
456 | .virtual-scroller:not(.page-mode) {
457 |   overflow-y: scroll;
458 | }
459 | 
460 | .item-container {
461 |   box-sizing: border-box;
462 |   width: 100%;
463 |   overflow: hidden;
464 | }
465 | 
466 | .items {
467 |   width: 100%;
468 | }
469 | table {
470 |   border-collapse: collapse;
471 |   table-layout: fixed;
472 | }
473 | td {
474 |   /*overflow: scroll;*/
475 | }
476 | </style>
477 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from './vue-virtual-table.vue';
 3 | 
 4 | // install function executed by Vue.use()
 5 | function install(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component('VueVirtualTable', component);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // To auto-install when vue is found
17 | /* global window global */
18 | let GlobalVue = null;
19 | if (typeof window !== 'undefined') {
20 |   GlobalVue = window.Vue;
21 | } else if (typeof global !== 'undefined') {
22 |   GlobalVue = global.Vue;
23 | }
24 | if (GlobalVue) {
25 |   GlobalVue.use(plugin);
26 | }
27 | 
28 | // Inject install function into component - allows component
29 | // to be registered via Vue.use() as well as Vue.component()
30 | component.install = install;
31 | 
32 | // Export component by default
33 | export default component;
34 | 
35 | // It's possible to expose named exports when writing components that can
36 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
37 | // export const RollupDemoDirective = component;
38 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | export function _uuid() {
 2 |   var d = Date.now()
 3 |   if (
 4 |     typeof performance !== 'undefined' &&
 5 |     typeof performance.now === 'function'
 6 |   ) {
 7 |     d += performance.now() //use high-precision timer if available
 8 |   }
 9 |   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
10 |     var r = ((d + Math.random() * 16) % 16) | 0
11 |     d = Math.floor(d / 16)
12 |     return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
13 |   })
14 | }
15 | 
16 | export function exportCsv(data, columns, title) {
17 |   let csv = JSONtoCSV(data, columns)
18 | 
19 |   let createAndDownloadFile = (fileName, content) => {
20 |     let aTag = document.createElement('a')
21 |     let blob = new Blob(['\uFEFF', content])
22 |     aTag.download = fileName
23 |     aTag.href = URL.createObjectURL(blob)
24 |     aTag.click()
25 |     URL.revokeObjectURL(blob)
26 |   }
27 |   createAndDownloadFile(title, csv)
28 | }
29 | 
30 | export function JSONtoCSV(arr, columns, delimiter = ',') {
31 |   return [
32 |     ...arr.map(obj =>
33 |       columns.reduce(
34 |         (acc, key) =>
35 |           `${acc}${!acc.length ? '' : delimiter}"${!obj[key] ? '' : obj[key]}"`,
36 |         ''
37 |       )
38 |     )
39 |   ].join('\n')
40 | }
41 | 
42 | export function deepCopy(obj) {
43 |   let obj_cp = JSON.parse(JSON.stringify(obj))
44 |   return obj_cp
45 | }
46 | 
47 | export function debounce(fun, t = 0) {
48 |   let st
49 |   if (typeof fun !== 'function') {
50 |     throw new TypeError('Not a function')
51 |   }
52 |   return function() {
53 |     if (st) {
54 |       clearTimeout(st)
55 |     }
56 |     st = setTimeout(() => {
57 |       fun.apply(this, arguments)
58 |     }, t)
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/vue-virtual-table.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div class="main-scroll" ref="mainScroll" v-observe-visibility="setSize">
   3 |     <div
   4 |       ref="mainTable"
   5 |       :style="{ 'min-width': minWidthTemp + 'px', position: 'relative' }"
   6 |       :class="{ bordered: bordered }"
   7 |     >
   8 |       <div
   9 |         style="text-align: right; position: absolute;right: 5px;top: 5px;"
  10 |         v-if="enableExport"
  11 |       >
  12 |         <base-icon
  13 |           icon-name="cloudDownloadAlt"
  14 |           icon-color="#bbbbbb"
  15 |           width="20"
  16 |           height="20"
  17 |           @click.native="handleExportTable"
  18 |           class="download-icon"
  19 |         ></base-icon>
  20 |       </div>
  21 |       <div class="t-header">
  22 |         <div ref="tHeaderTable">
  23 |           <template v-if="!enableMultiHeader">
  24 |             <div class="header-line">
  25 |               <div
  26 |                 class="header-cell"
  27 |                 v-for="(item, configIndex) in configTemp.filter(
  28 |                   v => !v.isHidden
  29 |                 )"
  30 |                 :key="configIndex"
  31 |                 :style="{ flex: colWidth[configIndex] }"
  32 |               >
  33 |                 <div
  34 |                   class="header-cell-inner search-wrapper"
  35 |                   v-if="item.searchable"
  36 |                 >
  37 |                   <base-popover :width="340" :boundary="$refs.mainScroll">
  38 |                     <div style="padding: 10px;text-align: left;font-size: 0">
  39 |                       <template v-for="(phrase, ph_index) in item.searchPhrase">
  40 |                         <base-select
  41 |                           :key="'s_' + ph_index"
  42 |                           v-model="phrase.operator"
  43 |                           @change="handleClickConfirmFilter(configIndex)"
  44 |                           :choice-list="
  45 |                             allPhraseOperator.map(v => ({
  46 |                               value: v.value,
  47 |                               label:
  48 |                                 languageOptions[language].phraseFilter[v.value]
  49 |                             }))
  50 |                           "
  51 |                         ></base-select>
  52 |                         <base-input
  53 |                           :key="'in_' + ph_index"
  54 |                           v-model="phrase.value"
  55 |                           @change="handleClickConfirmFilter(configIndex)"
  56 |                           style="margin:0 5px 6px 5px;width: 210px"
  57 |                           :placeholder="
  58 |                             languageOptions[language].phraseFilter['ph']
  59 |                           "
  60 |                           auto-focus
  61 |                         ></base-input>
  62 |                         <base-icon
  63 |                           :key="'ic_' + ph_index"
  64 |                           icon-name="closeAlt2"
  65 |                           icon-color="#c0c4cc"
  66 |                           style="margin-top: 9px"
  67 |                           width="13"
  68 |                           height="13"
  69 |                           v-show="ph_index > 0"
  70 |                           @click.native="
  71 |                             removePhraseFilter(configIndex, ph_index)
  72 |                           "
  73 |                         ></base-icon>
  74 |                       </template>
  75 |                       <div style="display: flex">
  76 |                         <base-button
  77 |                           class="btn filterBtnEmpty"
  78 |                           type="primary"
  79 |                           @click.native="addFilterPhrase(configIndex)"
  80 |                           :disabled="item.searchPhrase.length >= phraseLimit"
  81 |                           >{{
  82 |                             languageOptions[language].phraseFilter["and_btn"]
  83 |                           }}</base-button
  84 |                         >
  85 |                         <base-button
  86 |                           class="btn filterBtnEmpty"
  87 |                           style="margin-left: 5px"
  88 |                           type="danger"
  89 |                           @click.native="
  90 |                             handleClickEmptyPhraseFilter(configIndex)
  91 |                           "
  92 |                           >{{
  93 |                             languageOptions[language].phraseFilter["clear_btn"]
  94 |                           }}</base-button
  95 |                         >
  96 |                       </div>
  97 |                     </div>
  98 | 
  99 |                     <span slot="reference">
 100 |                       <span
 101 |                         v-if="item.name"
 102 |                         :class="{
 103 |                           searched:
 104 |                             item.searchPhrase.findIndex(v => v.value != '') > -1
 105 |                         }"
 106 |                         >{{ item.name }}</span
 107 |                       >
 108 |                       <span
 109 |                         v-else
 110 |                         :class="{
 111 |                           searched:
 112 |                             item.searchPhrase.findIndex(v => v.value != '') > -1
 113 |                         }"
 114 |                         >{{ item.prop }}</span
 115 |                       >
 116 |                     </span>
 117 |                   </base-popover>
 118 |                 </div>
 119 |                 <div
 120 |                   class="header-cell-inner filter-wrapper"
 121 |                   v-else-if="item.filterable"
 122 |                 >
 123 |                   <base-popover :width="240" :boundary="$refs.mainScroll">
 124 |                     <div style="padding: 5px;">
 125 |                       <base-checkgroup
 126 |                         v-model="item.filterSelectedOptions"
 127 |                         @change="handleChangeFilter"
 128 |                         :choice-list="item.filterOptions"
 129 |                         class="filter-list"
 130 |                       ></base-checkgroup>
 131 |                       <div class="filter-btn">
 132 |                         <base-button
 133 |                           type="primary"
 134 |                           @click.native="handleClickConfirmFilter(configIndex)"
 135 |                           >{{
 136 |                             languageOptions[language].selectFilter[
 137 |                               "confirm_btn"
 138 |                             ]
 139 |                           }}</base-button
 140 |                         >
 141 |                         <base-button
 142 |                           type="primary"
 143 |                           style="margin-left: 5px;"
 144 |                           @click.native="handleClickReverseFilter(configIndex)"
 145 |                           >{{
 146 |                             languageOptions[language].selectFilter[
 147 |                               "reverse_btn"
 148 |                             ]
 149 |                           }}</base-button
 150 |                         >
 151 |                         <base-button
 152 |                           type="danger"
 153 |                           style="margin-left: 5px;"
 154 |                           @click.native="handleClickClearFilter(configIndex)"
 155 |                           >{{
 156 |                             languageOptions[language].selectFilter["clear_btn"]
 157 |                           }}</base-button
 158 |                         >
 159 |                       </div>
 160 |                     </div>
 161 |                     <span slot="reference">
 162 |                       <span
 163 |                         v-if="item.name"
 164 |                         :class="{
 165 |                           filtered:
 166 |                             item.filterSelectedOptions &&
 167 |                             item.filterSelectedOptions.length
 168 |                         }"
 169 |                         >{{ item.name }}</span
 170 |                       >
 171 |                       <span
 172 |                         v-else
 173 |                         :class="{
 174 |                           filtered:
 175 |                             item.filterSelectedOptions &&
 176 |                             item.filterSelectedOptions.length
 177 |                         }"
 178 |                         >{{ item.key || item.prop }}</span
 179 |                       >
 180 |                       <base-icon
 181 |                         icon-name="arrowCarrotDown"
 182 |                         icon-color="#c0c4cc"
 183 |                         width="16"
 184 |                         height="16"
 185 |                       ></base-icon>
 186 |                     </span>
 187 |                   </base-popover>
 188 |                 </div>
 189 |                 <div
 190 |                   class="header-cell-inner numFiltered-wrapper"
 191 |                   v-else-if="item.numberFilter"
 192 |                 >
 193 |                   <base-popover
 194 |                     :width="
 195 |                       item.numberFilterPhrase.operator === 'bt' ? 298 : 198
 196 |                     "
 197 |                     :boundary="$refs.mainScroll"
 198 |                   >
 199 |                     <div style="padding: 10px;text-align: left;font-size: 0">
 200 |                       <base-select
 201 |                         v-model="item.numberFilterPhrase.operator"
 202 |                         :choice-list="
 203 |                           allOperatorType.map(v => ({
 204 |                             value: v.value,
 205 |                             label:
 206 |                               languageOptions[language].numberFilter[v.value]
 207 |                           }))
 208 |                         "
 209 |                         placeholder
 210 |                         @change="handleClickConfirmFilter(configIndex)"
 211 |                       ></base-select>
 212 |                       <base-input
 213 |                         style="width: 90px;margin-left: 5px"
 214 |                         type="number"
 215 |                         v-model="item.numberFilterPhrase.value[0]"
 216 |                         @change="handleClickConfirmFilter(configIndex)"
 217 |                         auto-focus
 218 |                       ></base-input>
 219 |                       <div
 220 |                         style="display: inline-block;font-size: 13px"
 221 |                         v-show="item.numberFilterPhrase.operator === 'bt'"
 222 |                       >
 223 |                         ~
 224 |                       </div>
 225 |                       <base-input
 226 |                         style="width: 90px;margin-left: 1px;"
 227 |                         type="number"
 228 |                         v-model="item.numberFilterPhrase.value[1]"
 229 |                         v-show="item.numberFilterPhrase.operator === 'bt'"
 230 |                         @change="handleClickConfirmFilter(configIndex)"
 231 |                       ></base-input>
 232 |                       <div style="text-align: right;">
 233 |                         <base-button
 234 |                           style="margin-top: 10px"
 235 |                           type="danger"
 236 |                           @click.native="
 237 |                             handleClickEmptyNumberFilter(configIndex)
 238 |                           "
 239 |                           >{{
 240 |                             languageOptions[language].numberFilter["clear_btn"]
 241 |                           }}</base-button
 242 |                         >
 243 |                       </div>
 244 |                     </div>
 245 |                     <span slot="reference">
 246 |                       <span
 247 |                         v-if="item.name"
 248 |                         :class="{
 249 |                           numFiltered: item.numberFilterPhrase.value[0] !== ''
 250 |                         }"
 251 |                         >{{ item.name }}</span
 252 |                       >
 253 |                       <span
 254 |                         v-else
 255 |                         :class="{
 256 |                           numFiltered: item.numberFilterPhrase.value[0] !== ''
 257 |                         }"
 258 |                         >{{ item.prop }}</span
 259 |                       >
 260 |                     </span>
 261 |                   </base-popover>
 262 |                 </div>
 263 |                 <div class="header-cell-inner" v-else>
 264 |                   <span
 265 |                     v-if="item.name"
 266 |                     :class="{
 267 |                       filtered:
 268 |                         item.filterSelectedOptions &&
 269 |                         item.filterSelectedOptions.length
 270 |                     }"
 271 |                     >{{ item.name }}</span
 272 |                   >
 273 |                   <span
 274 |                     v-else
 275 |                     :class="{
 276 |                       filtered:
 277 |                         item.filterSelectedOptions &&
 278 |                         item.filterSelectedOptions.length
 279 |                     }"
 280 |                     >{{ item.key || item.prop }}</span
 281 |                   >
 282 |                 </div>
 283 |                 <div
 284 |                   class="header-cell-inner all-select"
 285 |                   v-if="selectable && item.prop === '_index'"
 286 |                   @click="selectAll()"
 287 |                 >
 288 |                   {{ languageOptions[language].selectAll }}
 289 |                 </div>
 290 |                 <div
 291 |                   class="header-cell-inner caret-wrapper"
 292 |                   v-if="item.sortable"
 293 |                 >
 294 |                   <i
 295 |                     class="sort-ascending"
 296 |                     @click="handleClickSort(item.key || item.prop, 'asc')"
 297 |                     :class="{
 298 |                       selected:
 299 |                         sortParam.col === (item.key || item.prop) &&
 300 |                         sortParam.direction === 'asc'
 301 |                     }"
 302 |                   ></i>
 303 |                   <i
 304 |                     class="sort-descending"
 305 |                     @click="handleClickSort(item.key || item.prop, 'desc')"
 306 |                     :class="{
 307 |                       selected:
 308 |                         sortParam.col === (item.key || item.prop) &&
 309 |                         sortParam.direction === 'desc'
 310 |                     }"
 311 |                   ></i>
 312 |                 </div>
 313 |               </div>
 314 |             </div>
 315 |           </template>
 316 |           <template v-if="enableMultiHeader" class="multi-header-contain">
 317 |             <div
 318 |               class="header-line"
 319 |               v-for="(hItem, hIndex) in multiConfigTemp"
 320 |               :key="hIndex"
 321 |             >
 322 |               <div
 323 |                 class="header-cell"
 324 |                 v-for="(hdSet, hdName) in hItem"
 325 |                 :colspan="hdSet.colspan"
 326 |                 :rowspan="hdSet.rowspan"
 327 |                 :key="hdName"
 328 |               >
 329 |                 {{ hdSet.name }}
 330 |               </div>
 331 |             </div>
 332 |           </template>
 333 |         </div>
 334 |       </div>
 335 |       <div class="t-container" ref="tContainer">
 336 |         <virtual-scroller
 337 |           class="scroller"
 338 |           :items="dataTemp"
 339 |           :item-height="itemHeight"
 340 |           content-tag="div"
 341 |           pool-size="500"
 342 |           ref="scroller"
 343 |         >
 344 |           <template slot-scope="props">
 345 |             <div
 346 |               class="item-line"
 347 |               @click="handleClickItem(props.item, $event)"
 348 |               @contextmenu="$emit('contextmenu', props.item, $event)"
 349 |               :class="{
 350 |                 selected: props.item._eSelected,
 351 |                 unselectable: !selectable,
 352 |                 'item-line-allow-hightlight': hoverHighlight
 353 |               }"
 354 |               :style="{ height: itemHeight + 'px' }"
 355 |             >
 356 |               <div
 357 |                 class="item-cell"
 358 |                 v-for="(item, configIndex) in configTemp.filter(
 359 |                   v => !v.isHidden
 360 |                 )"
 361 |                 :style="{ flex: colWidth[configIndex] }"
 362 |                 :class="props.item._eClass[item.prop] || ''"
 363 |                 :key="configIndex"
 364 |               >
 365 |                 <template v-if="item.prop === '_action'">
 366 |                   <div
 367 |                     class="item-cell-inner rowSlot"
 368 |                     :style="{
 369 |                       height: itemHeight - 12 + 'px',
 370 |                       'align-items': item.alignItems || 'center',
 371 |                       'justify-content': item.justifyContent || 'center'
 372 |                     }"
 373 |                     @click="handleClickAction"
 374 |                   >
 375 |                     <slot
 376 |                       :index="props.itemIndex"
 377 |                       :row="clearObj(props.item)"
 378 |                       :name="item.actionName || 'action'"
 379 |                       :key="item.key || item.prop"
 380 |                     />
 381 |                   </div>
 382 |                 </template>
 383 |                 <template v-else>
 384 |                   <div class="item-cell-inner" v-if="item.prop === '_expand'">
 385 |                     <base-popover
 386 |                       :width="mainWidth - 54"
 387 |                       :boundary="$refs.mainScroll"
 388 |                     >
 389 |                       <div>
 390 |                         <slot
 391 |                           :index="props.itemIndex"
 392 |                           :row="clearObj(props.item)"
 393 |                           :key="item.key || item.prop"
 394 |                           name="expand"
 395 |                         />
 396 |                       </div>
 397 |                       <base-icon
 398 |                         icon-name="arrowCarrotRight"
 399 |                         icon-color="#c0c4cc"
 400 |                         width="16"
 401 |                         height="16"
 402 |                         slot="reference"
 403 |                         style="cursor:pointer"
 404 |                         @click.native="handleClickExpand"
 405 |                       ></base-icon>
 406 |                     </base-popover>
 407 |                   </div>
 408 |                   <div
 409 |                     class="item-cell-inner"
 410 |                     v-else-if="item.eTip"
 411 |                     :style="{ 
 412 |                       'align-items': item.alignItems || 'center',
 413 |                       'justify-content': item.justifyContent || 'center'
 414 |                     }"
 415 |                   >
 416 |                     <VPopover trigger="hover" placement="right">
 417 |                       <span>
 418 |                         <span
 419 |                           v-if="item.prefix && getDescendantProp(props.item, item.prop)"
 420 |                           :class="props.item._eClass[item.prop] || ''"
 421 |                           class="prefix"
 422 |                           >{{ item.prefix }}</span
 423 |                         >
 424 |                         <span v-if="item.prop === '_index'">{{
 425 |                           props.itemIndex + 1
 426 |                         }}</span>
 427 |                         <span
 428 |                           v-else-if="item.filterable"
 429 |                           class="tag"
 430 |                           :class="
 431 |                             item.filterTag[getDescendantProp(props.item, item.prop)] ||
 432 |                               'defaultTag'
 433 |                           "
 434 |                           >{{ getDescendantProp(props.item, item.prop) }}</span
 435 |                         >
 436 |                         <span
 437 |                           v-else-if="item.eClass"
 438 |                           :class="props.item._eClass[item.prop]"
 439 |                           >{{ getDescendantProp(props.item, item.prop) }}</span
 440 |                         >
 441 |                         <span v-else>{{ getDescendantProp(props.item, item.prop) }}</span>
 442 |                         <span
 443 |                           v-if="item.suffix && getDescendantProp(props.item, item.prop)"
 444 |                           :class="props.item._eClass[item.prop] || ''"
 445 |                           class="suffix"
 446 |                           >{{ item.suffix }}</span
 447 |                         >
 448 |                       </span>
 449 |                       <template #popover>
 450 |                         <div
 451 |                           style="text-align: left;font-size: 13px"
 452 |                           class="pop-card"
 453 |                         >
 454 |                           <span v-for="tipProp in item.eTip" :key="tipProp">
 455 |                             <span v-if="item.eTipWithProp"
 456 |                               >{{
 457 |                                 configTemp.filter(v => v.prop === tipProp)[0]
 458 |                                   .name
 459 |                               }}:</span
 460 |                             >
 461 |                             <span>
 462 |                               <span
 463 |                                 v-if="
 464 |                                   configTemp.filter(v => v.prop === tipProp)[0]
 465 |                                     .prefix && props.item[tipProp]
 466 |                                 "
 467 |                                 class="prefix"
 468 |                                 >{{
 469 |                                   configTemp.filter(v => v.prop === tipProp)[0]
 470 |                                     .prefix
 471 |                                 }}</span
 472 |                               >
 473 |                               <span>{{ props.item[tipProp] }}</span>
 474 |                               <span
 475 |                                 v-if="
 476 |                                   configTemp.filter(v => v.prop === tipProp)[0]
 477 |                                     .suffix && props.item[tipProp]
 478 |                                 "
 479 |                                 class="suffix"
 480 |                                 >{{
 481 |                                   configTemp.filter(v => v.prop === tipProp)[0]
 482 |                                     .suffix
 483 |                                 }}</span
 484 |                               >
 485 |                               <br />
 486 |                             </span>
 487 |                           </span>
 488 |                           <base-icon
 489 |                             icon-name="documentsAlt"
 490 |                             icon-color="#c0c4cc"
 491 |                             width="13"
 492 |                             height="13"
 493 |                             style="cursor:pointer"
 494 |                             @click.native="
 495 |                               handleClickCopy(props.item, item.eTip)
 496 |                             "
 497 |                           ></base-icon>
 498 |                         </div>
 499 |                       </template>
 500 |                     </VPopover>
 501 |                   </div>
 502 |                   <div
 503 |                     class="item-cell-inner"
 504 |                     v-else
 505 |                     :style="{ 
 506 |                       'align-items': item.alignItems || 'center',
 507 |                       'justify-content': item.justifyContent || 'center'
 508 |                     }"
 509 |                   >
 510 |                     <span
 511 |                       v-if="item.prefix && getDescendantProp(props.item, item.prop)"
 512 |                       :class="props.item._eClass[item.prop] || ''"
 513 |                       class="prefix"
 514 |                       >{{ item.prefix }}</span
 515 |                     >
 516 |                     <span v-if="item.prop === '_index'">{{
 517 |                       props.itemIndex + 1
 518 |                     }}</span>
 519 |                     <span
 520 |                       v-else-if="item.filterable"
 521 |                       class="tag"
 522 |                       :class="
 523 |                         item.filterTag[getDescendantProp(props.item, item.prop)] || 'defaultTag'
 524 |                       "
 525 |                       >{{ getDescendantProp(props.item, item.prop) }}</span
 526 |                     >
 527 |                     <span
 528 |                       v-else-if="item.eClass"
 529 |                       :class="props.item._eClass[item.prop]"
 530 |                       >{{ getDescendantProp(props.item, item.prop) }}</span
 531 |                     >
 532 |                     <span v-else>{{ getDescendantProp(props.item, item.prop) }}</span>
 533 |                     <span
 534 |                       v-if="item.suffix && getDescendantProp(props.item, item.prop)"
 535 |                       :class="props.item._eClass[item.prop] || ''"
 536 |                       class="suffix"
 537 |                       >{{ item.suffix }}</span
 538 |                     >
 539 |                   </div>
 540 |                 </template>
 541 |               </div>
 542 |             </div>
 543 |           </template>
 544 |         </virtual-scroller>
 545 |       </div>
 546 |       <div class="t-bottom" ref="tBottom" v-show="showSummary">
 547 |         <div ref="tBottomTable">
 548 |           <div class="bottom-line">
 549 |             <div
 550 |               class="bottom-cell"
 551 |               v-for="(item, configIndex) in configTemp.filter(v => !v.isHidden)"
 552 |               :key="configIndex"
 553 |               :style="{ flex: colWidth[configIndex] }"
 554 |             >
 555 |               <span v-if="item.prop === '_expand' && item.expandSummary">
 556 |                 <base-popover
 557 |                   :width="mainWidth - 54"
 558 |                   :boundary="$refs.mainScroll"
 559 |                 >
 560 |                   <slot :data="dataTemp" name="summary" />
 561 |                   <base-icon
 562 |                     icon-name="arrowCarrotRight"
 563 |                     icon-color="#c0c4cc"
 564 |                     width="16"
 565 |                     height="16"
 566 |                     slot="reference"
 567 |                     style="cursor:pointer"
 568 |                     @click.native="handleClickExpand"
 569 |                   ></base-icon>
 570 |                 </base-popover>
 571 |               </span>
 572 |               <span v-if="item.prefix">{{ item.prefix }}</span>
 573 |               <span v-if="item.summary">{{
 574 |                 summaryData.filter(v => v.prop === item.prop)[0].value
 575 |               }}</span>
 576 |               <span v-if="item.suffix">{{ item.suffix }}</span>
 577 |             </div>
 578 |           </div>
 579 |         </div>
 580 |       </div>
 581 |     </div>
 582 |     <div class="clipboard">
 583 |       <input type="text" ref="clipboardInput" />
 584 |     </div>
 585 |     <resize-observer @notify="setSize" />
 586 |   </div>
 587 | </template>
 588 | <script>
 589 | import VirtualScroller from "./components/virtual-scroller.vue";
 590 | import { ObserveVisibility } from "vue-observe-visibility";
 591 | import { ResizeObserver } from "vue-resize";
 592 | import BasePopover from "./components/base-popover.vue";
 593 | import BaseButton from "./components/base-button.vue";
 594 | import BaseSelect from "./components/base-select.vue";
 595 | import BaseInput from "./components/base-input.vue";
 596 | import BaseCheckgroup from "./components/base-checkgroup.vue";
 597 | import BaseTooltip from "./components/base-tooltip.vue";
 598 | import BaseIcon from "./components/base-icon.vue";
 599 | import "vue-resize/dist/vue-resize.css";
 600 | import { _uuid, exportCsv, deepCopy, debounce } from "./utils/index.js";
 601 | import { VPopover } from "v-tooltip";
 602 | 
 603 | export default {
 604 |   name: "VueVirtualTable",
 605 |   directives: {
 606 |     ObserveVisibility
 607 |   },
 608 |   components: {
 609 |     VirtualScroller,
 610 |     ResizeObserver,
 611 |     BasePopover,
 612 |     BaseButton,
 613 |     BaseSelect,
 614 |     BaseInput,
 615 |     BaseCheckgroup,
 616 |     BaseTooltip,
 617 |     BaseIcon,
 618 |     VPopover
 619 |   },
 620 |   props: {
 621 |     config: {
 622 |       type: Array,
 623 |       default: function() {
 624 |         return [];
 625 |       }
 626 |     },
 627 |     data: {
 628 |       type: Array,
 629 |       default: function() {
 630 |         return [];
 631 |       }
 632 |     },
 633 |     height: {
 634 |       type: Number,
 635 |       default: function() {
 636 |         return 300;
 637 |       }
 638 |     },
 639 |     selectable: {
 640 |       type: Boolean,
 641 |       default: function() {
 642 |         return false;
 643 |       }
 644 |     },
 645 |     defaultSelect: {
 646 |       type: Array,
 647 |       default: function() {
 648 |         return [];
 649 |       }
 650 |     },
 651 |     itemHeight: {
 652 |       type: Number,
 653 |       default: function() {
 654 |         return 42;
 655 |       }
 656 |     },
 657 |     refreshConfig: {
 658 |       type: Boolean,
 659 |       default: function() {
 660 |         return false;
 661 |       }
 662 |     },
 663 |     minWidth: {
 664 |       type: Number,
 665 |       default: function() {
 666 |         return 1200;
 667 |       }
 668 |     },
 669 |     bordered: {
 670 |       type: Boolean,
 671 |       default: function() {
 672 |         return false;
 673 |       }
 674 |     },
 675 |     enableExport: {
 676 |       type: Boolean,
 677 |       default: function() {
 678 |         return false;
 679 |       }
 680 |     },
 681 |     enableMultiHeader: {
 682 |       type: Boolean,
 683 |       default: function() {
 684 |         return false;
 685 |       }
 686 |     },
 687 |     multiHeader: {
 688 |       type: Object,
 689 |       default: function() {
 690 |         return {};
 691 |       }
 692 |     },
 693 |     hoverHighlight: {
 694 |       type: Boolean,
 695 |       default: function() {
 696 |         return true;
 697 |       }
 698 |     },
 699 |     language: {
 700 |       type: String,
 701 |       default: function() {
 702 |         return "cn";
 703 |       }
 704 |     }
 705 |   },
 706 |   computed: {},
 707 |   data() {
 708 |     return {
 709 |       mainWidth: 600,
 710 |       colWidth: [],
 711 |       sortParam: { col: "", direction: "asc" },
 712 |       dataInitTemp: [],
 713 |       dataTemp: [],
 714 |       configTemp: [],
 715 |       summaryData: [],
 716 |       showSummary: false,
 717 |       lastConfigTemp: [],
 718 |       allOperatorType: [
 719 |         {
 720 |           value: "eq",
 721 |           label: "＝"
 722 |         },
 723 |         {
 724 |           value: "neq",
 725 |           label: "≠"
 726 |         },
 727 |         {
 728 |           value: "lt",
 729 |           label: "＜"
 730 |         },
 731 |         {
 732 |           value: "le",
 733 |           label: "≤"
 734 |         },
 735 |         {
 736 |           value: "gt",
 737 |           label: "＞"
 738 |         },
 739 |         {
 740 |           value: "ge",
 741 |           label: "≥"
 742 |         },
 743 |         {
 744 |           value: "bt",
 745 |           label: "between"
 746 |         }
 747 |       ],
 748 |       allPhraseOperator: [
 749 |         {
 750 |           value: "in",
 751 |           label: "Include"
 752 |         },
 753 |         {
 754 |           value: "out",
 755 |           label: "Exclude"
 756 |         }
 757 |       ],
 758 |       multiConfigTemp: [],
 759 |       minWidthTemp: 0,
 760 |       phraseLimit: 6,
 761 |       languageOptions: {
 762 |         en: {
 763 |           selectAll: "All",
 764 |           phraseFilter: {
 765 |             in: "Include",
 766 |             out: "Exclude",
 767 |             ph: 'Press "Enter" to Confirm',
 768 |             and_btn: "And",
 769 |             clear_btn: "Clear"
 770 |           },
 771 |           selectFilter: {
 772 |             confirm_btn: "Confirm",
 773 |             reverse_btn: "Reverse",
 774 |             clear_btn: "Clear"
 775 |           },
 776 |           numberFilter: {
 777 |             eq: "=",
 778 |             neq: "≠",
 779 |             lt: "＜",
 780 |             le: "≤",
 781 |             gt: "＞",
 782 |             ge: "≥",
 783 |             bt: "between",
 784 |             clear_btn: "Clear"
 785 |           }
 786 |         },
 787 |         ptBR: {
 788 |           selectAll: "Todos",
 789 |           phraseFilter: {
 790 |             in: "Incluir",
 791 |             out: "Excluir",
 792 |             ph: 'Pressione "Enter" para Confirmar',
 793 |             and_btn: "E",
 794 |             clear_btn: "Limpar"
 795 |           },
 796 |           selectFilter: {
 797 |             confirm_btn: "Confirmar",
 798 |             reverse_btn: "Inverter",
 799 |             clear_btn: "Limpar"
 800 |           },
 801 |           numberFilter: {
 802 |             eq: "=",
 803 |             neq: "≠",
 804 |             lt: "＜",
 805 |             le: "≤",
 806 |             gt: "＞",
 807 |             ge: "≥",
 808 |             bt: "between",
 809 |             clear_btn: "Limpar"
 810 |           }
 811 |         },
 812 |         cn: {
 813 |           selectAll: "全选",
 814 |           phraseFilter: {
 815 |             in: "包含",
 816 |             out: "不包含",
 817 |             ph: "按“回车”确定",
 818 |             and_btn: "并且",
 819 |             clear_btn: "清除"
 820 |           },
 821 |           selectFilter: {
 822 |             confirm_btn: "确定",
 823 |             reverse_btn: "反转",
 824 |             clear_btn: "清除"
 825 |           },
 826 |           numberFilter: {
 827 |             eq: "=",
 828 |             neq: "≠",
 829 |             lt: "＜",
 830 |             le: "≤",
 831 |             gt: "＞",
 832 |             ge: "≥",
 833 |             bt: "之间",
 834 |             clear_btn: "清除"
 835 |           }
 836 |         },
 837 |         kr: {
 838 |           selectAll: "전체",
 839 |           phraseFilter: {
 840 |             in: "포함",
 841 |             out: "불포함",
 842 |             ph: "“Enter”키를 누르세요",
 843 |             and_btn: "조건 추가",
 844 |             clear_btn: "조건 초기화"
 845 |           },
 846 |           selectFilter: {
 847 |             confirm_btn: "확인",
 848 |             reverse_btn: "반대",
 849 |             clear_btn: "조건 초기화"
 850 |           },
 851 |           numberFilter: {
 852 |             eq: "=",
 853 |             neq: "≠",
 854 |             lt: "＜",
 855 |             le: "≤",
 856 |             gt: "＞",
 857 |             ge: "≥",
 858 |             bt: "~",
 859 |             clear_btn: "조건 초기화"
 860 |           }
 861 |         }
 862 |       }
 863 |     };
 864 |   },
 865 |   mounted() {
 866 |     this.updateBase();
 867 |     this.refreshSummary();
 868 |     this.setSize();
 869 |   },
 870 |   watch: {
 871 |     data() {
 872 |       this.updateDebounce();
 873 |     },
 874 |     config() {
 875 |       this.updateDebounce();
 876 |     },
 877 |     multiHeader() {
 878 |       this.updateDebounce();
 879 |     },
 880 |     defaultSelect() {
 881 |       this.updateDebounce();
 882 |     },
 883 |     height() {
 884 |       this.setSize();
 885 |     }
 886 |   },
 887 |   methods: {
 888 |     getDescendantProp(obj, path) {
 889 |       return path.split('.').reduce((acc, part) => acc && acc[part], obj)
 890 |     },
 891 |     updateBase() {
 892 |       this.configTemp = deepCopy(this.config);
 893 |       this.configTemp = this.configTemp.filter(function (obj) {
 894 |         return !obj.isHidden;
 895 |       });
 896 |       this.dataInitTemp = deepCopy(this.data);
 897 |       this.minWidthTemp = this.minWidth;
 898 | 
 899 |       this.parseConfig();
 900 |       this.updateInitData();
 901 |       this.dataTemp = deepCopy(this.dataInitTemp);
 902 |     },
 903 |     updateDebounce() {
 904 |       if (!this.updateDebounceMethod) {
 905 |         this.updateDebounceMethod = debounce(this.update.bind(this), 100);
 906 |       }
 907 |       this.updateDebounceMethod();
 908 |     },
 909 |     update() {
 910 |       // console.log("table updated!");
 911 |       this.lastConfigTemp = deepCopy(this.configTemp);
 912 |       this.updateBase();
 913 |       this.handleClickConfirmFilter();
 914 |       this.refreshSummary();
 915 |       this.setSize();
 916 |       this.$emit(
 917 |         "changeSelection",
 918 |         this.dataInitTemp.filter(v => v._eSelected === true)
 919 |       );
 920 |     },
 921 |     clipboardCP(text) {
 922 |       if (navigator.clipboard) {
 923 |         return navigator.clipboard.writeText(text);
 924 |       } else {
 925 |         let input = this.$refs.clipboardInput;
 926 |         input.value = text;
 927 |         input.focus();
 928 |         input.select();
 929 |         const result = document.execCommand("copy");
 930 | 
 931 |         if (result === "unsuccessful") {
 932 |           return false;
 933 |         }
 934 |         return true;
 935 |       }
 936 |     },
 937 |     handleClickCopy(props, tips) {
 938 |       let text = "";
 939 |       for (let i = 0; i < tips.length; i++) {
 940 |         text += props[tips[i]];
 941 |         if (i < tips.length - 1) {
 942 |           text += "\n";
 943 |         }
 944 |       }
 945 |       this.clipboardCP(text);
 946 |     },
 947 |     handleExportTable() {
 948 |       let header = {};
 949 |       this.configTemp.forEach(v => {
 950 |         if (!["_index", "_action", "_expand"].includes(v.prop)) {
 951 |           header[v.prop] = v.name || v.prop;
 952 |         }
 953 |       });
 954 |       let data = deepCopy(this.dataTemp);
 955 |       data = data.map(v => {
 956 |         let item = {};
 957 |         for (let prop in header) {
 958 |           item[prop] = v[prop];
 959 |         }
 960 |         return item;
 961 |       });
 962 |       data.unshift(header);
 963 |       let columns = Object.keys(header);
 964 |       let title = new Date().toLocaleDateString() + ".csv";
 965 |       exportCsv(data, columns, title);
 966 |     },
 967 |     parseConfig() {
 968 |       let self = this;
 969 |       self.configTemp.forEach((v, i) => {
 970 |         let last_item =
 971 |           self.lastConfigTemp.filter(item => item.prop === v.prop)[0] || {};
 972 |         if (self.refreshConfig) {
 973 |           last_item = {};
 974 |         }
 975 |         if (!v.width) {
 976 |           self.$set(v, "width", "auto");
 977 |         }
 978 |         if (!v.filterTag) {
 979 |           self.$set(v, "filterTag", {});
 980 |         }
 981 |         if (v.filterable) {
 982 |           let options = self.dataInitTemp.reduce((prev, curr) => {
 983 |             if (curr) {
 984 |               prev.push(curr[v.prop]);
 985 |             }
 986 |             return prev;
 987 |           }, []);
 988 |           let filterOptions = [...new Set(options)].sort((a, b) =>
 989 |             a.localeCompare(b)
 990 |           );
 991 |           self.$set(v, "filterOptions", filterOptions);
 992 |           let selecetedOptions = last_item["filterSelectedOptions"] || [];
 993 |           let l = selecetedOptions.length;
 994 |           for (let index = l - 1; index >= 0; index--) {
 995 |             if (filterOptions.indexOf(selecetedOptions[index]) === -1) {
 996 |               selecetedOptions.splice(index, 1);
 997 |             }
 998 |           }
 999 |           self.$set(v, "filterSelectedOptions", selecetedOptions);
1000 |           self.$set(v, "filterVisible", false);
1001 |         }
1002 |         if (v.searchable) {
1003 |           let searchPhrase = last_item["searchPhrase"] || [
1004 |             { operator: "in", value: "" }
1005 |           ];
1006 |           self.$set(v, "searchPhrase", searchPhrase);
1007 |           self.$set(v, "searchVisible", false);
1008 |         }
1009 |         if (v.numberFilter) {
1010 |           let filterPhrase = last_item["numberFilterPhrase"] || {
1011 |             operator: "le",
1012 |             value: ["", ""]
1013 |           };
1014 |           self.$set(v, "numberFilterPhrase", filterPhrase);
1015 |           self.$set(v, "numberFilterVisible", false);
1016 |         }
1017 |       });
1018 |     },
1019 |     updateInitData() {
1020 |       let self = this;
1021 |       self.dataInitTemp.forEach((v, i) => {
1022 |         v._eId = _uuid();
1023 |         v._eSelected = false;
1024 |         if (this.defaultSelect && this.defaultSelect.indexOf(i) > -1) {
1025 |           v._eSelected = true;
1026 |         }
1027 |         v._eClass = {};
1028 |         self.configTemp.forEach((v1, i1) => {
1029 |           if (v1.eClass) {
1030 |             v._eClass[v1.prop] = self.parseClass(v1.eClass, v);
1031 |           }
1032 |         });
1033 |       });
1034 |     },
1035 |     parseClass(eClass, item) {
1036 |       let result = {};
1037 |       for (let cl in eClass) {
1038 |         let text = eClass[cl];
1039 |         let props = text.match(/\${[\w-_]+}/g);
1040 |         props = props || [];
1041 |         props.forEach((v, i) => {
1042 |           let this_prop = v.replace(/\${([\w-_]+)}/, "$1");
1043 |           text = text.replace(v, item[this_prop] || 0);
1044 |         });
1045 |         result[cl] = this.evalFunc(text);
1046 |       }
1047 |       return result;
1048 |     },
1049 |     evalFunc(phrase) {
1050 |       let fun = new Function("return " + phrase);
1051 |       return fun();
1052 |     },
1053 |     refreshSummary() {
1054 |       let self = this;
1055 |       let l = self.dataTemp.length;
1056 |       let summary = [];
1057 |       self.showSummary = false;
1058 |       self.configTemp.forEach((v, i) => {
1059 |         let prop = v.prop;
1060 |         if (!v.summary) {
1061 |           return;
1062 |         }
1063 |         self.showSummary = true;
1064 |         let summary_item = {};
1065 |         summary_item.prop = prop;
1066 |         switch (v.summary) {
1067 |           case "COUNT":
1068 |             summary_item.value = l;
1069 |             summary.push(summary_item);
1070 |             break;
1071 |           case "SUM":
1072 |             summary_item.value = self.dataTemp.reduce((prev, curr) => {
1073 |               if (!isNaN(curr[prop])) {
1074 |                 let this_num = Number(curr[prop]);
1075 |                 prev += this_num;
1076 |               }
1077 |               return prev;
1078 |             }, 0);
1079 |             summary_item.value = Number(summary_item.value.toFixed(2));
1080 |             summary.push(summary_item);
1081 |             break;
1082 |         }
1083 |       });
1084 |       self.configTemp.forEach((v, i) => {
1085 |         let prop = v.prop;
1086 |         if (!v.summary) {
1087 |           return;
1088 |         }
1089 |         let summary_item = {};
1090 |         summary_item.prop = prop;
1091 |         if (/\${[\w-_]+}/.test(v.summary)) {
1092 |           let text = v.summary;
1093 |           let props = text.match(/\${[\w-_]+}/g);
1094 |           props.forEach((v1, i1) => {
1095 |             let this_prop = v1.replace(/\${([\w-_]+)}/, "$1");
1096 |             text = text.replace(
1097 |               v1,
1098 |               summary.filter(val => val.prop === this_prop)[0].value || 0
1099 |             );
1100 |           });
1101 |           summary_item.value = this.evalFunc(text);
1102 |           summary_item.value = Number(summary_item.value.toFixed(2));
1103 |           summary.push(summary_item);
1104 |         }
1105 |       });
1106 |       self.summaryData = summary.slice();
1107 |       self.summaryData.splice(0, 0);
1108 |     },
1109 |     selectAll() {
1110 |       let r = true;
1111 |       if (
1112 |         this.dataTemp.length ===
1113 |         this.dataTemp.filter(item => item._eSelected === true).length
1114 |       ) {
1115 |         r = false;
1116 |       }
1117 |       let eIds = [];
1118 |       this.dataTemp.forEach(item => {
1119 |         item._eSelected = r;
1120 |         let eId = item._eId;
1121 |         eIds.push(eId);
1122 |       });
1123 |       this.dataInitTemp
1124 |         .filter(v => eIds.includes(v._eId))
1125 |         .map(item => {
1126 |           item._eSelected = r;
1127 |         });
1128 |       this.dataTemp.splice(0, 0);
1129 |       this.dataInitTemp.splice(0, 0);
1130 |       this.$emit(
1131 |         "changeSelection",
1132 |         this.dataInitTemp.filter(v => v._eSelected === true)
1133 |       );
1134 |     },
1135 |     handleClickItem(item, event) {
1136 |       let self = this;
1137 |       item._eSelected = !item._eSelected && this.selectable;
1138 |       self.dataInitTemp.filter((v, i) => v._eId === item._eId)[0]._eSelected =
1139 |         item._eSelected;
1140 |       self.dataTemp.filter((v, i) => v._eId === item._eId)[0]._eSelected =
1141 |         item._eSelected;
1142 |       self.dataTemp.splice(0, 0);
1143 |       self.dataInitTemp.splice(0, 0);
1144 |       self.$emit(
1145 |         "changeSelection",
1146 |         self.dataInitTemp.filter(v => v._eSelected === true)
1147 |       );
1148 | 
1149 |       // Emit 'click' event when a row is clicked
1150 |       self.$emit("click", item, event)
1151 |     },
1152 |     handleClickConfirmFilter(index) {
1153 |       let self = this;
1154 |       let temp = deepCopy(self.dataInitTemp);
1155 |       self.configTemp.forEach((v, i) => {
1156 |         let prop = v.key || v.prop;
1157 |         if (v.filterSelectedOptions && v.filterSelectedOptions.length) {
1158 |           temp = temp.filter(
1159 |             item => v.filterSelectedOptions.indexOf(self.getDescendantProp(item, prop)) > -1
1160 |           );
1161 |         }
1162 |         if (
1163 |           v.searchPhrase &&
1164 |           v.searchPhrase.findIndex(v => v.value != "") > -1
1165 |         ) {
1166 |           v.searchPhrase
1167 |             .filter(v => v.value != "")
1168 |             .forEach(fp => {
1169 |               if (fp.operator == "out") {
1170 |                 temp = temp.filter(
1171 |                   item =>
1172 |                     (self.getDescendantProp(item, prop) || "")
1173 |                       .toLowerCase()
1174 |                       .indexOf(fp.value.toLowerCase()) === -1
1175 |                 );
1176 |               } else {
1177 |                 temp = temp.filter(
1178 |                   item =>
1179 |                     (self.getDescendantProp(item, prop) || "")
1180 |                       .toLowerCase()
1181 |                       .indexOf(fp.value.toLowerCase()) > -1
1182 |                 );
1183 |               }
1184 |             });
1185 |         }
1186 |         if (
1187 |           v.numberFilterPhrase &&
1188 |           v.numberFilterPhrase.value[0] !== "" &&
1189 |           (v.numberFilterPhrase.operator !== "bt" ||
1190 |             (v.numberFilterPhrase.value[1] !== "" &&
1191 |               v.numberFilterPhrase.operator === "bt"))
1192 |         ) {
1193 |           switch (v.numberFilterPhrase.operator) {
1194 |             case "eq":
1195 |               temp = temp.filter(
1196 |                 item => Number(self.getDescendantProp(item, prop)) == Number(v.numberFilterPhrase.value[0])
1197 |               );
1198 |               break;
1199 |             case "neq":
1200 |               temp = temp.filter(
1201 |                 item => Number(self.getDescendantProp(item, prop)) != Number(v.numberFilterPhrase.value[0])
1202 |               );
1203 |               break;
1204 |             case "lt":
1205 |               temp = temp.filter(
1206 |                 item => Number(self.getDescendantProp(item, prop)) < Number(v.numberFilterPhrase.value[0])
1207 |               );
1208 |               break;
1209 |             case "le":
1210 |               temp = temp.filter(
1211 |                 item => Number(self.getDescendantProp(item, prop)) <= Number(v.numberFilterPhrase.value[0])
1212 |               );
1213 |               break;
1214 |             case "gt":
1215 |               temp = temp.filter(
1216 |                 item => Number(self.getDescendantProp(item, prop)) > Number(v.numberFilterPhrase.value[0])
1217 |               );
1218 |               break;
1219 |             case "ge":
1220 |               temp = temp.filter(
1221 |                 item => Number(self.getDescendantProp(item, prop)) >= Number(v.numberFilterPhrase.value[0])
1222 |               );
1223 |               break;
1224 |             case "bt":
1225 |               temp = temp.filter(
1226 |                 item => {
1227 |                   const descendant = self.getDescendantProp(item, prop);
1228 |                   return Number(descendant) > Number(v.numberFilterPhrase.value[0]) &&
1229 |                       Number(descendant) <= Number(v.numberFilterPhrase.value[1]);
1230 |                 }
1231 |               );
1232 |               break;
1233 |           }
1234 |         }
1235 |       });
1236 |       self.dataTemp = temp;
1237 |       if (index != undefined && self.configTemp[index]) {
1238 |         self.$set(self.configTemp[index], "filterVisible", false);
1239 |       }
1240 |       self.handleClickSort(self.sortParam.col, self.sortParam.direction, true);
1241 |       self.refreshSummary();
1242 |     },
1243 |     handleClickReverseFilter(index) {
1244 |       let options = this.configTemp[index].filterOptions.slice();
1245 |       let selecetedOptions = this.configTemp[
1246 |         index
1247 |       ].filterSelectedOptions.slice();
1248 |       this.configTemp[index].filterSelectedOptions = options.reduce(
1249 |         (prev, curr) => {
1250 |           if (selecetedOptions.indexOf(curr) === -1) {
1251 |             prev.push(curr);
1252 |           }
1253 |           return prev;
1254 |         },
1255 |         []
1256 |       );
1257 |       this.handleClickConfirmFilter(index);
1258 |     },
1259 |     handleClickClearFilter(index) {
1260 |       this.configTemp[index].filterSelectedOptions = [];
1261 |       this.handleClickConfirmFilter(index);
1262 |     },
1263 |     handleClickEmptyNumberFilter(index) {
1264 |       this.configTemp[index].numberFilterPhrase.value = ["", ""];
1265 |       this.handleClickConfirmFilter(index);
1266 |       this.$set(this.configTemp[index], "numberFilterVisible", false);
1267 |     },
1268 |     addFilterPhrase(index) {
1269 |       if (this.configTemp[index].searchPhrase.length >= this.phraseLimit) {
1270 |         return;
1271 |       }
1272 |       this.configTemp[index].searchPhrase.push({ operator: "in", value: "" });
1273 |     },
1274 |     removePhraseFilter(index, ph_index) {
1275 |       this.configTemp[index].searchPhrase.splice(ph_index, 1);
1276 |       this.handleClickConfirmFilter(index);
1277 |       // let sp_temp = this.configTemp[index].searchPhrase.slice()
1278 |       // sp_temp.splice(ph_index, 1)
1279 |       // this.configTemp
1280 |     },
1281 |     handleClickEmptyPhraseFilter(index) {
1282 |       this.configTemp[index].searchPhrase = [{ operator: "in", value: "" }];
1283 |       this.handleClickConfirmFilter(index);
1284 |     },
1285 |     handleChangeFilter(val) {},
1286 |     handleClickSort(val, direction, forse) {
1287 |       let self = this;
1288 |       if (
1289 |         self.sortParam.col === val &&
1290 |         self.sortParam.direction === direction &&
1291 |         !forse
1292 |       ) {
1293 |         return;
1294 |       }
1295 |       if (!self.dataTemp[0] || !val) {
1296 |         return;
1297 |       }
1298 |       self.sortParam.col = val;
1299 |       self.sortParam.direction = direction;
1300 |       let isNumber = false;
1301 |       self.dataTemp.some((v, i) => {
1302 |         if (!self.getDescendantProp(v, val) && self.getDescendantProp(v, val) != 0) {
1303 |           return false;
1304 |         }
1305 |         if (isNaN(self.getDescendantProp(v, val)) && self.getDescendantProp(v, val) != "NaN") {
1306 |           isNumber = false;
1307 |           return true;
1308 |         } else {
1309 |           isNumber = true;
1310 |           return true;
1311 |         }
1312 |       });
1313 |       if (direction === "asc") {
1314 |         if (!isNumber) {
1315 |           // let a_cp = a[val]||'', b_cp = b[val]||''
1316 |           self.dataTemp.sort((a, b) =>
1317 |             (self.getDescendantProp(a, val) || "").localeCompare(self.getDescendantProp(b, val) || "")
1318 |           );
1319 |         } else {
1320 |           self.dataTemp.sort((a, b) => {
1321 |             if (isNaN(self.getDescendantProp(a, val))) {
1322 |               return -self.getDescendantProp(b, val) < 0 ? -1 : 1;
1323 |             }
1324 |             if (isNaN(self.getDescendantProp(b, val))) {
1325 |               return self.getDescendantProp(a, val) < 0 ? -1 : 1;
1326 |             }
1327 |             return self.getDescendantProp(a, val) - self.getDescendantProp(b, val) < 0 ? -1 : 1;
1328 |           });
1329 |         }
1330 |       } else {
1331 |         if (!isNumber) {
1332 |           // let a_cp = a[val]||'', b_cp = b[val]||''
1333 |           self.dataTemp.sort(
1334 |             (a, b) => -(self.getDescendantProp(a, val) || "").localeCompare(self.getDescendantProp(b, val) || "")
1335 |           );
1336 |         } else {
1337 |           self.dataTemp.sort((a, b) => {
1338 |             if (isNaN(self.getDescendantProp(a, val))) {
1339 |               return -self.getDescendantProp(b, val) > 0 ? -1 : 1;
1340 |             }
1341 |             if (isNaN(self.getDescendantProp(b, val))) {
1342 |               return self.getDescendantProp(a, val) > 0 ? -1 : 1;
1343 |             }
1344 |             return self.getDescendantProp(a, val) - self.getDescendantProp(b, val) > 0 ? -1 : 1;
1345 |           });
1346 |         }
1347 |       }
1348 |     },
1349 |     handleClickAction(eve) {
1350 |       eve.stopPropagation();
1351 |     },
1352 |     handleClickExpand(eve) {
1353 |       eve.stopPropagation();
1354 |     },
1355 |     setSize() {
1356 |       let self = this;
1357 |       if (!this.$refs || !this.$refs.tContainer) {
1358 |         return;
1359 |       }
1360 |       let scrollBarWidth =
1361 |         this.$refs.scroller.$el.offsetWidth -
1362 |         this.$refs.scroller.$el.clientWidth;
1363 |       let mainWidth = Number(
1364 |         this.$refs.mainTable.getBoundingClientRect().width.toFixed(1)
1365 |       );
1366 |       mainWidth = Math.max(mainWidth, this.minWidth);
1367 |       this.mainWidth = this.$refs.mainScroll.getBoundingClientRect().width;
1368 |       this.$refs.tContainer.setAttribute(
1369 |         "style",
1370 |         "width:" +
1371 |           mainWidth +
1372 |           "px;height:" +
1373 |           (this.height - 50 - 50 * (this.showSummary ? 1 : 0)) +
1374 |           "px"
1375 |       );
1376 |       this.$refs.tHeaderTable.setAttribute(
1377 |         "style",
1378 |         "width:" + (mainWidth - scrollBarWidth) + "px"
1379 |       );
1380 |       if (this.$refs.tBottom) {
1381 |         this.$refs.tBottomTable.setAttribute(
1382 |           "style",
1383 |           "width:" + (mainWidth - scrollBarWidth) + "px"
1384 |         );
1385 |       }
1386 |       let colNumber = this.configTemp.filter(v => !v.isHidden).length;
1387 |       let usedWidth = 0,
1388 |         averageColNum = 0;
1389 |       this.configTemp
1390 |         .filter(v => !v.isHidden)
1391 |         .forEach((v, i) => {
1392 |           if (v.width === "auto") {
1393 |             averageColNum += 1;
1394 |           } else {
1395 |             usedWidth += Number(v.width);
1396 |           }
1397 |         });
1398 |       let averageWidth = Number(
1399 |         ((mainWidth - usedWidth) / averageColNum).toFixed(1)
1400 |       );
1401 |       for (let i = 0; i < colNumber; i++) {
1402 |         if (isNaN(this.configTemp.filter(v => !v.isHidden)[i].width)) {
1403 |           this.colWidth[i] = ((averageWidth * 100) / mainWidth).toFixed(1);
1404 |         } else {
1405 |           this.colWidth[i] = (
1406 |             (this.configTemp.filter(v => !v.isHidden)[i].width * 100) /
1407 |             mainWidth
1408 |           ).toFixed(1);
1409 |         }
1410 |       }
1411 |       this.colWidth.splice(0, 0);
1412 |       if (
1413 |         this.$refs.mainScroll.getBoundingClientRect().width < this.minWidthTemp
1414 |       ) {
1415 |         this.$refs.mainScroll.setAttribute("style", "overflow-x: scroll;");
1416 |       } else {
1417 |         this.$refs.mainScroll.setAttribute("style", "overflow-x: hidden;");
1418 |       }
1419 |     },
1420 |     clearObj(obj) {
1421 |       let obj_cp = JSON.parse(JSON.stringify(obj));
1422 |       delete obj_cp._eClass;
1423 |       delete obj_cp._eId;
1424 |       delete obj_cp._eSelected;
1425 |       return obj_cp;
1426 |     }
1427 |   }
1428 | };
1429 | </script>
1430 | <style scoped lang="scss">
1431 | $default-color: #3caed2;
1432 | 
1433 | .main-scroll {
1434 |   width: 100%;
1435 |   overflow-y: hidden;
1436 |   border: 1px solid #ebeef5;
1437 |   font-size: 13px;
1438 |   box-sizing: border-box;
1439 |   position: relative;
1440 | }
1441 | 
1442 | .item-line,
1443 | .header-line,
1444 | .bottom-line {
1445 |   width: 100%;
1446 |   display: flex;
1447 |   flex-direction: row;
1448 | }
1449 | 
1450 | .item-cell,
1451 | .header-cell,
1452 | .bottom-cell {
1453 |   display: flex;
1454 |   padding: 5px;
1455 |   box-sizing: border-box;
1456 |   border-bottom: 1px solid #ebeef5;
1457 | 
1458 |   justify-content: center;
1459 |   align-items: center;
1460 |   min-width: 0;
1461 | }
1462 | .header-cell,
1463 | .bottom-cell {
1464 |   border-bottom-width: 0;
1465 | }
1466 | 
1467 | .item-cell-inner {
1468 |   display: flex;
1469 |   width: 100%;
1470 |   height: 100%;
1471 |   word-break: break-all;
1472 |   text-align: center;
1473 |   overflow: hidden;
1474 |   text-overflow: ellipsis;
1475 |   justify-content: center;
1476 |   align-items: center;
1477 |   flex-wrap: wrap;
1478 | }
1479 | 
1480 | .header-cell-inner {
1481 |   display: inline-block;
1482 |   position: relative;
1483 |   word-break: break-all;
1484 | }
1485 | 
1486 | .header-cell-inner.caret-wrapper {
1487 |   width: 10px;
1488 |   height: 22px;
1489 |   cursor: pointer;
1490 | }
1491 | 
1492 | i.sort-ascending {
1493 |   width: 0;
1494 |   height: 0;
1495 |   border: 5px solid transparent;
1496 |   border-bottom-color: #c0c4cc;
1497 |   position: absolute;
1498 |   top: 0px;
1499 |   left: 4px;
1500 | }
1501 | i.sort-descending {
1502 |   width: 0;
1503 |   height: 0;
1504 |   border: 5px solid transparent;
1505 |   border-top-color: #c0c4cc;
1506 |   position: absolute;
1507 |   top: 12px;
1508 |   left: 4px;
1509 | }
1510 | 
1511 | i.sort-ascending.selected {
1512 |   border-bottom-color: $default-color;
1513 | }
1514 | i.sort-descending.selected {
1515 |   border-top-color: $default-color;
1516 | }
1517 | 
1518 | .header-line {
1519 |   color: #606266;
1520 |   height: 50px;
1521 | }
1522 | .bottom-line {
1523 |   height: 50px;
1524 | }
1525 | 
1526 | .bordered .item-cell,
1527 | .bordered .header-cell,
1528 | .bordered .bottom-cell {
1529 |   border-left: 1px solid #ebeef5;
1530 | }
1531 | 
1532 | .bordered .item-cell:nth-child(1),
1533 | .bordered .header-cell:nth-child(1),
1534 | .bordered .bottom-cell:nth-child(1) {
1535 |   border-left-width: 0;
1536 | }
1537 | 
1538 | .t-header {
1539 |   border-bottom: 1px solid #ebeef5;
1540 | }
1541 | 
1542 | .t-bottom {
1543 |   height: 50px;
1544 |   border-top: 1px solid #ebeef5;
1545 |   background-color: #f5f7fa;
1546 | }
1547 | 
1548 | .t-container {
1549 |   /*height: 800px;*/
1550 |   box-sizing: border-box;
1551 |   overflow: auto;
1552 |   overflow-x: hidden;
1553 | }
1554 | 
1555 | .scroller {
1556 |   height: 100%;
1557 | }
1558 | 
1559 | .search-wrapper {
1560 |   cursor: pointer;
1561 | }
1562 | .filter-wrapper {
1563 |   cursor: pointer;
1564 | }
1565 | .numFiltered-wrapper {
1566 |   cursor: pointer;
1567 | }
1568 | 
1569 | div.item-line.item-line-allow-hightlight:hover {
1570 |   background-color: #eee;
1571 | }
1572 | 
1573 | div.item-line.selected {
1574 |   background-color: #ddd;
1575 | }
1576 | 
1577 | div.item-line.unselectable {
1578 |   background-color: #fff;
1579 | }
1580 | 
1581 | .download-icon {
1582 |   color: #bbb;
1583 |   font-size: 20px;
1584 |   &:hover {
1585 |     color: $default-color;
1586 |     cursor: pointer;
1587 |   }
1588 | }
1589 | 
1590 | /*----------------*/
1591 | 
1592 | .tag {
1593 |   padding: 0 10px;
1594 |   height: 28px;
1595 |   line-height: 28px;
1596 |   border-radius: 4px;
1597 |   box-sizing: border-box;
1598 |   color: $default-color;
1599 |   background-color: rgba(60, 174, 210, 0.1);
1600 |   border: 1px solid rgba(60, 174, 210, 0.2);
1601 |   white-space: nowrap;
1602 | }
1603 | .filter-list {
1604 |   width: 100%;
1605 |   max-height: 300px;
1606 |   overflow-y: scroll;
1607 | }
1608 | .filter-list:hover {
1609 |   cursor: pointer;
1610 | }
1611 | .filter-item {
1612 |   width: 100%;
1613 |   margin: 5px auto;
1614 |   margin-left: 0px !important;
1615 | }
1616 | .filter-btn {
1617 |   overflow: hidden;
1618 |   border-top: 1px solid #ebeef5;
1619 |   padding: 6px;
1620 |   margin-top: 6px;
1621 |   text-align: left;
1622 |   padding: 10px 5px 5px 5px;
1623 |   font-size: 0;
1624 | }
1625 | 
1626 | .filtered,
1627 | .searched,
1628 | .numFiltered {
1629 |   color: $default-color;
1630 | }
1631 | 
1632 | .warningColor {
1633 |   color: red;
1634 | }
1635 | .greenColor {
1636 |   color: #84c32e;
1637 | }
1638 | 
1639 | .all-select {
1640 |   cursor: pointer;
1641 | }
1642 | .threeLines {
1643 |   overflow: hidden;
1644 |   display: -webkit-box;
1645 |   -webkit-line-clamp: 3;
1646 |   -webkit-box-orient: vertical;
1647 |   word-break: break-all;
1648 |   white-space: normal;
1649 | }
1650 | .alignLeft {
1651 |   text-align: left;
1652 | }
1653 | .tips {
1654 |   font-size: 14px;
1655 | }
1656 | .defaultTag {
1657 |   color: $default-color;
1658 |   background-color: rgba(60, 174, 210, 0.1);
1659 |   border-color: rgba(60, 174, 210, 0.2);
1660 | }
1661 | .warningTag {
1662 |   color: #e6a23c;
1663 |   background: #fdf6ec;
1664 |   border-color: #f5dab1;
1665 | }
1666 | .successTag {
1667 |   color: #67c23a;
1668 |   background: #f0f9eb;
1669 |   border-color: #c2e7b0;
1670 | }
1671 | .dangerTag {
1672 |   color: #f56c6c;
1673 |   background: #fef0f0;
1674 |   border-color: #fbc4c4;
1675 | }
1676 | .infoTag {
1677 |   color: #909399;
1678 |   background: #f4f4f5;
1679 |   border-color: #d3d4d6;
1680 | }
1681 | .numberMax {
1682 |   margin-left: 15px;
1683 | }
1684 | .numberMax:before {
1685 |   content: "~";
1686 |   position: absolute;
1687 |   left: -11px;
1688 |   top: 10px;
1689 | }
1690 | .filterBtnEmpty {
1691 |   margin-top: 10px;
1692 |   float: right;
1693 | }
1694 | .popperCard {
1695 |   box-sizing: border-box;
1696 | }
1697 | .clipboard {
1698 |   position: absolute;
1699 |   width: 0;
1700 |   height: 0;
1701 |   z-index: -99;
1702 |   opacity: 0;
1703 | }
1704 | .clipboard input {
1705 |   display: block;
1706 |   width: 1px;
1707 |   height: 1px;
1708 |   padding: 0;
1709 |   margin: -1px;
1710 |   border: 0;
1711 | }
1712 | .pop-card {
1713 |   min-width: 10px;
1714 |   min-height: 10px;
1715 |   border: 1px solid #ebeef5;
1716 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
1717 |   background-color: #fff;
1718 |   border-radius: 5px;
1719 |   box-sizing: border-box;
1720 |   padding: 5px;
1721 |   font-size: 13px;
1722 |   word-break: break-all;
1723 |   max-width: 400px;
1724 | }
1725 | </style>
1726 | 


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