├── img
    ├── editGif.gif
    ├── canEdit2.png
    ├── canEdit4.png
    ├── canedit3.png
    └── canEditGrid@2x.png
├── component
    ├── index.js
    ├── SvgIcon.vue
    ├── EditTable
    │   ├── DatePickerYear.vue
    │   ├── DatePickerMonth.vue
    │   ├── InputNumber.vue
    │   ├── DatePicker.vue
    │   ├── DatePickerRange.vue
    │   ├── DatePickerMonthRange.vue
    │   ├── TableInput.vue
    │   ├── TableSelect.vue
    │   ├── TableTreeSelect.vue
    │   ├── tableJson.js
    │   ├── DragSpan.vue
    │   ├── EditSub.vue
    │   └── CanEditTable.vue
    ├── scrollable.js
    └── ScrollBar.vue
├── App.vue
├── .gitignore
├── main.js
├── router.js
├── index.js
├── package.json
├── view
    ├── empEditData.js
    ├── EditTableJson.js
    └── EditTableTest.vue
└── README.md


/img/editGif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/CanEditGrid/HEAD/img/editGif.gif


--------------------------------------------------------------------------------
/img/canEdit2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/CanEditGrid/HEAD/img/canEdit2.png


--------------------------------------------------------------------------------
/img/canEdit4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/CanEditGrid/HEAD/img/canEdit4.png


--------------------------------------------------------------------------------
/img/canedit3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/CanEditGrid/HEAD/img/canedit3.png


--------------------------------------------------------------------------------
/img/canEditGrid@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zhjing1019/CanEditGrid/HEAD/img/canEditGrid@2x.png


--------------------------------------------------------------------------------
/component/index.js:
--------------------------------------------------------------------------------
1 | import CanEditTable from "./EditTable/CanEditTable.vue";
2 | 
3 | // 为组件添加 install 方法，用于按需引入
4 | CanEditTable.install = function(Vue) {
5 |   Vue.component(CanEditTable.name, CanEditTable);
6 | };
7 | 
8 | export default CanEditTable;
9 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <edit-table-test></edit-table-test>
 3 | </template>
 4 | 
 5 | <script>
 6 | import EditTableTest from "./view/EditTableTest.vue"
 7 | export default {
 8 |   name: "app",
 9 |   components: {EditTableTest}
10 | };
11 | </script>
12 | 
13 | <style lang="scss"></style>


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


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import ElementUI from 'element-ui'
 3 | import 'element-ui/lib/theme-chalk/index.css'
 4 | import App from './App.vue'
 5 | import ElTreeSelect from 'el-tree-select';
 6 | import EditTable from './index.js'
 7 | Vue.use(ElTreeSelect);
 8 | Vue.use(EditTable);
 9 | 
10 | Vue.use(ElementUI)
11 | 
12 | new Vue({
13 |   el: '#app',
14 |   render: h => h(App)
15 | })
16 | 
17 | 


--------------------------------------------------------------------------------
/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import EditTableTest from "./view/EditTableTest.vue"
 4 | 
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   routes: [
10 |     {
11 |       path: "/",
12 |       name: "EditTableTest",
13 |       component: EditTableTest
14 |     },
15 |     // {
16 |     //   path: "/EditTable",
17 |     //   name: "EditTable",
18 |     //   component: EditTable
19 |     // },
20 |     // {
21 |     //   path: "/CutImages",
22 |     //   name: "CutImages",
23 |     //   component: CutImages
24 |     // }
25 |   ]
26 | });
27 | 


--------------------------------------------------------------------------------
/component/SvgIcon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg class="icon" :style="svgStyle">
 3 |     <use :xlink:href="`#${name}`" />
 4 |   </svg>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "SvgIcon",
10 |   props: {
11 |     name: {
12 |       type: String,
13 |       required: true
14 |     },
15 |     width: {
16 |       type: Number,
17 |       default: 18
18 |     },
19 |     height: {
20 |       type: Number,
21 |       default: 18
22 |     }
23 |   },
24 |   computed: {
25 |     svgStyle() {
26 |       return {
27 |         width: this.width + "px",
28 |         height: this.height + "px",
29 |         verticalAlign: "middle"
30 |       };
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | // 导入单个组件
 2 | import CanEditTable from "./component/index.js";
 3 | 
 4 | 
 5 | 
 6 | const components = [
 7 |     CanEditTable,
 8 | ];
 9 | 
10 | const install = function(Vue) {
11 |   if (install.installed) return;
12 |   install.installed = true;
13 | 
14 |   components.map(component => {
15 |     Vue.component(component.name, component);
16 |   });
17 | };
18 | 
19 | // const EgAdapter = {};
20 | 
21 | // EgAdapter.install = Vue => {
22 | //   if (EgAdapter.install.installed) return;
23 | //   components.map(component => {
24 | //     Vue.component(component.name, component);
25 | //   });
26 | //   Vue.prototype.$EgMessage = EgMessage;
27 | // };
28 | 
29 | if (typeof window !== "undefined" && window.Vue) {
30 |   install(window.Vue);
31 | }
32 | 
33 | // if (typeof window !== "undefined" && window.Vue) {
34 | //   EgAdapter.install(window.Vue);
35 | // }
36 | 
37 | // 这里可以用es6的解构语法导入组件 大概就是这个意思 毕竟没有用插件
38 | export {
39 |     CanEditTable,
40 | };
41 | export default {
42 |   install
43 | };
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "can-edit-table",
 3 |   "version": "1.0.7",
 4 |   "description": "1、下载依赖包 `npm install` 2、启动项目 `vue serve`   ##   项目概览 ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/editGif.gif)   基于vue和element的可拖拽赋值的可编辑表格，支持表格实时校验，联动校验。 ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/canEditGrid%402x.png)   支持input、datepicker、select、selctTree等等。可以自定义td的内容，支持slot插槽。",
 5 |   "main": "index.js",
 6 |   "dependencies": {
 7 |     "element-ui": "^2.10.1",
 8 |     "el-tree-select": "^3.1.3",
 9 |     "node-sass": "^4.12.0",
10 |     "sass-loader": "^7.1.0"
11 |   },
12 |   "devDependencies": {},
13 |   "scripts": {
14 |     "test": "echo \"Error: no test specified\" && exit 1"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/zhjing1019/CanEditGrid.git"
19 |   },
20 |   "author": "zhjing1019 <954740056@qq.com> (http://example.com)",
21 |   "license": "ISC",
22 |   "bugs": {
23 |     "url": "https://github.com/zhjing1019/CanEditGrid/issues"
24 |   },
25 |   "homepage": "https://github.com/zhjing1019/CanEditGrid#readme"
26 | }
27 | 


--------------------------------------------------------------------------------
/component/EditTable/DatePickerYear.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div>
 4 |     <el-date-picker
 5 |       size="mini"
 6 |       style="width:100%"
 7 |       v-model="timeData"
 8 |       type="year"
 9 |       format="yyyy"
10 |       value-format="yyyy-MM-dd"
11 |       :disabled="field && field.disabled ? field.disabled : false"
12 |     >
13 |     </el-date-picker>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "datePickerYear",
20 |   props: {
21 |     valueDefault: String,
22 |     editRow: Number,
23 |     editCol: Number,
24 |     field: Object,
25 |     rowData: Object,
26 |     propRuls: String
27 |   },
28 |   inject: ["edit"],
29 |   data() {
30 |     return {
31 |       timeData: this.valueDefault
32 |     };
33 |   },
34 |   watch: {
35 |     timeData(val) {
36 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
37 |       let data = val;
38 |       data = this.edit.dateTimeChang(data);
39 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
40 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
41 |     },
42 |     valueDefault: {
43 |       deep: true,
44 |       immediate: true,
45 |       handler(val) {
46 |         this.timeData = val;
47 |       }
48 |     }
49 |   }
50 | };
51 | </script>
52 | 
53 | <style scoped></style>
54 | 


--------------------------------------------------------------------------------
/component/EditTable/DatePickerMonth.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div>
 4 |     <el-date-picker
 5 |       size="mini"
 6 |       style="width:100%"
 7 |       v-model="timeData"
 8 |       type="month"
 9 |       format="yyyy-MM"
10 |       :disabled="field && field.disabled ? field.disabled : false"
11 |       value-format="yyyy-MM-dd"
12 |     >
13 |     </el-date-picker>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "DatePickerMonth",
20 |   props: {
21 |     valueDefault: String,
22 |     editRow: Number,
23 |     editCol: Number,
24 |     field: Object,
25 |     rowData: Object,
26 |     propRuls: String
27 |   },
28 |   inject: ["edit"],
29 |   data() {
30 |     return {
31 |       timeData: this.valueDefault
32 |     };
33 |   },
34 |   watch: {
35 |     timeData(val) {
36 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
37 |       let data = val;
38 |       data = this.edit.dateTimeChang(data);
39 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
40 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
41 |     },
42 |     valueDefault: {
43 |       deep: true,
44 |       immediate: true,
45 |       handler(val) {
46 |         this.timeData = val;
47 |       }
48 |     }
49 |   }
50 | };
51 | </script>
52 | 
53 | <style scoped></style>
54 | 


--------------------------------------------------------------------------------
/component/EditTable/InputNumber.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div>
 4 |     <el-input
 5 |       size="mini"
 6 |       :style="tableInputStyle"
 7 |       v-model.number="timeData"
 8 |       :autofocus="true"
 9 |       @blur="inputNumberBlur"
10 |       :disabled="field && field.disabled ? field.disabled : false"
11 |       clearable
12 |     ></el-input>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: "tableInput",
19 |   props: {
20 |     valueDefault: Number,
21 |     editRow: Number,
22 |     editCol: Number,
23 |     propRuls: String,
24 |     field: Object,
25 |     rowData: Object
26 |   },
27 |   computed: {
28 |     tableInputStyle() {
29 |       return {
30 |         height: this.$parent.tableTdHeight - 6 + "px"
31 |       };
32 |     }
33 |   },
34 |   data() {
35 |     return {
36 |       timeData: this.valueDefault
37 |     };
38 |   },
39 |   watch: {
40 |     timeData(val) {
41 |       this.$parent.$parent.data[this.editRow][this.$parent.$parent.headers[this.editCol].name] = val;
42 |       let data = val;
43 |       this.$parent.$parent.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
44 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
45 |     },
46 |     valueDefault: {
47 |       deep: true,
48 |       immediate: true,
49 |       handler(val) {
50 |         this.timeData = val;
51 |       }
52 |     }
53 |   },
54 |   methods: {
55 |     inputNumberBlur() {
56 |       this.$emit(
57 |         "inputNumberBlur",
58 |         this.$parent.$parent.data[this.editRow],
59 |         this.$parent.$parent.headers[this.editCol].name,
60 |         this.timeData
61 |       );
62 |     }
63 |   }
64 | };
65 | </script>
66 | 
67 | <style scoped></style>
68 | 


--------------------------------------------------------------------------------
/component/EditTable/DatePicker.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div>
 4 |     <el-date-picker
 5 |       size="mini"
 6 |       style="width:100%"
 7 |       v-model="timeData"
 8 |       type="date"
 9 |       format="yyyy-MM-dd"
10 |       :disabled="field && field.disabled ? field.disabled : false"
11 |       value-format="yyyy-MM-dd"
12 |       :picker-options="dateValue"
13 |     >
14 |     </el-date-picker>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "datePicker",
21 |   props: {
22 |     valueDefault: String,
23 |     editRow: Number,
24 |     editCol: Number,
25 |     field: Object,
26 |     rowData: Object,
27 |     propRuls: String,
28 |     generalDate: {
29 |       type: String,
30 |       default: null
31 |     }
32 |   },
33 |   inject: ["edit"],
34 |   data() {
35 |     return {
36 |       timeData: this.valueDefault,
37 |       dateValue: {
38 |         disabledDate: this.disabledDate
39 |       }
40 |     };
41 |   },
42 |   watch: {
43 |     timeData(val) {
44 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
45 |       let data = val;
46 |       data = this.edit.dateTimeChang(data);
47 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
48 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
49 |     },
50 |     valueDefault: {
51 |       deep: true,
52 |       immediate: true,
53 |       handler(val) {
54 |         this.timeData = val;
55 |       }
56 |     }
57 |   },
58 |   methods: {
59 |     disabledDate(time) {
60 |       if (time && this.generalDate) {
61 |         return time.getTime() < new Date(this.generalDate).getTime() - 8.64e7;
62 |       }
63 |     }
64 |   }
65 | };
66 | </script>
67 | 
68 | <style scoped></style>
69 | 


--------------------------------------------------------------------------------
/component/EditTable/DatePickerRange.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div class="date-picker-range">
 4 |     <el-date-picker
 5 |       size="mini"
 6 |       style="width:100%"
 7 |       v-model="timeData"
 8 |       type="daterange"
 9 |       range-separator="至"
10 |       start-placeholder="开始日期"
11 |       end-placeholder="结束日期"
12 |       format="yyyy-MM-dd"
13 |       value-format="yyyy-MM-dd"
14 |       :disabled="field && field.disabled ? field.disabled : false"
15 |     >
16 |     </el-date-picker>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "datePickerRange",
23 |   props: {
24 |     valueDefault: Array,
25 |     editRow: Number,
26 |     editCol: Number,
27 |     field: Object,
28 |     rowData: Object,
29 |     propRuls: String
30 |   },
31 |   data() {
32 |     return {
33 |       timeData: this.valueDefault
34 |     };
35 |   },
36 |   inject: ["edit"],
37 |   watch: {
38 |     timeData(val) {
39 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
40 |       let data = val || "";
41 |       if (data && data.length > 1) {
42 |         data.forEach(x => {
43 |           let time = this.edit.dateTimeChang(x);
44 |           this.edit.tableValidate(this.propRuls, time, this.editCol, this.editRow, 0);
45 |         });
46 |       } else {
47 |         let empty = this.edit.dateTimeChang(data);
48 |         this.edit.tableValidate(this.propRuls, empty, this.editCol, this.editRow, 0);
49 |       }
50 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
51 |     },
52 |     valueDefault: {
53 |       deep: true,
54 |       immediate: true,
55 |       handler(val) {
56 |         this.timeData = val;
57 |       }
58 |     }
59 |   }
60 | };
61 | </script>
62 | 
63 | <style scoped></style>
64 | 


--------------------------------------------------------------------------------
/component/EditTable/DatePickerMonthRange.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div class="date-picker-month-range">
 4 |     <el-date-picker
 5 |       size="mini"
 6 |       style="width:100%"
 7 |       v-model="timeData"
 8 |       type="monthrange"
 9 |       range-separator="至"
10 |       start-placeholder="开始日期"
11 |       end-placeholder="结束日期"
12 |       format="yyyy-MM"
13 |       :disabled="field && field.disabled ? field.disabled : false"
14 |       value-format="yyyy-MM-dd"
15 |     >
16 |     </el-date-picker>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "DatePickerMonthRange",
23 |   props: {
24 |     valueDefault: Array,
25 |     editRow: Number,
26 |     editCol: Number,
27 |     field: Object,
28 |     rowData: Object,
29 |     propRuls: String
30 |   },
31 |   data() {
32 |     return {
33 |       timeData: this.valueDefault
34 |     };
35 |   },
36 |   inject: ["edit"],
37 |   watch: {
38 |     timeData(val) {
39 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
40 |       let data = val || "";
41 |       if (data && data.length > 1) {
42 |         data.forEach(x => {
43 |           let time = this.edit.dateTimeChang(x);
44 |           this.edit.tableValidate(this.propRuls, time, this.editCol, this.editRow, 0);
45 |         });
46 |       } else {
47 |         let empty = this.edit.dateTimeChang(data);
48 |         this.edit.tableValidate(this.propRuls, empty, this.editCol, this.editRow, 0);
49 |       }
50 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
51 |     },
52 |     valueDefault: {
53 |       deep: true,
54 |       immediate: true,
55 |       handler(val) {
56 |         this.timeData = val;
57 |       }
58 |     }
59 |   }
60 | };
61 | </script>
62 | 
63 | <style scoped></style>
64 | 


--------------------------------------------------------------------------------
/component/EditTable/TableInput.vue:
--------------------------------------------------------------------------------
 1 | <!--可编辑表格input输入框组件-->
 2 | <template>
 3 |   <div>
 4 |     <el-input
 5 |       size="mini"
 6 |       :style="tableInputStyle"
 7 |       v-model="timeData"
 8 |       :autofocus="true"
 9 |       @blur="inputBlur"
10 |       @focus="focus"
11 |       :disabled="field && field.disabled ? field.disabled : false"
12 |       clearable
13 |     ></el-input>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "tableInput",
20 |   props: {
21 |     valueDefault: String,
22 |     editRow: Number,
23 |     editCol: Number,
24 |     field: Object,
25 |     rowData: Object,
26 |     propRuls: String
27 |   },
28 |   inject: ["edit"],
29 |   computed: {
30 |     tableInputStyle() {
31 |       return {
32 |         height: this.$parent.tableTdHeight - 6 + "px"
33 |       };
34 |     }
35 |   },
36 |   data() {
37 |     return {
38 |       timeData: this.valueDefault
39 |     };
40 |   },
41 |   watch: {
42 |     timeData(val) {
43 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
44 |       let data = val;
45 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
46 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
47 |     },
48 |     valueDefault: {
49 |       deep: true,
50 |       immediate: true,
51 |       handler(val) {
52 |         this.timeData = val;
53 |       }
54 |     }
55 |   },
56 |   methods: {
57 |     inputBlur() {
58 |       this.$emit(
59 |         "inputBlur",
60 |         this.edit.data[this.editRow],
61 |         this.edit.headers[this.editCol].name,
62 |         this.timeData,
63 |         this.editRow
64 |       );
65 |     },
66 |     focus() {
67 |       this.edit.dragSpanShow = true;
68 |     }
69 |   }
70 | };
71 | </script>
72 | 
73 | <style scoped></style>
74 | 


--------------------------------------------------------------------------------
/component/EditTable/TableSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-select
 4 |       :disabled="field && field.disabled ? field.disabled : false"
 5 |       :multiple="field && field.multiple ? field.multiple : false"
 6 |       collapse-tags
 7 |       size="mini"
 8 |       ref="table-edit-select"
 9 |       v-model="timeData"
10 |       @click.native="selectClick($event)"
11 |     >
12 |       <el-option v-for="item in selectOption" :key="item[value]" :label="item[label]" :value="item[value]"> </el-option>
13 |     </el-select>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: "tableSelect",
20 |   inject: ["edit"],
21 |   props: {
22 |     valueDefault: [String, Array],
23 |     editRow: Number,
24 |     editCol: Number,
25 |     field: Object,
26 |     rowData: Object,
27 |     selectOption: Array,
28 |     propRuls: String,
29 |     label: {
30 |       type: String,
31 |       required: true
32 |     },
33 |     value: {
34 |       type: String,
35 |       require: true
36 |     }
37 |   },
38 |   data() {
39 |     return {
40 |       timeData: this.valueDefault
41 |     };
42 |   },
43 |   watch: {
44 |     timeData(val) {
45 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
46 |       let data = val;
47 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
48 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
49 |     },
50 |     valueDefault: {
51 |       deep: true,
52 |       immediate: true,
53 |       handler(val) {
54 |         if (!this.field.multiple && this.field.multiple !== true) {
55 |           this.timeData = val;
56 |         }
57 |       }
58 |     }
59 |   },
60 | 
61 |   methods: {
62 |     selectClick(e) {
63 |       this.$parent.dragDot(e, this.editRow, this.editCol);
64 |     }
65 |   }
66 | };
67 | </script>
68 | 
69 | <style scoped></style>
70 | 


--------------------------------------------------------------------------------
/component/EditTable/TableTreeSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="table-tree-select">
 3 |     <el-tree-select
 4 |       style="widht: 100%"
 5 |       size="mini"
 6 |       :styles="styles"
 7 |       v-model="timeData"
 8 |       :treeParams="treeParams"
 9 |       :disabled="field && field.disabled ? field.disabled : false"
10 |       :selectParams="selectParams"
11 |       ref="treeSelect"
12 |       @node-click="valueChange"
13 |       placeholder=""
14 |     />
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   name: "tableTreeSelect",
21 |   props: {
22 |     valueDefault: String,
23 |     editRow: Number,
24 |     editCol: Number,
25 |     propRuls: String,
26 |     treeParams: Object,
27 |     selectParams: Object,
28 |     field: Object,
29 |     rowData: Object
30 |   },
31 |   inject: ["edit"],
32 | 
33 |   data() {
34 |     return {
35 |       styles: {
36 |         width: "260px"
37 |       },
38 |       timeData: this.valueDefault
39 |     };
40 |   },
41 |   watch: {
42 |     timeData(val) {
43 |       this.edit.data[this.editRow][this.edit.headers[this.editCol].name] = val;
44 |       let data = val;
45 |       this.edit.tableValidate(this.propRuls, data, this.editCol, this.editRow, 0);
46 |       this.$emit("data-change", val, this.editRow, this.editCol, this.rowData, this.field, this.propRuls);
47 |     },
48 |     valueDefault: {
49 |       deep: true,
50 |       immediate: true,
51 |       handler(val) {
52 |         this.timeData = val;
53 |       }
54 |     }
55 |   },
56 | 
57 |   methods: {
58 |     valueChange() {}
59 |   }
60 | };
61 | </script>
62 | 
63 | <style lang="scss">
64 | .table-tree-select {
65 |   .el-input__inner {
66 |     height: 29px;
67 |   }
68 |   .el-popover__reference {
69 |     width: 100% !important;
70 |     .el-input--suffix {
71 |       height: 28px !important;
72 |       input {
73 |         height: 28px !important;
74 |       }
75 |       .el-input__suffix {
76 |         height: 28px !important;
77 |       }
78 |       .el-input__icon {
79 |         line-height: 28px;
80 |       }
81 |     }
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/component/scrollable.js:
--------------------------------------------------------------------------------
 1 | import { addResizeListener, removeResizeListener } from "element-ui/lib/utils/resize-event";
 2 | 
 3 | export default {
 4 |   data() {
 5 |     return {
 6 |       scrollX: 0,
 7 |       scrollY: 0,
 8 |       clientWidth: 0,
 9 |       clientHeight: 0
10 |     };
11 |   },
12 |   computed: {
13 |     actualHeight() {
14 |       return 100;
15 |     },
16 |     actualWidth() {
17 |       return 100;
18 |     },
19 |     // 水平方向移动百分比
20 |     hMove() {
21 |       return (this.scrollX * 100) / this.clientWidth;
22 |     },
23 |     // 垂直方向移动百分比
24 |     vMove() {
25 |       return (this.scrollY * 100) / this.clientHeight;
26 |     },
27 |     hBarSize() {
28 |       return (this.clientWidth * 100) / this.actualWidth;
29 |     },
30 |     vBarSize() {
31 |       return (this.clientHeight * 100) / this.actualHeight;
32 |     },
33 |     scrollXMax() {
34 |       const result = this.actualWidth - this.clientWidth;
35 |       return result > 0 ? result : 0;
36 |     },
37 |     scrollYMax() {
38 |       const result = this.actualHeight - this.clientHeight;
39 |       return result > 0 ? result : 0;
40 |     }
41 |   },
42 |   mounted() {
43 |     addResizeListener(this.$el, this.sizeChanged);
44 |   },
45 |   beforeDestroy() {
46 |     removeResizeListener(this.$el, this.sizeChanged);
47 |   },
48 |   methods: {
49 |     sizeChanged() {
50 |       this.clientWidth = this.$el.clientWidth;
51 |       this.clientHeight = this.$el.clientHeight;
52 |       this.$nextTick(() => {
53 |         if (this.scrollX > this.scrollXMax) this.scrollX = this.scrollXMax;
54 |         if (this.scrollY > this.scrollYMax) this.scrollY = this.scrollYMax;
55 |       });
56 |     },
57 |     vScroll(percent) {
58 |       this.scrollY = (this.actualHeight * percent) / 100;
59 |     },
60 |     hScroll(percent) {
61 |       this.scrollX = (this.actualWidth * percent) / 100;
62 |     },
63 |     wheel(e) {
64 |       e.preventDefault();
65 |       if (e.deltaX) {
66 |         let x = this.scrollX + e.deltaX;
67 |         if (x < 0) x = 0;
68 |         if (x > this.scrollXMax) x = this.scrollXMax;
69 |         if (this.scrollX != x) this.scrollX = x;
70 |       }
71 |       if (e.deltaY) {
72 |         let y = this.scrollY + e.deltaY;
73 |         if (y < 0) y = 0;
74 |         if (y > this.scrollYMax) y = this.scrollYMax;
75 |         if (this.scrollY != y) this.scrollY = y;
76 |       }
77 |     }
78 |   }
79 | };
80 | 


--------------------------------------------------------------------------------
/view/empEditData.js:
--------------------------------------------------------------------------------
  1 | 
  2 | export default {
  3 |   //表格类型
  4 |   fixCols: 1,
  5 |   tableHeaderHeight: 40,
  6 |   tableTdHeight: 40,
  7 |   ref: "tableEdit2",
  8 |   editTable: {
  9 |     editTableType: "del",
 10 |     rules: {
 11 |       zzsj: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
 12 |       zzlb: [{ required: true, message: "请选择类别", trigger: "change" }],
 13 |     }
 14 |   },
 15 |   //表头数据
 16 |   headers: [
 17 |     {
 18 |       name: "zzry",
 19 |       title: "测试1",
 20 |       width: 350,
 21 |       slot: true
 22 |     },
 23 |     {
 24 |       name: "zzsj",
 25 |       width: 200,
 26 |       title: "测试时间",
 27 |       editType: "date",
 28 |       pickerOptions: true,
 29 |     },
 30 |     {
 31 |       name: "sfz",
 32 |       width: 200,
 33 |       title: "身份证(slot内容、自定义校验规则)",
 34 |       slot: true
 35 |     },
 36 |     {
 37 |       name: "zzlb",
 38 |       width: 200,
 39 |       title: "测试类别",
 40 |       editType: "select",
 41 |       label: "code",
 42 |       value: "id",
 43 |       list: [
 44 |         {
 45 |           code: "测试code1",
 46 |           id: "1"
 47 |         },
 48 |         {
 49 |           code: "测试code2",
 50 |           id: "2"
 51 |         },
 52 |         {
 53 |           code: "测试code3",
 54 |           id: "3"
 55 |         },
 56 |         {
 57 |           code: "测试code4",
 58 |           id: "4"
 59 |         }
 60 |       ]
 61 |     },
 62 |     {
 63 |       name: "khqk",
 64 |       width: 200,
 65 |       title: "测试（只展示数据）",
 66 |       editType: "none"
 67 |     },
 68 |     {
 69 |       name: "zzsm",
 70 |       title: "测试三",
 71 |       width: 200,
 72 |       editType: "input"
 73 |     }
 74 |   ],
 75 |   data: [
 76 |     {
 77 |       zzry: {
 78 |         name: "测试",
 79 |         sex: "男",
 80 |         bus: "测试部门",
 81 |         pos: "测试",
 82 |         emp: "测试",
 83 |         auth: "测试",
 84 |         num: "测试"
 85 |       },
 86 |       zzsj: "",
 87 |       zzlb: "",
 88 |       khqk: "测试",
 89 |       zzsm: "测试",
 90 |       sfz: ""
 91 |     },
 92 |     {
 93 |       zzry: {
 94 |         name: "测试",
 95 |         sex: "测试",
 96 |         bus: "测试",
 97 |         pos: "测试",
 98 |         emp: "测试",
 99 |         auth: "测试",
100 |         num: "测试"
101 |       },
102 |       zzsj: "",
103 |       zzlb: "",
104 |       khqk: "测试",
105 |       zzsm: "测试",
106 |       sfz: ""
107 |     }
108 |   ]
109 | };
110 | 


--------------------------------------------------------------------------------
/component/ScrollBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="rr-scrollbar" :class="{ vertical, horizontal }" @mousedown="clickTrack">
  3 |     <div class="rr-scrollbar__thumb" ref="thumb" :style="thumbStyle" @mousedown="clickThumb" />
  4 |   </div>
  5 | </template>
  6 | <script>
  7 | export default {
  8 |   name: "ScrollBar",
  9 | 
 10 |   props: {
 11 |     vertical: Boolean,
 12 |     size: Number,
 13 |     move: Number
 14 |   },
 15 |   computed: {
 16 |     thumbStyle() {
 17 |       if (this.vertical) {
 18 |         const translate = `translateY(${this.move}%)`;
 19 |         return {
 20 |           height: this.size + "%",
 21 |           transform: translate,
 22 |           msTransform: translate,
 23 |           webkitTransform: translate
 24 |         };
 25 |       } else {
 26 |         const translate = `translateX(${this.move}%)`;
 27 |         return {
 28 |           width: this.size + "%",
 29 |           transform: translate,
 30 |           msTransform: translate,
 31 |           webkitTransform: translate
 32 |         };
 33 |       }
 34 |     },
 35 |     horizontal() {
 36 |       return !this.vertical;
 37 |     }
 38 |   },
 39 |   methods: {
 40 |     clickTrack(e) {
 41 |       if (this.vertical) {
 42 |         const offset = Math.abs(e.target.getBoundingClientRect().top - e.clientY);
 43 |         const thumbHalf = this.$refs.thumb.offsetHeight / 2;
 44 |         this.scrollTo(((offset - thumbHalf) * 100) / this.$el.offsetHeight);
 45 |       } else {
 46 |         const offset = Math.abs(e.target.getBoundingClientRect().left - e.clientX);
 47 |         const thumbHalf = this.$refs.thumb.offsetWidth / 2;
 48 |         this.scrollTo(((offset - thumbHalf) * 100) / this.$el.offsetWidth);
 49 |       }
 50 |     },
 51 | 
 52 |     clickThumb(e) {
 53 |       e.stopImmediatePropagation();
 54 |       this.cursorDown = true;
 55 |       document.addEventListener("mousemove", this.mouseMoveHandler, false);
 56 |       document.addEventListener("mouseup", this.mouseUpHandler, false);
 57 |       document.onselectstart = () => false;
 58 |       this.Origin = this.vertical
 59 |         ? e.target.offsetHeight - (e.clientY - e.target.getBoundingClientRect().top)
 60 |         : e.target.offsetWidth - (e.clientX - e.target.getBoundingClientRect().left);
 61 |     },
 62 | 
 63 |     mouseMoveHandler(e) {
 64 |       if (this.cursorDown === false) return;
 65 |       if (!this.Origin) return;
 66 |       if (this.vertical) {
 67 |         const offset = e.clientY - this.$el.getBoundingClientRect().top;
 68 |         const thumbClickPosition = this.$refs.thumb.offsetHeight - this.Origin;
 69 |         this.scrollTo(((offset - thumbClickPosition) * 100) / this.$el.offsetHeight);
 70 |       } else {
 71 |         const offset = e.clientX - this.$el.getBoundingClientRect().left;
 72 |         const thumbClickPosition = this.$refs.thumb.offsetWidth - this.Origin;
 73 |         this.scrollTo(((offset - thumbClickPosition) * 100) / this.$el.offsetWidth);
 74 |       }
 75 |     },
 76 | 
 77 |     mouseUpHandler() {
 78 |       this.cursorDown = false;
 79 |       this.X = this.Y = 0;
 80 |       document.removeEventListener("mousemove", this.mouseMoveHandler);
 81 |       document.onselectstart = null;
 82 |     },
 83 | 
 84 |     scrollTo(percent) {
 85 |       if (percent < 0) percent = 0;
 86 |       if (percent + this.size > 100) percent = 100 - this.size;
 87 |       this.$emit("scroll", percent);
 88 |     }
 89 |   },
 90 | 
 91 |   destroyed() {
 92 |     document.removeEventListener("mouseup", this.mouseUpHandler);
 93 |   }
 94 | };
 95 | </script>
 96 | <style lang="scss">
 97 | @import "~element-ui/packages/theme-chalk/src/common/var";
 98 | .rr-scrollbar {
 99 |   position: absolute;
100 |   right: 2px;
101 |   bottom: 2px;
102 |   z-index: 114;
103 |   border-radius: 4px;
104 |   opacity: 1;
105 | 
106 |   &:hover {
107 |     opacity: 1;
108 |   }
109 |   &.vertical {
110 |     width: 6px;
111 |     top: 44px;
112 |     &:hover {
113 |       width: 10px;
114 |     }
115 |     > div {
116 |       width: 100%;
117 |     }
118 |   }
119 | 
120 |   &.horizontal {
121 |     height: 6px;
122 |     left: 2px;
123 |     &:hover {
124 |       height: 10px;
125 |     }
126 |     > div {
127 |       height: 100%;
128 |     }
129 |   }
130 | }
131 | .rr-scrollbar__thumb {
132 |   position: relative;
133 |   display: block;
134 |   width: 0;
135 |   height: 0;
136 |   cursor: pointer;
137 |   border-radius: inherit;
138 |   background-color: $--scrollbar-background-color;
139 |   transition: 0.3s background-color;
140 |   &:hover {
141 |     background-color: $--scrollbar-hover-background-color;
142 |   }
143 | }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/view/EditTableJson.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   //表格类型
  3 |   //(editTableType: 'del'表示可以删除的表格，'clear'表示可以清空的表格)
  4 |   //typeIcon: 序号处hover之后icon的名字
  5 |   fixCols: 1,
  6 |   tableHeaderHeight: 40,
  7 |   tableTdHeight: 40,
  8 |   ref: "tableEdit1",
  9 |   editTable: {
 10 |     rules: {
 11 |       input: [
 12 |         { required: true, message: "请输入活动名称ceshi", trigger: "change" },
 13 |         { min: 1, max: 3, message: "长度在 1 到 3 个字符", trigger: "change" }
 14 |       ],
 15 |       newPost: [
 16 |         { required: true, message: "请输入活动名称", trigger: "change" },
 17 |         { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
 18 |       ],
 19 |       time: {
 20 |         type: "date",
 21 |         required: true,
 22 |         message: "请选择日期",
 23 |         trigger: "change"
 24 |       },
 25 |       newDepartment: [{ required: true, message: "请选择部门", trigger: "change" }],
 26 |       treeSelect: [{ required: true, message: "请选择部门", trigger: "change" }],
 27 |       timeRange: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
 28 |       dateMonth: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
 29 |       dateYear: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
 30 |       dateMonthRange: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
 31 |       inputNumber: [{ type: "number", required: true, message: "请输入数字输入框", trigger: "change" }],
 32 |       inputNumber1: [{ type: "number", required: true, message: "请输入数字输入框", trigger: "change" }],
 33 |       selectPerson1: [{ type: "string", required: true, message: "请选择人", trigger: "change" }],
 34 |       select: [{ type: "string", required: true, message: "请选择code", trigger: "change" }]
 35 |     }
 36 |   },
 37 | 
 38 |   //表头数据
 39 |   headers: [
 40 |     {
 41 |       name: "fixedCol",
 42 |       title: "固定的列",
 43 |       width: 100,
 44 |       slot: true
 45 |     },
 46 |     {
 47 |       name: "selectPerson",
 48 |       width: 200,
 49 |       title: "测试选择组织机构组件",
 50 |       slot: true
 51 |     },
 52 |     {
 53 |       name: "treeSelect",
 54 |       title: "选择树机构",
 55 |       width: 200,
 56 |       // slot: true,
 57 |       editType: "treeSelect",
 58 |       disabled: false,
 59 |       treeParams: {
 60 |         clickParent: true,
 61 |         filterable: false,
 62 |         "check-strictly": true,
 63 |         "default-expand-all": false,
 64 |         "expand-on-click-node": false,
 65 |         data: [
 66 |           {
 67 |             id: "1",
 68 |             name: "哎哎哎",
 69 |             children: [{ id: "3", name: "啊啊啊啊" }]
 70 |           },
 71 |           {
 72 |             id: "2",
 73 |             name: "发生的"
 74 |           }
 75 |         ],
 76 |         props: {
 77 |           children: "children",
 78 |           label: "name",
 79 |           value: "id"
 80 |         }
 81 |       },
 82 |       selectParams: {
 83 |         multiple: false,
 84 |         clearable: true,
 85 |         placeholder: "请输入内容"
 86 |       },
 87 |       list: []
 88 |     },
 89 |     {
 90 |       name: "input",
 91 |       title: "input输入框",
 92 |       width: 100,
 93 |       editType: "input",
 94 |       list: []
 95 |     },
 96 |     {
 97 |       name: "select",
 98 |       title: "select选择框",
 99 |       width: 100,
100 |       multiple: false,
101 |       editType: "select",
102 |       label: "code",
103 |       value: "id",
104 |       list: [
105 |         {
106 |           code: "测试code1",
107 |           id: "1"
108 |         },
109 |         {
110 |           code: "测试code2",
111 |           id: "2"
112 |         },
113 |         {
114 |           code: "测试code3",
115 |           id: "3"
116 |         },
117 |         {
118 |           code: "测试code4",
119 |           id: "4"
120 |         }
121 |       ]
122 |     },
123 |     {
124 |       name: "time",
125 |       title: "年月日时间选择框",
126 |       width: 150,
127 |       editType: "date",
128 |       // generalDate: "2019-06-03",
129 |       list: []
130 |     },
131 |     {
132 |       name: "dateRange",
133 |       title: "年月日时间范围",
134 |       width: 300,
135 |       editType: "dateRange",
136 |       list: []
137 |     },
138 |     {
139 |       name: "dateMonth",
140 |       title: "年月时间选择框",
141 |       width: 150,
142 |       editType: "dateMonth",
143 |       list: []
144 |     },
145 |     {
146 |       name: "dateMonthRange",
147 |       title: "年月时间选择框",
148 |       width: 300,
149 |       editType: "dateMonthRange",
150 |       list: []
151 |     },
152 |     {
153 |       name: "dateYear",
154 |       title: "年度选择框",
155 |       width: 150,
156 |       editType: "dateYear",
157 |       list: []
158 |     },
159 |     {
160 |       name: "inputNumber",
161 |       title: "数字输入框",
162 |       width: 150,
163 |       editType: "inputNumber",
164 |       list: []
165 |     },
166 |     {
167 |       name: "inputNumber1",
168 |       title: "数字输入框",
169 |       width: 150,
170 |       editType: "inputNumber",
171 |       list: []
172 |     },
173 | 
174 |     {
175 |       name: "text",
176 |       title: "显示文本值",
177 |       width: 100,
178 |       editType: "none",
179 |       list: []
180 |     }
181 |   ],
182 |   data: [
183 |     {
184 |       fixedCol: "第一列",
185 |       selectPerson: "",
186 |       selectPerson1: {
187 |         id: "",
188 |         name: ""
189 |       },
190 |       treeSelect: "",
191 |       input: "",
192 |       select: [],
193 |       newPost: "",
194 |       time: "",
195 |       timeRange: [],
196 |       dateMonth: "",
197 |       dateMonthRange: [],
198 |       dateYear: "",
199 |       inputNumber: "",
200 |       inputNumber1: "",
201 |       text: "测试测试"
202 |     }
203 |   ]
204 | };
205 | 


--------------------------------------------------------------------------------
/component/EditTable/tableJson.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   editTable: {
  3 |     ref: "tableEdit",
  4 |     fixCols: 1,
  5 |     tableHeaderHeight: 40,
  6 |     tableTdHeight: 32,
  7 |     rules: {
  8 |       oldPost: [
  9 |         { required: true, message: "请输入活动名称ceshi", trigger: "change" },
 10 |         { min: 1, max: 3, message: "长度在 1 到 3 个字符", trigger: "change" }
 11 |       ],
 12 |       newPost: [
 13 |         { required: true, message: "请输入活动名称", trigger: "change" },
 14 |         { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
 15 |       ],
 16 |       time: [
 17 |         {
 18 |           type: "date",
 19 |           required: true,
 20 |           message: "请选择日期",
 21 |           trigger: "change"
 22 |         }
 23 |       ],
 24 |       newDepartment: [{ required: true, message: "请选择部门", trigger: "change" }]
 25 |     }
 26 |   },
 27 | 
 28 |   //表头数据
 29 |   headers: [
 30 |     {
 31 |       name: "name",
 32 |       title: "姓名",
 33 |       width: 100,
 34 |       editType: "none",
 35 |       list: []
 36 |     },
 37 |     {
 38 |       name: "oldDepartment",
 39 |       title: "原部门",
 40 |       width: 100,
 41 |       editType: "none",
 42 |       list: []
 43 |     },
 44 |     {
 45 |       name: "oldPost",
 46 |       title: "原岗位",
 47 |       width: 100,
 48 |       editType: "input",
 49 |       list: []
 50 |     },
 51 |     {
 52 |       name: "newDepartment",
 53 |       title: "新部门",
 54 |       width: 100,
 55 |       editType: "select",
 56 |       list: [
 57 |         {
 58 |           label: "测试1",
 59 |           value: "1"
 60 |         },
 61 |         {
 62 |           label: "测试2",
 63 |           value: "2"
 64 |         },
 65 |         {
 66 |           label: "测试3",
 67 |           value: "3"
 68 |         },
 69 |         {
 70 |           label: "测试4",
 71 |           value: "4"
 72 |         }
 73 |       ]
 74 |     },
 75 |     {
 76 |       name: "newPost",
 77 |       title: "新岗位",
 78 |       width: 100,
 79 |       editType: "input",
 80 |       list: []
 81 |     },
 82 |     {
 83 |       name: "time",
 84 |       title: "时间",
 85 |       width: 150,
 86 |       editType: "date",
 87 |       list: []
 88 |     },
 89 |     {
 90 |       name: "test",
 91 |       title: "测试",
 92 |       width: 100,
 93 |       editType: "none",
 94 |       list: []
 95 |     }
 96 |   ],
 97 |   data: [
 98 |     {
 99 |       key: "0",
100 |       name: "李四",
101 |       oldDepartment: "产品部",
102 |       oldPost: "",
103 |       newDepartment: "2",
104 |       newPost: "测试岗位",
105 |       time: "2018-10-26",
106 |       test: "测试测试"
107 |     },
108 |     {
109 |       key: "0",
110 |       name: "张三",
111 |       oldDepartment: "研发部",
112 |       oldPost: "",
113 |       newDepartment: "1",
114 |       newPost: "UI",
115 |       time: "2018-10-22",
116 |       test: "测试"
117 |     },
118 |     {
119 |       key: "0",
120 |       name: "张三",
121 |       oldDepartment: "研发部",
122 |       oldPost: "",
123 |       newDepartment: "1",
124 |       newPost: "UI",
125 |       time: "",
126 |       test: "测试"
127 |     },
128 |     {
129 |       key: "0",
130 |       name: "张三",
131 |       oldDepartment: "研发部",
132 |       oldPost: "",
133 |       newDepartment: "1",
134 |       newPost: "UI",
135 |       time: "",
136 |       test: "测试"
137 |     },
138 |     {
139 |       key: "0",
140 |       name: "张三",
141 |       oldDepartment: "研发部",
142 |       oldPost: "",
143 |       newDepartment: "1",
144 |       newPost: "UI",
145 |       time: "2018-10-22",
146 |       test: "测试"
147 |     },
148 |     {
149 |       key: "0",
150 |       name: "张三",
151 |       oldDepartment: "研发部",
152 |       oldPost: "",
153 |       newDepartment: "1",
154 |       newPost: "UI",
155 |       time: "2018-10-22",
156 |       test: "测试"
157 |     },
158 |     {
159 |       key: "0",
160 |       name: "张三",
161 |       oldDepartment: "研发部",
162 |       oldPost: "",
163 |       newDepartment: "1",
164 |       newPost: "UI",
165 |       time: "2018-10-22",
166 |       test: "测试"
167 |     },
168 |     {
169 |       key: "0",
170 |       name: "张三",
171 |       oldDepartment: "研发部",
172 |       oldPost: "",
173 |       newDepartment: "1",
174 |       newPost: "UI",
175 |       time: "2018-10-22",
176 |       test: "测试"
177 |     },
178 |     {
179 |       key: "0",
180 |       name: "张三",
181 |       oldDepartment: "研发部",
182 |       oldPost: "",
183 |       newDepartment: "1",
184 |       newPost: "UI",
185 |       time: "2018-10-22",
186 |       test: "测试"
187 |     },
188 |     {
189 |       key: "0",
190 |       name: "张三",
191 |       oldDepartment: "研发部",
192 |       oldPost: "",
193 |       newDepartment: "1",
194 |       newPost: "UI",
195 |       time: "2018-10-22",
196 |       test: "测试"
197 |     },
198 |     {
199 |       key: "0",
200 |       name: "张三",
201 |       oldDepartment: "研发部",
202 |       oldPost: "",
203 |       newDepartment: "1",
204 |       newPost: "UI",
205 |       time: "2018-10-22",
206 |       test: "测试"
207 |     },
208 |     {
209 |       key: "0",
210 |       name: "张三",
211 |       oldDepartment: "研发部",
212 |       oldPost: "",
213 |       newDepartment: "1",
214 |       newPost: "UI",
215 |       time: "2018-10-22",
216 |       test: "测试"
217 |     },
218 |     {
219 |       key: "0",
220 |       name: "张三",
221 |       oldDepartment: "研发部",
222 |       oldPost: "",
223 |       newDepartment: "1",
224 |       newPost: "UI",
225 |       time: "2018-10-22",
226 |       test: "测试"
227 |     },
228 |     {
229 |       key: "0",
230 |       name: "张三",
231 |       oldDepartment: "研发部",
232 |       oldPost: "",
233 |       newDepartment: "1",
234 |       newPost: "UI",
235 |       time: "2018-10-22",
236 |       test: "测试"
237 |     },
238 |     {
239 |       key: "0",
240 |       name: "张三",
241 |       oldDepartment: "研发部",
242 |       oldPost: "",
243 |       newDepartment: "1",
244 |       newPost: "UI",
245 |       time: "2018-10-22",
246 |       test: "测试"
247 |     },
248 |     {
249 |       key: "0",
250 |       name: "张三",
251 |       oldDepartment: "研发部",
252 |       oldPost: "",
253 |       newDepartment: "1",
254 |       newPost: "UI",
255 |       time: "2018-10-22",
256 |       test: "测试"
257 |     },
258 |     {
259 |       key: "0",
260 |       name: "张三",
261 |       oldDepartment: "研发部",
262 |       oldPost: "",
263 |       newDepartment: "1",
264 |       newPost: "UI",
265 |       time: "2018-10-22",
266 |       test: "测试"
267 |     }
268 |   ]
269 | };
270 | 


--------------------------------------------------------------------------------
/view/EditTableTest.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="edit-table-test">
  3 |     <h3>可编辑表格</h3>
  4 |     <can-edit-table
  5 |       ref="empTable1"
  6 |       :headers="empEditData.headers"
  7 |       :data.sync="empEditData.data"
  8 |       @change="change"
  9 |       :isAdd="true"
 10 |       :generalDates="generalDates"
 11 |       :fixCols="empEditData.fixCols"
 12 |       :tableHeaderHeight="empEditData.tableHeaderHeight"
 13 |       :tableTdHeight="empEditData.tableTdHeight"
 14 |       :editTable="empEditData.editTable"
 15 |       @data-change="dataChange"
 16 |       @editDragEnd="editDragEnd"
 17 |       style="height: 400px; width: 100%"
 18 |     >
 19 |       <template slot="zzry" slot-scope="field" class="fl-td">
 20 |         <div class="zzry-detail">
 21 |           <div class="zzry-p">
 22 |             <p class="zzry-first-p">
 23 |               {{ `${field.field.rowData.zzry.name || 
 24 |               ''} (${field.field.rowData.zzry.num || 
 25 |               ''}) ${field.field.rowData.zzry.sex || 
 26 |               ''}` }}
 27 |             </p>
 28 |             <p>
 29 |               {{
 30 |                 `${field.field.rowData.zzry.bus || 
 31 |               ''}_${field.field.rowData.zzry.emp || 
 32 |               ''}_${field.field.rowData.zzry.pos}_${
 33 |                   field.field.rowData.zzry.auth || 
 34 |               ''
 35 |                 }`
 36 |               }}
 37 |             </p>
 38 |           </div>
 39 |         </div>
 40 |       </template>
 41 |       <template slot="sfz" slot-scope="field" class="fl-td">
 42 |         <el-input
 43 |           v-model="field.field.rowData.sfz"
 44 |           @change="
 45 |             sfzChange(field.field.field.name, field.field.rowData.sfz, field.field.colIndex, field.field.rowIndex)
 46 |           "
 47 |         ></el-input>
 48 |       </template>
 49 |     </can-edit-table>
 50 |     <br />
 51 |     <el-row>
 52 |       <el-button type="primary" @click="getValue(empEditData.data)">获取表格数据</el-button>
 53 |       <el-button type="success" @click="submit('empTable1')">提交表单</el-button>
 54 |       <el-button type="info" @click="clearTable('empTable1')">清空可编辑表格的值</el-button>
 55 |       <el-button type="info" @click="resetTable('empTable1')">重置编辑表格的值</el-button>
 56 |     </el-row>
 57 |     <br />
 58 |     <h3>可编辑表格</h3>
 59 |     <can-edit-table
 60 |       ref="editTable1"
 61 |       :headers="data1"
 62 |       :data.sync="data2"
 63 |       @change="change"
 64 |       :isAdd="false"
 65 |       :fixCols="editTableJson.fixCols"
 66 |       :tableHeaderHeight="editTableJson.tableHeaderHeight"
 67 |       :tableTdHeight="editTableJson.tableTdHeight"
 68 |       :editTable="editTableJson.editTable"
 69 |       style="height: 300px;"
 70 |     >
 71 |       <template slot="fixedCol" slot-scope="field" class="fl-td">
 72 |         <div>
 73 |           <span>自定义插槽</span>
 74 |           <div>{{ field.field.rowData[field.field.field.name] }}</div>
 75 |           <div>可自定义td</div>
 76 |         </div>
 77 |       </template>
 78 |       <template slot="selectPerson" slot-scope="field" class="fl-td">
 79 |         <div>
 80 |           {{ field.field.rowData[field.field.field.name] }}
 81 |         </div>
 82 |       </template>
 83 |     </can-edit-table>
 84 |     <br />
 85 |     <el-row>
 86 |       <el-button type="primary" @click="getValue(editTableJson.data)">获取表格数据</el-button>
 87 |       <el-button type="success" @click="submit('editTable1')">提交表单</el-button>
 88 |       <el-button type="info" @click="clearTable('editTable1')">清空可编辑表格的值</el-button>
 89 |       <el-button type="info" @click="resetTable('editTable1')">重置编辑表格的值</el-button>
 90 |     </el-row>
 91 |   </div>
 92 | </template>
 93 | 
 94 | <script>
 95 | import CanEditTable from "./../component/EditTable/CanEditTable.vue";
 96 | import editTableJson from "./EditTableJson.js";
 97 | import empEditData from "./empEditData.js";
 98 | export default {
 99 |   name: "EditTableTest",
100 |   components: { CanEditTable },
101 |   data() {
102 |     return {
103 |       editTableJson: editTableJson,
104 |       data1: [],
105 |       data2: [],
106 |       empEditData: empEditData,
107 |       generalDates: ['2020-04-01', '2020-03-01']
108 |     };
109 |   },
110 |   mounted() {
111 |     setTimeout(() => {
112 |       this.data1 = this.editTableJson.headers;
113 |       this.data2 = this.editTableJson.data;
114 |     }, 1000);
115 |   },
116 |   methods: {
117 |     editDragEnd(currentColIndex, selectArr, name, value) {
118 |       console.log(currentColIndex);
119 |       console.log(selectArr);
120 |       console.log(name);
121 |       console.log(value);
122 |     },
123 |     personClick(e, rowIndex, colIndex) {
124 |       this.$refs.editTable1.dotClick(e, rowIndex, colIndex);
125 |     },
126 |     //身份证发生变化的时候
127 |     sfzChange(field, val, colIndex, rowIndex) {
128 |       // console.log(val);
129 |       this.$refs.empTable1.tableValidate(field, val, colIndex, rowIndex, 0);
130 |     },
131 |     dataChange(val, editRow, editCol, rowData, field, ruls) {
132 |       // 当每个值发生变化时候的回调函数
133 |       console.log(val);
134 |       console.log(editRow);
135 |       console.log(editCol);
136 |       console.log(rowData);
137 |       console.log(field);
138 |       console.log(ruls);
139 |     },
140 |     change(val) {
141 |       console.log(val);
142 |     },
143 |     inputNumberBlur(editRowData, editKey, editVal) {
144 |       console.log(editRowData);
145 |       console.log(editKey);
146 |       console.log(editVal);
147 |     },
148 |     inputBlur(editRowData, editKey, editVal, rowIndex) {
149 |       console.log(editRowData);
150 |       console.log(editKey);
151 |       console.log(editVal);
152 |       console.log(rowIndex);
153 |     },
154 |     getValue(val) {
155 |       console.log(val);
156 |     },
157 |     submit(ref) {
158 |       console.log(this.$refs[ref].submitForm());
159 |     },
160 |     clearTable(ref) {
161 |       this.$refs[ref].clearAll();
162 |     },
163 |     resetTable(ref) {
164 |       this.$refs[ref].resetAll();
165 |     }
166 |   }
167 | };
168 | </script>
169 | 
170 | <style lang="scss">
171 | .edit-table-test {
172 |   width: 100%;
173 |   padding: 20px 40px;
174 |   h5 {
175 |     margin-bottom: 20px;
176 |   }
177 | }
178 | .zzry-detail {
179 |   height: 60px !important;
180 |   position: relative;
181 |   .zzry-p {
182 |     width: 100%;
183 |     padding: 10px;
184 |     p {
185 |       font-size: 14px;
186 |       color: #303133;
187 |       line-height: 1;
188 |     }
189 |     .zzry-first-p {
190 |       margin-bottom: 8px;
191 |     }
192 |   }
193 | }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ##   启动
  2 | 1、使用此组件
  3 | `npm install can-edit-table` 
  4 | 2、启动项目 
  5 | `npm install` 
  6 | `vue serve`  
  7 | ##   项目概览 
  8 | ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/editGif.gif)  
  9 | 基于vue和element的可拖拽赋值的可编辑表格，支持表格实时校验，联动校验。 
 10 | ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/canEditGrid%402x.png)  
 11 | 支持input、datepicker、select、selctTree等等。可以自定义td的内容，支持slot插槽。 
 12 | 
 13 | ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/canEdit2.png) 
 14 | 
 15 | ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/canedit3.png) 
 16 | 支持拖拽赋值，类似于excel的拖拽赋值功能 
 17 | 
 18 | ![图片名称](https://github.com/zhjing1019/CanEditGrid/blob/master/img/canEdit4.png) 
 19 | 支持表格的实时校验 
 20 | ##   组件的使用 
 21 | ##### 组件下载 
 22 | `npm install can-edit-table` 
 23 | ##### 引用组件 
 24 | `import CanEditTable from "can-edit-table"` 
 25 | ##### 注册组件 
 26 | `components: {editTable},` 
 27 | ##### 组件demo 
 28 | https://github.com/zhjing1019/canEditDemo.git 
 29 | ##### 组件源码 
 30 | https://github.com/zhjing1019/CanEditGrid 
 31 | 
 32 | ### 1、组件 
 33 | ```
 34 | <can-edit-table
 35 |       ref="empTable1"
 36 |       :headers="empEditData.headers"
 37 |       :data.sync="empEditData.data"
 38 |       @change="change"
 39 |       :isAdd="true"
 40 |       :fixCols="empEditData.fixCols"
 41 |       :tableHeaderHeight="empEditData.tableHeaderHeight"
 42 |       :tableTdHeight="empEditData.tableTdHeight"
 43 |       :editTable="empEditData.editTable"
 44 |       @data-change="dataChange"
 45 |       @editDragEnd="editDragEnd"
 46 |       style="height: 400px; width: 100%"
 47 |     >
 48 | </can-edit-table>
 49 | ``` 
 50 | ### 2、表头的数据 
 51 | ```
 52 | [
 53 |     {
 54 |       name: "zzry",
 55 |       title: "测试1",
 56 |       width: 350,
 57 |       slot: true
 58 |     },
 59 |     {
 60 |       name: "zzsj",
 61 |       width: 200,
 62 |       title: "测试时间",
 63 |       editType: "date"
 64 |     },
 65 |     {
 66 |       name: "sfz",
 67 |       width: 200,
 68 |       title: "身份证(slot内容、自定义校验规则)",
 69 |       slot: true
 70 |     },
 71 |     {
 72 |       name: "zzlb",
 73 |       width: 200,
 74 |       title: "测试类别",
 75 |       editType: "select",
 76 |       label: "code",
 77 |       value: "id",
 78 |       list: [
 79 |         {
 80 |           code: "测试code1",
 81 |           id: "1"
 82 |         },
 83 |         {
 84 |           code: "测试code2",
 85 |           id: "2"
 86 |         },
 87 |         {
 88 |           code: "测试code3",
 89 |           id: "3"
 90 |         },
 91 |         {
 92 |           code: "测试code4",
 93 |           id: "4"
 94 |         }
 95 |       ]
 96 |     },
 97 |     {
 98 |       name: "khqk",
 99 |       width: 200,
100 |       title: "测试（只展示数据）",
101 |       editType: "none"
102 |     },
103 |     {
104 |       name: "zzsm",
105 |       title: "测试三",
106 |       width: 200,
107 |       editType: "input"
108 |     }
109 |   ]
110 | ``` 
111 | ### 4、data数据 
112 | ```
113 | data: [
114 |     {
115 |       zzry: {
116 |         name: "测试",
117 |         sex: "男",
118 |         bus: "测试部门",
119 |         pos: "测试",
120 |         emp: "测试",
121 |         auth: "测试",
122 |         num: "测试"
123 |       },
124 |       zzsj: "",
125 |       zzlb: "",
126 |       khqk: "测试",
127 |       zzsm: "测试",
128 |       sfz: ""
129 |     },
130 |     {
131 |       zzry: {
132 |         name: "测试",
133 |         sex: "测试",
134 |         bus: "测试",
135 |         pos: "测试",
136 |         emp: "测试",
137 |         auth: "测试",
138 |         num: "测试"
139 |       },
140 |       zzsj: "",
141 |       zzlb: "",
142 |       khqk: "测试",
143 |       zzsm: "测试",
144 |       sfz: ""
145 |     }
146 |   ]
147 | ``` 
148 | ### 5、校验规则 
149 | ```
150 | editTable: {
151 |     rules: {
152 |       input: [
153 |         { required: true, message: "请输入活动名称ceshi", trigger: "change" },
154 |         { min: 1, max: 3, message: "长度在 1 到 3 个字符", trigger: "change" }
155 |       ],
156 |       newPost: [
157 |         { required: true, message: "请输入活动名称", trigger: "change" },
158 |         { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "change" }
159 |       ],
160 |       time: {
161 |         type: "date",
162 |         required: true,
163 |         message: "请选择日期",
164 |         trigger: "change"
165 |       },
166 |       newDepartment: [{ required: true, message: "请选择部门", trigger: "change" }],
167 |       treeSelect: [{ required: true, message: "请选择部门", trigger: "change" }],
168 |       timeRange: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
169 |       dateMonth: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
170 |       dateYear: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
171 |       dateMonthRange: [{ type: "date", required: true, message: "请选择时间", trigger: "change" }],
172 |       inputNumber: [{ type: "number", required: true, message: "请输入数字输入框", trigger: "change" }],
173 |       inputNumber1: [{ type: "number", required: true, message: "请输入数字输入框", trigger: "change" }],
174 |       selectPerson1: [{ type: "string", required: true, message: "请选择人", trigger: "change" }],
175 |       select: [{ type: "string", required: true, message: "请选择code", trigger: "change" }]
176 |     }
177 |   }
178 | ``` 
179 | ### 6、表头配置 
180 | 1、width, 表示此列的宽度 
181 | 2、name，表示此列的id 
182 | 3、title, 表示此列的字段名 
183 | 4、slot, 表示此列是否自定义 
184 | 5、editType, 表示此列的编辑类型（  
185 |     1、editType = "treeSelect" 选择机构树 
186 | ```
187 |     {
188 |       name: "treeSelect",
189 |       title: "选择树机构",
190 |       width: 200,
191 |       // slot: true,
192 |       editType: "treeSelect",
193 |       disabled: false,
194 |       treeParams: {
195 |         clickParent: true,
196 |         filterable: false,
197 |         "check-strictly": true,
198 |         "default-expand-all": false,
199 |         "expand-on-click-node": false,
200 |         data: [
201 |           {
202 |             id: "1",
203 |             name: "哎哎哎",
204 |             children: [{ id: "3", name: "啊啊啊啊" }]
205 |           },
206 |           {
207 |             id: "2",
208 |             name: "发生的"
209 |           }
210 |         ],
211 |         props: {
212 |           children: "children",
213 |           label: "name",
214 |           value: "id"
215 |         }
216 |       },
217 |       selectParams: {
218 |         multiple: false,
219 |         clearable: true,
220 |         placeholder: "请输入内容"
221 |       },
222 |       list: []
223 |     },
224 | ``` 
225 |     2、editType: "input", input输入框 
226 |     3、editType: "select", select选择框 
227 | ```
228 | {
229 |       name: "select",
230 |       title: "select选择框",
231 |       width: 100,
232 |       multiple: true,
233 |       editType: "select",
234 |       label: "code",
235 |       value: "id",
236 |       list: [
237 |         {
238 |           code: "测试code1",
239 |           id: "1"
240 |         },
241 |         {
242 |           code: "测试code2",
243 |           id: "2"
244 |         },
245 |         {
246 |           code: "测试code3",
247 |           id: "3"
248 |         },
249 |         {
250 |           code: "测试code4",
251 |           id: "4"
252 |         }
253 |       ]
254 |     },
255 | ``` 
256 |     4、editType: "date",年月日时间选择框 
257 |     5、editType: "dateRange",年月日时间范围 
258 |     6、editType: "none",显示文本值 
259 | ）
260 | ### 7、自定义表格 
261 | ```
262 | <template slot="zzry" slot-scope="field" class="fl-td">
263 |         <div class="zzry-detail">
264 |           <div class="zzry-p">
265 |             <p class="zzry-first-p">
266 |               {{ `${field.field.rowData.zzry.name || 
267 |               ''} (${field.field.rowData.zzry.num || 
268 |               ''}) ${field.field.rowData.zzry.sex || 
269 |               ''}` }}
270 |             </p>
271 |             <p>
272 |               {{
273 |                 `${field.field.rowData.zzry.bus || 
274 |               ''}_${field.field.rowData.zzry.emp || 
275 |               ''}_${field.field.rowData.zzry.pos}_${
276 |                   field.field.rowData.zzry.auth || 
277 |               ''
278 |                 }`
279 |               }}
280 |             </p>
281 |           </div>
282 |         </div>
283 | </template>
284 | <template slot="fixedCol" slot-scope="field" class="fl-td">
285 |         <div>
286 |           <span>自定义插槽</span>
287 |           <div>{{ field.field.rowData[field.field.field.name] }}</div>
288 |           <div>可自定义td</div>
289 |         </div>
290 | </template>
291 | <template slot="selectPerson" slot-scope="field" class="fl-td">
292 |         <div>
293 |           {{ field.field.rowData[field.field.field.name] }}
294 |         </div>
295 | </template>
296 | 
297 | ``` 
298 | 1、slot与表头的name字段对应 
299 | 2、slot-scope="field" 
300 |     field.field.rowData 从底层传出的rowData，当前行的数据 
301 |     field.field.field 从底层传出的field，当前行的数据的表头字段 
302 |     field.field.colIndex 从底层传出的colIndex，当前行的数据的列数 
303 |     field.field.rowIndex 从底层传出的rowIndex，当前行的数据的行数 
304 | ### 8、表格触发的事件 
305 | change：数据发生改变时触发 
306 | data-change：可编辑表格中td发生变化时触发的事件（slot的td除外）
307 | editDragEnd：拖拽赋值结束后触发的事件（currentColIndex, selectArr, name, value，返回四个数据，）
308 | 
309 | this.$refs[ref].submitForm()：提交表单 
310 | 
311 | this.$refs[ref].clearAll()：清空表格 
312 | 
313 | this.$refs[ref].resetAll()：重置表格 
314 | 
315 | 如果有任何问题可以关注我的个人技术公众号javascript艺术，或者添加我微信反馈
316 | ![image](https://user-images.githubusercontent.com/29360917/115189574-3cb9dc80-a119-11eb-8e88-d98aed4a3476.png)
317 | ![image](https://user-images.githubusercontent.com/29360917/115189133-9372e680-a118-11eb-9570-eae1b8662869.png)
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 


--------------------------------------------------------------------------------
/component/EditTable/DragSpan.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="edit-drag-border edit-top-border" :style="topBorder">
  4 |       <span class="drag-dot" :style="dragDot"> </span>
  5 |       <span class="tra-span-dot" @mousedown="dragMove($event)" @mouseup="dragOver($event)" :style="traSpanDat"> </span>
  6 |     </div>
  7 |     <div class="edit-drag-border edit-right-border" :style="rightBorder"></div>
  8 |     <div class="edit-drag-border edit-bottom-border" :style="bottomBorder"></div>
  9 |     <div class="edit-drag-border edit-left-border" :style="leftBorder"></div>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | export default {
 15 |   name: "DragSpan",
 16 |   props: {
 17 |     drag: Object,
 18 |     dragSpanShow: Boolean
 19 |   },
 20 |   data() {
 21 |     return {
 22 |       //是否正在拖拽
 23 |       isDrag: false,
 24 |       //是否向上
 25 |       isUp: false,
 26 |       //向上拉取高度
 27 |       upDragHeight: 0,
 28 |       //拖拽过程中向左右偏移的量
 29 |       leftDragHeight: 0
 30 |     };
 31 |   },
 32 |   inject: ["edit"],
 33 |   computed: {
 34 |     selectHeight() {
 35 |       let height = 0;
 36 |       this.edit.selectArr.forEach(x => {
 37 |         height += this.edit.tdHeight[x];
 38 |       });
 39 |       return height;
 40 |     },
 41 |     topBorder() {
 42 |       let style = {
 43 |         height: 0,
 44 |         borderTop: "2px solid rgba(71, 134, 255, 1)",
 45 |         left: this.drag.clientX - this.parentScrollX + "px",
 46 |         top: this.dragTop + "px",
 47 |         width: this.drag.width + "px"
 48 |       };
 49 |       return style;
 50 |     },
 51 |     rightBorder() {
 52 |       let style = {
 53 |         height: this.edit.currentRowIndex != -1 ? this.selectHeight + "px" : 0 + "px",
 54 |         borderRight: "2px solid rgba(71, 134, 255, 1)",
 55 |         left: this.drag.clientX - this.parentScrollX + this.drag.width + "px",
 56 |         top: this.dragTop + "px",
 57 |         width: 0
 58 |       };
 59 |       return style;
 60 |     },
 61 |     bottomBorder() {
 62 |       let style = {
 63 |         height: 0,
 64 |         borderTop: "2px solid rgba(71, 134, 255, 1)",
 65 |         left: this.drag.clientX - this.parentScrollX + "px",
 66 |         top: this.dragTop + this.selectHeight + "px",
 67 |         width: this.drag.width + "px"
 68 |       };
 69 |       return style;
 70 |     },
 71 |     leftBorder() {
 72 |       let style = {
 73 |         height: this.edit.currentRowIndex != -1 ? this.selectHeight + "px" : 0 + "px",
 74 |         borderLeft: "2px solid rgba(71, 134, 255, 1)",
 75 |         left: this.drag.clientX - this.parentScrollX - 1 + "px",
 76 |         top: this.dragTop + "px",
 77 |         width: 0
 78 |       };
 79 |       return style;
 80 |     },
 81 |     dragDot() {
 82 |       let style = {
 83 |         left: this.drag.width - 4 + "px",
 84 |         top: this.edit.currentRowIndex != -1 ? this.selectHeight - 6 + "px" : 0 + "px"
 85 |       };
 86 |       return style;
 87 |     },
 88 |     traSpanDat() {
 89 |       let style = {
 90 |         left: this.drag.width + this.leftDragHeight - 7 + "px",
 91 |         top: this.drag.cirTop + this.upDragHeight - 5 + "px"
 92 |       };
 93 |       return style;
 94 |     },
 95 | 
 96 |     dragTop() {
 97 |       var self = this;
 98 |       if (this.isUp) {
 99 |         if (this.edit.dragSelect == 1) {
100 |           self.edit.drag.clientY = this.edit.initY;
101 |         } else {
102 |           self.edit.drag.clientY = this.edit.initY - (this.selectHeight - this.edit.tdHeight[this.selectArr[0]]);
103 |         }
104 |       } else {
105 |         self.edit.drag.clientY = this.edit.initY;
106 |       }
107 |       return this.edit.drag.clientY - this.edit.scrollY - this.upDragHeight;
108 |       // return 0;
109 |     },
110 |     parentScrollX() {
111 |       return this.edit.scrollX;
112 |     }
113 |   },
114 |   methods: {
115 |     dragClick() {
116 |       if (this.isDrag) {
117 |         this.isDrag = false;
118 |         this.edit.dragSpanShow = false;
119 |         // this.edit.isEdit = false;
120 |         this.edit.editClickCount = 0;
121 |       } else {
122 |         this.isDrag = false;
123 |         this.edit.dragSpanShow = false;
124 |         // this.edit.isEdit = true;
125 |         this.edit.editClickCount = 0;
126 |       }
127 |       this.edit.isEdit = true;
128 |     },
129 | 
130 |     /*
131 |      * dragMove拖拽开始
132 |      * */
133 |     dragMove(el) {
134 |       var self = this;
135 |       this.upDragHeight = 0;
136 |       this.leftDragHeight = 0;
137 |       self.isDrag = true;
138 |       //获取目标元素
139 |       let odiv = el.target;
140 |       //获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变。
141 |       let disX = el.clientX;
142 |       let disY = el.clientY;
143 |       // let oldScrollY = self.edit.scrollY;
144 |       if (typeof el.target.setCapture != "undefined") {
145 |         el.target.setCapture();
146 |       }
147 |       document.onmousemove = e => {
148 |         //鼠标按下并移动的事件
149 |         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
150 |         //鼠标位置减去小圆点的相对位置，得到相对的leftwidth 和相对的topWidth
151 |         let left = e.clientX - disX;
152 |         let top = e.clientY - disY;
153 |         //控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条
154 |         if (e.clientX > window.innerWidth - odiv.offsetWidth) {
155 |           left = window.innerWidth - disX;
156 |         }
157 |         if (e.clientY > window.innerHeight - odiv.offsetHeight) {
158 |           top = window.innerHeight - disY;
159 |         }
160 |         //计算选中了多少行
161 |         if (top > 0) {
162 |           self.isUp = false;
163 |           this.selectCount(top);
164 |           self.upDragHeight = 0;
165 |           if (this.edit.selectArr[this.edit.selectArr.length - 1] == this.edit.data.length - 1) {
166 |             top = this.selectHeight;
167 |             return;
168 |           } else {
169 |             if (self.edit.allTableHeight < e.clientY + 40) {
170 |               self.edit.scrollY = e.clientY + 53 - self.edit.allTableHeight;
171 |             }
172 |           }
173 |         } else {
174 |           //向上拉取选中
175 |           self.isUp = true;
176 |           this.upSelectCount(top);
177 |           let upDragHeight = 0;
178 |           this.edit.selectArr.forEach((x, index) => {
179 |             index == 0 ? (upDragHeight = 0) : (upDragHeight += self.edit.tdHeight[x]);
180 |           });
181 |           self.upDragHeight = upDragHeight;
182 |           if (this.edit.selectArr[this.edit.selectArr.length - 1] <= 0) {
183 |             return;
184 |           } else {
185 |             if (e.clientY - this.edit.tableClientY - 43 < 0 && this.edit.scrollY > 0) {
186 |               this.edit.scrollY += e.clientY - this.edit.tableClientY - 43;
187 |             }
188 |           }
189 |         }
190 | 
191 |         //绑定元素位置到positionX和positionY上面
192 |         self.edit.drag.cirLeft = left;
193 |         // self.edit.drag.cirTop = top + this.edit.tableTdHeight;
194 |         self.edit.drag.cirTop = top + this.edit.drag.height;
195 |         this.leftDragHeight = left;
196 | 
197 |         //拖拽结束，脱离
198 |         document.onmouseup = () => {
199 |           self.dragOver(el);
200 |         };
201 |       };
202 |     },
203 |     /*
204 |      * 向上拉取选中了几条数据
205 |      * */
206 |     upSelectCount(top) {
207 |       this.edit.select = [this.edit.currentRowIndex];
208 |       let newArr = [this.edit.currentRowIndex];
209 |       let comHeight = this.edit.tdHeight[this.edit.currentRowIndex];
210 |       if (-top > comHeight) {
211 |         let select = this.computedUpHeight(newArr, this.edit.currentRowIndex, -top);
212 |         this.edit.selectArr = select.arr;
213 |       }
214 |     },
215 |     /*
216 |      * 计算向上拉取的高度和选中的行数
217 |      * */
218 |     computedUpHeight(newArr, rowIndex, top) {
219 |       let newHeight = this.edit.tdHeight[rowIndex];
220 |       newArr.forEach((x, index) => {
221 |         if (newArr.length - 1 == index) {
222 |           newHeight += this.edit.tdHeight[x] / 2;
223 |         } else {
224 |           newHeight += this.edit.tdHeight[x];
225 |         }
226 |       });
227 |       if (top > newHeight) {
228 |         if (rowIndex - 1 < 0) {
229 |           return {
230 |             arr: newArr,
231 |             height: newHeight
232 |           };
233 |         } else {
234 |           newArr = [...newArr, rowIndex - 1];
235 |           return this.computedUpHeight(newArr, rowIndex - 1, top);
236 |         }
237 |       } else {
238 |         return {
239 |           arr: newArr,
240 |           height: newHeight
241 |         };
242 |       }
243 |     },
244 |     /*
245 |      * 判断选中了几条数据
246 |      * */
247 |     selectCount(top) {
248 |       this.edit.selectArr = [this.edit.currentRowIndex];
249 |       let newArr = [this.edit.currentRowIndex];
250 |       let comHeight = this.edit.tdHeight[this.edit.currentRowIndex];
251 |       if (top > comHeight) {
252 |         let select = this.computedHeight(newArr, this.edit.currentRowIndex, top);
253 |         this.edit.selectArr = select.arr;
254 |       } else {
255 |         return;
256 |       }
257 |       // let dragSelect = Math.round(top / self.edit.tableTdHeight);
258 |       // if(dragSelect)
259 |     },
260 |     /*
261 |      * 计算向下拉取的高度和选中的行数
262 |      * */
263 |     computedHeight(newArr, rowIndex, top) {
264 |       let newHeight = 0;
265 |       newArr.forEach((x, index) => {
266 |         if (newArr.length - 1 == index) {
267 |           newHeight += this.edit.tdHeight[x] / 2;
268 |         } else {
269 |           newHeight += this.edit.tdHeight[x];
270 |         }
271 |       });
272 |       if (top > newHeight) {
273 |         if (rowIndex + 2 > this.edit.data.length) {
274 |           return {
275 |             arr: newArr,
276 |             height: newHeight
277 |           };
278 |         } else {
279 |           newArr = [...newArr, rowIndex + 1];
280 |           return this.computedHeight(newArr, rowIndex + 1, top);
281 |         }
282 |       } else {
283 |         return {
284 |           arr: newArr,
285 |           height: newHeight
286 |         };
287 |       }
288 |     },
289 |     /*
290 |      * dragOver拖拽结束
291 |      * */
292 |     dragOver(e) {
293 |       var self = this;
294 |       self.leftDragHeight = 0;
295 |       // this.edit.isEdit = false;
296 |       self.edit.drag.cirLeft = this.edit.drag.width - 4;
297 |       self.edit.drag.cirTop = this.edit.drag.height - 4;
298 |       let name = self.edit.headers[self.edit.currentColIndex].name;
299 |       let value = self.edit.data[self.edit.currentRowIndex][name];
300 |       self.edit.selectArr.forEach(x => {
301 |         self.$set(self.edit.data[x], name, value);
302 |       });
303 |       this.$emit("editDragEnd", this.edit.currentColIndex, self.edit.selectArr, name, value);
304 |       self.isUp = false;
305 |       self.upDragHeight = 0;
306 |       this.edit.currentColIndex = -1;
307 |       this.edit.currentRowIndex = -1;
308 |       this.edit.selectArr = [];
309 |       document.onmousemove = null;
310 |       document.onmouseup = null;
311 |       //修复低版本ie bug
312 |       if (typeof e.target.releaseCapture != "undefined") {
313 |         e.target.releaseCapture();
314 |       }
315 |     }
316 |   }
317 | };
318 | </script>
319 | 
320 | <style lang="scss">
321 | .dragSpan {
322 |   position: absolute;
323 |   z-index: 101;
324 | }
325 | .edit-drag-border {
326 |   position: absolute;
327 |   z-index: 100;
328 | }
329 | .drag-div {
330 |   // border: 2px solid rgba(71, 134, 255, 1);
331 |   z-index: 1;
332 |   background-color: transparent;
333 |   box-sizing: border-box;
334 | }
335 | .drag-dot {
336 |   width: 6px;
337 |   height: 6px;
338 |   background: rgba(71, 134, 255, 1);
339 |   position: absolute;
340 |   z-index: 101;
341 |   // bottom: -2px;
342 |   // right: -2px;
343 | }
344 | .tra-span-dot {
345 |   width: 14px;
346 |   height: 14px;
347 |   // background: pink;
348 |   position: absolute;
349 |   z-index: 1000;
350 | }
351 | .tra-span-dot:hover {
352 |   /*cursor: crosshair;*/
353 |   cursor: move;
354 | }
355 | </style>
356 | 


--------------------------------------------------------------------------------
/component/EditTable/EditSub.vue:
--------------------------------------------------------------------------------
  1 | <script type="text/jsx">
  2 | import TableInput from "./TableInput.vue";
  3 | import InputNumber from "./InputNumber.vue";
  4 | import TableSelect from "./TableSelect.vue";
  5 | import DatePicker from "./DatePicker.vue";
  6 | import DatePickerMonth from "./DatePickerMonth.vue";
  7 | import DatePickerYear from "./DatePickerYear.vue";
  8 | import DatePickerRange from "./DatePickerRange.vue";
  9 | import DatePickerMonthRange from "./DatePickerMonthRange.vue";
 10 | import TableTreeSelect from "./TableTreeSelect.vue";
 11 | import SvgIcon from "../SvgIcon.vue";
 12 | 
 13 | export default {
 14 |   data() {
 15 |     return {};
 16 |   },
 17 |   inject: ["edit"],
 18 |   components: {
 19 |     TableInput,
 20 |     TableSelect,
 21 |     DatePicker,
 22 |     SvgIcon,
 23 |     TableTreeSelect,
 24 |     DatePickerRange,
 25 |     DatePickerMonth,
 26 |     DatePickerMonthRange,
 27 |     DatePickerYear,
 28 |     InputNumber,
 29 |   },
 30 |   props: {
 31 |     allRow: {
 32 |       type: Boolean,
 33 |       default: false
 34 |     },
 35 |     onlyFix: {
 36 |       type: Boolean,
 37 |       default: false
 38 |     },
 39 |     hoverRow: {
 40 |       type: Number
 41 |     }
 42 |   },
 43 |   render(h) {
 44 | 
 45 |     let items = [];
 46 |     items.push(this.createHead(h));
 47 |     if (this.allRow) items.push(this.createBody(h));
 48 | 
 49 |     return (<table class="editTable__block">{items}</table>)
 50 |   },
 51 |   mounted() {
 52 |     this.tdHeightGet();
 53 |   },
 54 |   methods: {
 55 |     tdHeightGet() {
 56 |         this.$nextTick(() => {
 57 |           if (
 58 |             this.$refs.allDataTbody &&
 59 |             this.$refs.allDataTbody.childNodes &&
 60 |             this.$refs.allDataTbody.childNodes.length > 0
 61 |           ) {
 62 |               this.$refs.allDataTbody.childNodes.forEach((x, index) => {
 63 |                 if(this.allRow) this.$set(this.edit.tdHeight, index, x.offsetHeight);
 64 | 
 65 |                 x.childNodes[0].style.height = this.edit.tdHeight[index] ? this.edit.tdHeight[index] + "px" : "";
 66 |               });
 67 |           }
 68 |         });
 69 |       },
 70 |     //创建头部tr
 71 |     createHead(h) {
 72 |       let cells = [];
 73 |       cells.push(
 74 |         h(
 75 |           "th",
 76 |           {
 77 |             style: { width: this.edit.serialWidth + "px", color: "#606266" }
 78 |           },
 79 |           ["序号"]
 80 |         )
 81 |       );
 82 |       let count = this.onlyFix && this.edit.fixCols > 0 ? this.edit.fixCols : this.edit.headers.length;
 83 |       for (let i = 0; i < count; i++) cells.push(this.createHeadCell(h, this.edit.headers[i]));
 84 |       let tr = (<tr>{cells}</tr>)
 85 |       return (<thead>{tr}</thead>)
 86 |     },
 87 |     // 判断头部是否是必填
 88 |     isRequire(fields) {
 89 |       let isRequire = false;
 90 |       if (this.edit.editTable.rules && this.edit.editTable.rules[fields.name]) {
 91 |         let rule = this.edit.editTable.rules[fields.name];
 92 |         if (rule instanceof Array) {
 93 |           rule.forEach(x => {
 94 |             if (x.required && (x.required == "true" || x.required == true)) {
 95 |               isRequire = true;
 96 |             }
 97 |           });
 98 |         } else if (rule instanceof Object) {
 99 |           if (rule.required && (rule.required == "true" || rule.required == true)) {
100 |             isRequire = true;
101 |           }
102 |         } else {
103 |           isRequire = false;
104 |         }
105 |       }
106 |       return isRequire;
107 |     },
108 |     //创建头部th
109 |     createHeadCell(h, fields) {
110 |       let isRequire = this.isRequire(fields);
111 |       let span = "";
112 |       if (isRequire) {
113 |         span=(<span style={{color: 'red', fontSize: '14px', marginRight: '5px'}}>*</span>)
114 |       }
115 |       return h(
116 |         "th",
117 |         {
118 |           style: {
119 |             width: fields.width + "px",
120 |             height: this.edit.tableHeaderHeight + "px",
121 |             textAlign: "left"
122 |           }
123 |         },
124 |         [span, fields.title]
125 |       );
126 |     },
127 |     //创建表格主体
128 |     createBody(h) {
129 |       let rows = this.edit.data.map((r, index) => this.createRow(h, r, index));
130 |       return(<tbody ref="allDataTbody">{rows}</tbody>);
131 |     },
132 |     //创建序号
133 |     createSerial(h, rowData, index) {
134 |       let serial = index + 1 < 10 ? "0" + (index + 1) : index + 1;
135 |       let detailSpan = "";
136 |       detailSpan = h("span", {}, [serial]);
137 |       return detailSpan;
138 |     },
139 |     //创建表格行 (index 为 rowIndex)
140 |     createRow(h, rowData, index) {
141 |       let cells = [];
142 |       let detailSpan = this.createSerial(h, rowData, index);
143 |       cells.push(
144 |         h(
145 |           "td",
146 |           {
147 |             style: {
148 |               width: this.edit.serialWidth + "px",
149 |               background: this.mouseEnterColor(index),
150 |               textAlign: "center"
151 |             }
152 |           },
153 |           [detailSpan]
154 |         )
155 |       );
156 |       let count = this.onlyFix ? this.edit.fixCols : this.edit.headers.length;
157 |       for (let i = 0; i < count; i++) {
158 |         // i为colIndex
159 |         let field = this.edit.headers[i];
160 |         cells.push(this.createBodyCell(h, rowData, field, index, i));
161 |       }
162 |       return h(
163 |         "tr",
164 |         {
165 |           on: {
166 |             mouseenter: () => {
167 |               this.trMouseenter(index);
168 |             },
169 |             mouseleave: () => {
170 |               this.editTableLeave;
171 |             }
172 |           }
173 |         },
174 |         cells
175 |       );
176 |     },
177 |     // 创建表格具体td
178 |     createBodyCell(h, rowData, field, rowIndex, colIndex) {
179 |       let divCell = this.createTdDiv(h, rowData, field, rowIndex, colIndex);
180 |       return (<td
181 |           style={{
182 |             width: field.width + "px",
183 |             overflow: "hidden",
184 |             height: this.edit.tdHeight[rowIndex] + "px" ,
185 |             minHeight: this.edit.tableTdHeight + 'px',
186 |             background: this.mouseEnterColor(rowIndex),
187 |             color: "#303133"
188 |           }}
189 |           edit-index-row={rowIndex}
190 |           edit-index-col={colIndex}
191 |           onClick={event => {
192 |             if(field.editType == 'none' || field.isDrag == false) {
193 |               return
194 |             } else {
195 |               this.dragDot(event, rowIndex, colIndex);
196 |             }
197 | 
198 |           }}
199 |           >{divCell}</td>)
200 |     },
201 |     // 创建主体表格td下的div
202 |     createTdDiv(h, rowData, field, rowIndex, colIndex) {
203 |       let self = this;
204 |       if (field.slot && Object.keys(this.$scopedSlots).length > 0) {
205 |         return h(
206 |           "div",
207 |           {
208 |             class: {'th-div': true},
209 |             // 作用域插槽格式
210 |             // { name: props => VNode | Array<VNode> }
211 |             scopedSlots: this.$scopedSlots[field.name],
212 |             // 如果组件是其他组件的子组件，需为插槽指定名称
213 |             slot: field.name,
214 |             style: {
215 |               minHight: this.edit.tableTdHeight-2 + 'px',
216 |               height: this.edit.tdHeight[rowIndex] -2 + "px" ,
217 |               width: '100%',
218 |               border: this.modelData(field.name, rowIndex)
219 |             },
220 |             on: {
221 |               mouseenter(e){
222 |                 let div = {
223 |                   top: e.target.offsetTop,
224 |                   left: e.target.offsetLeft,
225 |                   width: e.target.offsetWidth,
226 |                   rowIndex: rowIndex,
227 |                   colIndex: colIndex,
228 |                 };
229 |                 self.edit.hoverDiv = div;
230 |                 self.$emit('td-mouseenter', {rowData, field, rowIndex, colIndex});
231 |               },
232 |               mouseLeave() {
233 |                 let div = {
234 |                   top: 0,
235 |                   left: 0,
236 |                   width: 0,
237 |                   rowIndex: -1,
238 |                   colIndex: -1,
239 |                 };
240 |                 self.edit.hoverDiv = div;
241 |                 self.$emit('td-mouseleave', {rowData, field, rowIndex, colIndex});
242 |               }
243 |             }
244 |           },
245 |           this.$scopedSlots[field.name]({
246 |             field: field,
247 |             rowData: rowData,
248 |             rowIndex: rowIndex,
249 |             colIndex: colIndex,
250 |           })
251 |         );
252 |       } else {
253 |         let detail = this.createDetailItem(h, rowData, field, rowIndex, colIndex);
254 |         let divCell = (<div class="th-div"
255 |          onMouseenter={e => {
256 |            let div = {
257 |               top: e.target.offsetTop,
258 |               left: e.target.offsetLeft,
259 |               width: e.target.offsetWidth,
260 |               rowIndex: rowIndex,
261 |               colIndex: colIndex,
262 |             };
263 |             this.edit.hoverDiv = div;
264 |             this.$emit('td-mouseenter', {rowData, field, rowIndex, colIndex});
265 |          }}
266 |          onMouseleave={() => {
267 |            let div = {
268 |               top: 0,
269 |               left: 0,
270 |               width: 0,
271 |               rowIndex: -1,
272 |               colIndex: -1,
273 |             };
274 |             this.edit.hoverDiv = div;
275 |             this.$emit('td-mouseleave', {rowData, field, rowIndex, colIndex});
276 |          }}
277 |          style={{
278 |               minHight: this.edit.tableTdHeight-2 + 'px',
279 |               height: this.edit.tdHeight[rowIndex] -2 + "px",
280 |               lineHeight: this.edit.tdHeight[rowIndex] -2 + "px",
281 |               width: '100%',
282 |               border: this.modelData(field.name, rowIndex)
283 |         }}>{[detail]}</div>);
284 |         return divCell;
285 |       }
286 | 
287 |     },
288 | 
289 | 
290 |     //获取选择人的数据
291 |     getSelectPersonName(id) {
292 |       const emp = this.ajaxPersonName(id);
293 |       if (emp) {
294 |         emp.then(res => {
295 |           let name = res;
296 |           return name;
297 |         });
298 |       } else {
299 |         return "";
300 |       }
301 |     },
302 | 
303 |     //创建主体表格td下的div的具体条目
304 |     createDetailItem(h, rowData, field, rowIndex, colIndex) {
305 |       let detail = "";
306 |       if (
307 |         field.editType == "input"
308 |       ) {
309 |         detail = (<table-input
310 |           onInputBlur={(editRowData, editKey, editVal, rowIndex) => {this.$emit('inputBlur', editRowData, editKey, editVal, rowIndex)}}
311 |           valueDefault={rowData[field.name]}
312 |           rowData={rowData}
313 |           field={field}
314 |           propRuls={field.name}
315 |           editRow={rowIndex}
316 |           editCol={colIndex}
317 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
318 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
319 |           }}
320 |           style= {{width: '100%'}}
321 |         ></table-input>);
322 |       } else if (
323 |         field.editType == "inputNumber"
324 |       ) {
325 |         detail = (<input-number
326 |         valueDefault={Number(rowData[field.name] ? rowData[field.name] : 0)}
327 |         propRuls={field.name}
328 |         rowData={rowData}
329 |         field={field}
330 |         editRow={rowIndex}
331 |         editCol={colIndex}
332 |         style={{width:'100%'}}
333 |         onData-change={(val, editRow, editCol, rowData, field, ruls) => {
334 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
335 |           }}
336 |         onInputNumberBlur={(editRowData, editKey, editVal) => {this.$emit('inputNumberBlur', editRowData, editKey, editVal)}}
337 |         ></input-number>)
338 |       }else if (
339 |         field.editType == "treeSelect"
340 |       ) {
341 |         detail = (<table-tree-select
342 |           valueDefault={rowData[field.name]}
343 |           treeParams={field.treeParams}
344 |           disabled={field.disabled}
345 |           selectParams={field.selectParams}
346 |           propRuls={field.name}
347 |           rowData={rowData}
348 |           field={field}
349 |           editRow={rowIndex}
350 |           editCol={colIndex}
351 |           style={{width: "100%"}}
352 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
353 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
354 |           }}
355 |         ></table-tree-select>)
356 |       } else if (
357 |         field.editType == "select"
358 |       ) {
359 |         detail = (<table-select
360 |           valueDefault={rowData[field.name]}
361 |           selectOption={field.list}
362 |           propRuls={field.name}
363 |           editRow={rowIndex}
364 |           editCol={colIndex}
365 |           label={field.label ? field.label : ""}
366 |           value={field.value ? field.value : (field.multiple ? [] : "")}
367 |           rowData={rowData}
368 |           field={field}
369 |           style={{width: "100%"}}
370 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
371 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
372 |           }}
373 |         ></table-select>)
374 | 
375 |       } else if (
376 |         field.editType === "date"
377 |       ) {
378 |         detail = (<date-picker
379 |           selectOption = {field.list}
380 |           propRuls = {field.name}
381 |           editRow = {rowIndex}
382 |           editCol = {colIndex}
383 |           valueDefault = {rowData[field.name]}
384 |           generalDate = {field.pickerOptions && this.$parent.generalDates ? this.$parent.generalDates[rowIndex] : null}
385 |           rowData={rowData}
386 |           field={field}
387 |           style={{width: "100%"}}
388 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
389 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
390 |           }}
391 |         ></date-picker>)
392 | 
393 | 
394 |       } else if (
395 |         field.editType === "dateMonth"
396 |       ) {
397 |         detail = (<date-picker-month
398 |           valueDefault={rowData[field.name]}
399 |           selectOption={field.list}
400 |           propRuls={field.name}
401 |           editRow={rowIndex}
402 |           editCol={colIndex}
403 |           rowData={rowData}
404 |           field={field}
405 |           style={{width: "100%"}}
406 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
407 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
408 |           }}
409 |         ></date-picker-month>)
410 |       } else if (
411 |         field.editType === "dateRange"
412 |       ) {
413 |         detail = (<date-picker-range
414 |           valueDefault={rowData[field.name] || []}
415 |           selectOption={field.list}
416 |           propRuls={field.name}
417 |           editRow={rowIndex}
418 |           editCol={colIndex}
419 |           rowData={rowData}
420 |           field={field}
421 |           style={{width: "100%"}}
422 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
423 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
424 |           }}
425 |         ></date-picker-range>)
426 |       } else if (
427 |         field.editType === "dateMonthRange"
428 |       ) {
429 |         detail = (<date-picker-month-range
430 |           valueDefault={rowData[field.name] || []}
431 |           selectOption={field.list}
432 |           propRuls={field.name}
433 |           editRow={rowIndex}
434 |           editCol={colIndex}
435 |           rowData={rowData}
436 |           field={field}
437 |           style={{width: "100%"}}
438 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
439 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
440 |           }}
441 |         ></date-picker-month-range>)
442 | 
443 |       } else if (
444 |         field.editType === "dateYear"
445 |       ) {
446 |         detail = (<date-picker-year
447 |           valueDefault={rowData[field.name]}
448 |           selectOption={field.list}
449 |           propRuls={field.name}
450 |           editRow={rowIndex}
451 |           editCol={colIndex}
452 |           rowData={rowData}
453 |           field={field}
454 |           style={{width: "100%"}}
455 |           onData-change={(val, editRow, editCol, rowData, field, ruls) => {
456 |             this.$emit("data-change", val, editRow, editCol, rowData,field, ruls );
457 |           }}
458 |         ></date-picker-year>)
459 | 
460 |       } else {
461 |         detail = (<span>{[rowData[field.name]]}</span>)
462 |       }
463 |       return detail;
464 |     },
465 |     dateTransition(data) {
466 |       let dateStr = data ? data : [];
467 |       let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
468 |       let Arr = dateStr.match ? dateStr.match(reg) : [];
469 |       return Arr;
470 |     },
471 |     editTableLeave() {
472 |       this.edit.hoverEnterTr = -1;
473 |     },
474 |     //鼠标进入tr
475 |     trMouseenter(index) {
476 |       this.edit.hoverEnterTr = index;
477 |     },
478 | 
479 |     /*
480 |      * 表格点击事件，出现可拖动的小点
481 |      * */
482 |     dragDot(e, rowIndex, colIndex) {
483 |       this.edit.currentRowIndex = -1;
484 |       this.edit.currentColIndex = -1;
485 |       let self = this;
486 |       this.edit.currentRowIndex = rowIndex;
487 |       this.edit.currentColIndex = colIndex;
488 |       if (colIndex >= self.edit.fixCols) {
489 |         //获得父级td元素
490 |         let tdTarget = "";
491 |         if (e.target.nodeName == "TD") {
492 |           tdTarget = e.target;
493 |         } else {
494 |           if (self.edit.getParentTag(e.target)) {
495 |             tdTarget = self.edit.getParentTag(e.target);
496 |           } else {
497 |             return;
498 |           }
499 |         }
500 |         this.edit.dragSelect = 1;
501 |         // 目标元素的宽高
502 |         this.edit.drag.width = tdTarget.offsetWidth;
503 |         this.edit.drag.height = tdTarget.offsetHeight;
504 | 
505 |         this.edit.drag.cirLeft = this.edit.drag.width - 4;
506 |         this.edit.drag.cirTop = this.edit.drag.height - 4;
507 |         //目标元素距离左侧和上部的位置
508 |         this.edit.drag.clientX = tdTarget.offsetLeft;
509 |         this.edit.drag.clientY = tdTarget.offsetTop;
510 |         //目标元素初始化的距离左侧和顶部的位置
511 |         this.edit.initX = tdTarget.offsetLeft;
512 |         this.edit.initY = tdTarget.offsetTop;
513 |         //当前目标元素
514 |         this.edit.currentSelect = e;
515 |       } else {
516 |         return;
517 |       }
518 |     },
519 |     //list表格中获取值
520 |     getListValue(list, value, field) {
521 |       let label = "";
522 |       list.forEach(x => {
523 |         if (x[field.value] == value) {
524 |           label = x[field.label];
525 |         }
526 |       });
527 |       return label;
528 |     },
529 |     //鼠标进入tr颜色的变换
530 |     mouseEnterColor(index) {
531 |       let self = this;
532 |       let color = "";
533 |       if (index == self.edit.hoverEnterTr) {
534 |         color = "#F2F6FC";
535 |       } else {
536 |         index % 2 != 0 && self.edit.isZebra ? (color = "#FAFBFC") : (color = "#fff");
537 |       }
538 |       return color;
539 |     },
540 |     //动态校验表格
541 |     modelData(field, editRow) {
542 |       let self = this;
543 |       let border = "1px solid transparent";
544 |       self.edit.errArr.forEach(x => {
545 |         if (x.field == field && x.editRow == editRow && x.errors) {
546 |           border = "1px solid red";
547 |         }
548 |       });
549 |       return border;
550 |     }
551 |   }
552 | };
553 | </script>
554 | <style lang="scss">
555 | .error-text {
556 |   position: absolute;
557 |   top: -26px;
558 | }
559 | .th-div {
560 |   background: "transparent";
561 |   box-sizing: "border-box";
562 |   width: -webkit-calc(100% - 2px);
563 |   width: -moz-calc(100% - 2px);
564 |   width: calc(100% - 2px);
565 |   text-align: left;
566 |   margin-top: 1px;
567 |   min-height: 40px;
568 |   position: relative;
569 | }
570 | </style>
571 | 


--------------------------------------------------------------------------------
/component/EditTable/CanEditTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="editTableWrapper" ref="editTableWrapper">
  3 |     <div v-if="errDetail && errDetail.message" class="err-div" :style="errDivStyle">{{ errDetail.message }}</div>
  4 |     <div class="editTable" @wheel="wheel" :style="isAdd ? {} : { height: '100%' }">
  5 |       <drag-span
  6 |         v-if="currentColIndex != -1 && currentRowIndex != -1"
  7 |         :drag="drag"
  8 |         ref="dragSpan"
  9 |         :dragSpanShow="dragSpanShow"
 10 |         :style="dragSpanStyle"
 11 |         @data-change="dataChange"
 12 |         @editDragEnd="editDragEnd"
 13 |       ></drag-span>
 14 |       <!-- 主体表格 -->
 15 |       <edit-sub
 16 |         class="activity__table"
 17 |         ref="editGridSub"
 18 |         :allRow="true"
 19 |         :style="allStyle"
 20 |         @inputNumberBlur="inputNumberBlur"
 21 |         @inputBlur="inputBlur"
 22 |         @data-change="dataChange"
 23 |       >
 24 |         <template v-for="(item, index) in headers" :slot="item.name" slot-scope="field">
 25 |           <div :key="index">
 26 |             <slot :name="field.field.name" :field="field"></slot>
 27 |           </div>
 28 |         </template>
 29 |       </edit-sub>
 30 |       <!-- 固定表头表格 东北方向 -->
 31 |       <edit-sub class="fix north__east" :allRow="false" v-if="scrollY > 0" :style="northEastStyle"></edit-sub>
 32 |       <!-- 固定列头表格 西南方向 -->
 33 |       <edit-sub
 34 |         class="fix south__west"
 35 |         :onlyFix="true"
 36 |         :allRow="true"
 37 |         v-if="scrollX > 0 && fixCols > 0"
 38 |         :style="southWestStyle"
 39 |       >
 40 |         <template v-for="(item, index) in headers" :slot="item.name" slot-scope="field">
 41 |           <div :key="index">
 42 |             <slot :name="field.field.name" :field="field"></slot>
 43 |           </div>
 44 |         </template>
 45 |       </edit-sub>
 46 |       <!-- 固定列头部表格 西北方向 -->
 47 |       <edit-sub
 48 |         class="fix north__west"
 49 |         :onlyFix="true"
 50 |         :allRow="false"
 51 |         v-if="(scrollX > 0 || scrollY > 0) && allTableWidth < actualWidth && fixCols > 0"
 52 |         :style="northWestStyle"
 53 |       ></edit-sub>
 54 |       <scroll-bar
 55 |         v-if="vBarSize > 0 && vBarSize < 100"
 56 |         :vertical="true"
 57 |         :size="vBarSize"
 58 |         :move="vMove"
 59 |         @scroll="vScroll"
 60 |       />
 61 |       <scroll-bar v-if="hBarSize > 0 && hBarSize < 100" :size="hBarSize" :move="hMove" @scroll="hScroll" />
 62 |     </div>
 63 |     <div class="edit-table-add" v-if="isAdd" @click="editTableAdd">
 64 |       <svg-icon name="icon-plus" :width="12" :height="12"></svg-icon>
 65 |       添加
 66 |     </div>
 67 |   </div>
 68 | </template>
 69 | <script>
 70 | 
 71 | import SvgIcon from "../SvgIcon.vue";
 72 | import ScrollBar from "./../ScrollBar.vue";
 73 | import EditSub from "./EditSub.vue";
 74 | import scrollable from "./../scrollable.js";
 75 | import DragSpan from "./DragSpan.vue";
 76 | import AsyncValidator from "async-validator";
 77 | 
 78 | export default {
 79 |   name: "CanEditTable",
 80 |   mixins: [scrollable],
 81 |   components: { ScrollBar, EditSub, DragSpan, SvgIcon },
 82 |   data() {
 83 |     return {
 84 |       //初始化数据
 85 |       initTable: [],
 86 |       //错误所存储的数组
 87 |       errArr: [],
 88 |       //错误信息
 89 |       errDetail: "",
 90 |       startRow: -1,
 91 |       startCol: -1,
 92 |       endRow: -1,
 93 | 
 94 |       //当前选中的元素
 95 |       currentSelect: "",
 96 |       //当前点击的元素
 97 |       currentRowIndex: -1,
 98 |       currentColIndex: -1,
 99 | 
100 |       //拖拽的位置信息
101 |       drag: {
102 |         clientX: 0,
103 |         clientY: 0,
104 |         width: 0,
105 |         height: 0,
106 |         maxWidth: 0,
107 |         cirLeft: 0,
108 |         cirTop: 0
109 |       },
110 |       dragSpanShow: false,
111 |       //外框的高度
112 |       allTableHeight: 0,
113 |       //外框的宽度
114 |       allTableWidth: 0,
115 |       dragSelect: 1,
116 |       //是否是可编辑状态
117 |       isEdit: true,
118 |       //记录点击的次数
119 |       editClickCount: 0,
120 |       //进入当前tr的行数
121 |       hoverEnterTr: -1,
122 |       serialWidth: 52,
123 |       scrollX: 0,
124 |       scrollY: 0,
125 |       clientWidth: 0,
126 |       clientHeight: 0,
127 |       tableTdHeight: 40,
128 |       tdHeight: new Array(this.data.length),
129 |       realHeight: 0,
130 |       //选择的格子
131 |       selectArr: [this.currentRowIndex],
132 |       tableClientX: 0,
133 |       tableClientY: 0,
134 |       hoverDiv: {
135 |         top: 0,
136 |         left: 0,
137 |         width: 0,
138 |         rowIndex: -1,
139 |         colIndex: -1
140 |       },
141 |       isFirst: 0,
142 |       isVal: false
143 |     };
144 |   },
145 |   provide() {
146 |     return {
147 |       edit: this
148 |     };
149 |   },
150 |   computed: {
151 |     errDivStyle() {
152 |       return {
153 |         display: this.hoverDiv.rowIndex == -1 && this.hoverDiv.colIndex == -1 ? "none" : "block",
154 |         width: this.hoverDiv.width + "px",
155 |         top: this.hoverDiv.top - 20 - this.scrollY + "px",
156 |         left: this.hoverDiv.left - this.scrollX + "px"
157 |       };
158 |     },
159 |     dragSpanStyle() {
160 |       return {
161 |         left: this.drag.clientX - this.scrollX + "px",
162 |         top: this.drag.clientY - this.scrollY + "px",
163 |         width:
164 |           this.currentRowIndex && this.currentRowIndex != -1
165 |             ? this.headers[this.currentRowIndex].width + "px"
166 |             : 0 + "px",
167 |         height:
168 |           this.currentColIndex && this.currentColIndex != -1 ? this.tdHeight[this.currentColIndex] + "px" : 0 + "px",
169 |         zIndex: 100
170 |       };
171 |     },
172 |     actualWidth() {
173 |       let result = 0;
174 |       result += this.serialWidth;
175 |       this.headers.forEach(header => {
176 |         result += header.width;
177 |       });
178 |       return result;
179 |     },
180 | 
181 |     actualHeight() {
182 |       this.heightAdaption();
183 |       let height = this.realHeight;
184 |       return height;
185 |     },
186 |     fixColWidth() {
187 |       let result = 0;
188 |       result += this.serialWidth;
189 |       for (let i = 0; i < this.fixCols; i++) result += this.headers[i].width;
190 |       return result;
191 |     },
192 |     //整体表格样式
193 |     allStyle() {
194 |       return {
195 |         top: -this.scrollY + "px",
196 |         left: -this.scrollX + "px",
197 |         width: this.actualWidth + "px",
198 |         minWidth: "100%"
199 |       };
200 |     },
201 |     northWestStyle() {
202 |       return {
203 |         width: this.fixColWidth + "px",
204 |         height: this.tableHeaderHeight + "px"
205 |       };
206 |     },
207 | 
208 |     southWestStyle() {
209 |       return { top: -this.scrollY + "px", width: this.fixColWidth + "px", left: "0px" };
210 |     },
211 |     northEastStyle() {
212 |       return {
213 |         left: -this.scrollX + "px",
214 |         width: this.actualWidth + "px"
215 |       };
216 |     }
217 |   },
218 |   props: {
219 |     isHasData: {
220 |       type: Number,
221 |       default: 0
222 |     },
223 |     isEditTable: {
224 |       type: Boolean,
225 |       default: true
226 |     },
227 |     isAdd: {
228 |       type: Boolean,
229 |       default: false
230 |     },
231 |     headers: {
232 |       type: Array,
233 |       required: true
234 |     },
235 |     data: {
236 |       type: Array,
237 |       required: true
238 |     },
239 |     fixCols: {
240 |       type: Number,
241 |       default: 0
242 |     },
243 |     tableHeaderHeight: {
244 |       type: Number,
245 |       default: 40
246 |     },
247 |     editTable: {
248 |       type: Object,
249 |       required: true
250 |     },
251 |     isZebra: {
252 |       type: Boolean,
253 |       default: true
254 |     },
255 |     generalDates: {
256 |       type: Array,
257 |       default: null
258 |     }
259 |   },
260 |   watch: {
261 |     hoverDiv: {
262 |       deep: true,
263 |       immediate: true,
264 |       handler(val) {
265 |         this.isShowErr(val);
266 |       }
267 |     },
268 |     // currentColIndex: {
269 |     //   immediate: true,
270 |     //   deep: true,
271 |     //   handler: function(val) {
272 |     //     console.log("currentColIndex值发生改变");
273 |     //     console.log(val);
274 |     //   }
275 |     // },
276 |     currentRowIndex: {
277 |       immediate: true,
278 |       deep: true,
279 |       handler: function(val) {
280 |         this.selectArr = [val];
281 |       }
282 |     },
283 |     tdHeight: {
284 |       immediate: true,
285 |       deep: true,
286 |       handler: function(val) {
287 |         this.$nextTick(() => {
288 |           let realHeight = 0;
289 |           val.forEach(x => {
290 |             realHeight += x;
291 |           });
292 |           realHeight += this.tableHeaderHeight + 10;
293 |           this.realHeight = realHeight;
294 |         });
295 |       }
296 |     },
297 |     data: {
298 |       immediate: true,
299 |       deep: true,
300 |       handler(val) {
301 |         this.data = val;
302 |         if (val && this.isFirst == 0) {
303 |           this.initTable = JSON.parse(JSON.stringify(val));
304 |           this.isFirst++;
305 |         }
306 |         this.tdHeight = new Array(this.data.length);
307 |         this.$nextTick(() => {
308 |           this.$refs.editGridSub.tdHeightGet();
309 |           this.tableClientY = this.$refs.editTableWrapper.offsetTop;
310 |           this.tableClientX = this.$refs.editTableWrapper.offsetLeft;
311 |         });
312 |         this.$emit("updata:data", val);
313 |         this.$emit("change", val);
314 |       }
315 |     },
316 |     errArr: {
317 |       immediate: true,
318 |       deep: true,
319 |       handler: function(val) {
320 |         this.errArr = val;
321 |       }
322 |     },
323 |     errDetail: {
324 |       immediate: true,
325 |       deep: true,
326 |       handler: function(val) {
327 |         this.errDetail = val;
328 |       }
329 |     }
330 |   },
331 |   mounted() {
332 |     let self = this;
333 |     this.heightAdaption();
334 |     window.onresize = () => {
335 |       if (self.currentSelect) {
336 |         let parentTarget = "";
337 |         if (self.currentSelect.target.nodeName == "TD") {
338 |           parentTarget = self.currentSelect.target;
339 |         } else {
340 |           parentTarget = self.getParentTag(self.currentSelect.target);
341 |         }
342 |         self.drag.width = parentTarget.offsetWidth;
343 |         self.drag.cirLeft = self.drag.width - 4;
344 |         self.drag.cirTop = self.drag.height - 4;
345 |         self.drag.clientX = parentTarget.offsetLeft;
346 |         self.drag.clientY = parentTarget.offsetTop;
347 |       }
348 |       this.heightAdaption();
349 |     };
350 |     if (this.isHasData > 0) {
351 |       for (let i = 0; i < this.isHasData; i++) {
352 |         this.editTableAdd();
353 |       }
354 |     }
355 |   },
356 |   methods: {
357 |     editDragEnd(currentColIndex, selectArr, name, value) {
358 |       this.$emit("editDragEnd", currentColIndex, selectArr, name, value);
359 |     },
360 |     dataChange(val, editRow, editCol, rowData, field, ruls) {
361 |       this.$emit("data-change", val, editRow, editCol, rowData, field, ruls);
362 |     },
363 |     dotClick(e, rowIndex, colIndex) {
364 |       this.$refs.editGridSub.dragDot(event, rowIndex, colIndex);
365 |     },
366 |     isShowErr(val) {
367 |       let detail = {};
368 |       this.errArr.forEach(x => {
369 |         if (x.editRow == val.rowIndex && x.editCol == val.colIndex) {
370 |           detail = x.errors[0] ? x.errors[0] : {};
371 |         }
372 |       });
373 |       this.errDetail = detail;
374 |     },
375 |     inputNumberBlur(editRowData, editKey, editVal) {
376 |       this.$emit("inputNumberBlur", editRowData, editKey, editVal);
377 |     },
378 |     inputBlur(editRowData, editKey, editVal, rowIndex) {
379 |       this.$emit("inputBlur", editRowData, editKey, editVal, rowIndex);
380 |     },
381 |     heightAdaption() {
382 |       this.$nextTick(() => {
383 |         this.allTableHeight =
384 |           this.$refs.editTableWrapper && this.$refs.editTableWrapper.offsetHeight
385 |             ? this.$refs.editTableWrapper.offsetHeight
386 |             : 0;
387 |         this.allTableWidth =
388 |           this.$refs.editTableWrapper && this.$refs.editTableWrapper.offsetWidth
389 |             ? this.$refs.editTableWrapper.offsetWidth
390 |             : 0;
391 |       });
392 |     },
393 |     editTableAdd() {
394 |       // let sourceData = this.data;
395 |       let newData = {};
396 |       this.headers.forEach(x => {
397 |         newData[x.name] = "";
398 |       });
399 |       this.data.push(newData);
400 |     },
401 |     getParentTag(startTag) {
402 |       var self = this;
403 |       // 传入标签是否是DOM对象
404 |       if (!(startTag instanceof HTMLElement)) {
405 |         console.error("receive only HTMLElement");
406 |         return 
407 |       }
408 |       // 父级标签是否是body,是着停止返回集合,反之继续
409 |       if ("BODY" !== startTag.parentElement.nodeName) {
410 |         if (startTag.parentElement.nodeName == "TD") {
411 |           return startTag.parentElement;
412 |         } else {
413 |           if (startTag.parentElement.parentElement) {
414 |             return self.getParentTag(startTag.parentElement);
415 |           } else {
416 |             return false;
417 |           }
418 |         }
419 |         // 再上一层寻找
420 |       }
421 |     },
422 |     /*
423 |      * 表格校验
424 |      * value: 传入的值
425 |      * field: 传入的字段名，
426 |      * titleIndex: 字段所对应的index
427 |      * type: 表格校验的类型，0：校验单个输入框。 1：校验整个输入框
428 |      * */
429 |     tableValidate(field, value, editCol, editRow, type) {
430 |       let self = this;
431 |       let descriptor = {};
432 |       // 根据校验规则构造一个 validator
433 |       let validator = "";
434 |       let data = {};
435 |       let newArr = [...self.errArr];
436 |       self.errArr.forEach((x, index) => {
437 |         if (x.editCol == editCol && x.editRow == editRow && x.field == field) {
438 |           newArr.splice(index, 1);
439 |         }
440 |       });
441 |       self.errArr = [...newArr];
442 |       if (type == 0) {
443 |         if (self.editTable.rules[field]) {
444 |           //校验单个输入框
445 |           data[field] = value;
446 |           descriptor[field] = self.editTable.rules[field];
447 |           validator = new AsyncValidator(descriptor);
448 |           validator.validate(data, (errors, fields) => {
449 |             if (errors) {
450 |               let title = self.headers[editCol].title;
451 |               self.errDetail = title + fields[field][0].message;
452 |               let errArr = {
453 |                 editCol: editCol,
454 |                 editRow: editRow,
455 |                 field: field,
456 |                 title: title,
457 |                 value: value,
458 |                 errors: errors
459 |               };
460 |               self.errArr.push(errArr);
461 |             } else {
462 |               self.errDetail = "";
463 |             }
464 |           });
465 |         } else {
466 |           return;
467 |         }
468 |       }
469 |     },
470 |     //时间转换函数
471 |     dateTimeChang(data) {
472 |       let timestamp = "";
473 |       if (data && data !== "" && data != null && data !== undefined) {
474 |         if (data.substring) {
475 |           data = data.substring(0, 19);
476 |           data = data.replace(/-/g, "/");
477 |           timestamp = new Date(data).getTime();
478 |         } else {
479 |           return;
480 |         }
481 |       } else {
482 |         data = "";
483 |       }
484 |       return timestamp;
485 |     },
486 |     //提交表单
487 |     // submitForm() {
488 |     //   let self = this;
489 |     //   self.isVal = false;
490 |     //   this.open();
491 | 
492 |     //   // console.log(self.tableAllVal());
493 |     //   // if (self.tableAllVal()) {
494 |     //   //   return true;
495 |     //   // } else {
496 |     //   //   console.log("可编辑表格没有填写完毕");
497 |     //   //   return false;
498 |     //   // }
499 |     // },
500 |     clearAll() {
501 |       let self = this;
502 |       let type = [];
503 |       self.headers.forEach(header => {
504 |         if (header.editType !== "none") {
505 |           type.push(header.name);
506 |         }
507 |       });
508 |       self.data.forEach((y, index) => {
509 |         type.forEach(x => {
510 |           self.data[index][x] = "";
511 |         });
512 |       });
513 |     },
514 |     resetAll() {
515 |       // self.initTable.forEach((x, index) => {
516 |       //   self.$set(self.data, index, x);
517 |       // });
518 |       this.$emit("update:data", this.initTable);
519 |     },
520 |     isDataChange() {
521 |       //判断是否有某一行数据没有发生变化或者某一行数据没有任何数据
522 |       let self = this;
523 |       let newData = [];
524 |       self.data.forEach((x, index) => {
525 |         if (typeof x === "object") {
526 |           let count = 0;
527 |           let arr = [];
528 |           Object.keys(x).forEach(function(key) {
529 |             arr.push(key);
530 |             if (x[key] == "" || x[key] == undefined || x[key] == null) {
531 |               count++;
532 |             }
533 |           });
534 |           if (count == arr.length) newData.push(index);
535 |         } else if (x == "" || x == undefined || x == null) {
536 |           newData.push(index);
537 |         }
538 |       });
539 |       return newData;
540 |     },
541 |     submitForm() {
542 |       let newData = this.isDataChange();
543 |       if (newData.length > 0) {
544 |         let data = this.comfirVal(newData);
545 |         return data;
546 |       } else {
547 |         let data = this.comfirVal([]);
548 |         return data;
549 |       }
550 |     },
551 | 
552 |     /*
553 |      * 表格整个进行表格校验
554 |      * value: 传入的值
555 |      * field: 传入的字段名，
556 |      * titleIndex: 字段所对应的index
557 |      * type: 表格校验的类型，0：校验单个输入框。 1：校验整个输入框
558 |      * */
559 |     tableAllVal() {
560 |       this.submitForm();
561 |     },
562 |     comfirVal(newData) {
563 |       let self = this;
564 |       let value = "";
565 |       self.errArr = [];
566 |       // self.data.forEach((row, index) => {
567 |       for (let index = 0; index < self.data.length; index++) {
568 |         let row = self.data[index];
569 |         let count = 0;
570 |         newData.forEach(x => {
571 |           if (x == index) count++;
572 |         });
573 |         if (count > 0) {
574 |           break;
575 |         } else {
576 |           self.headers.forEach((header, colIndex) => {
577 |             if (header.editType == "date" || header.editType == "dateMonth" || header.editType == "dateYear") {
578 |               value = self.dateTimeChang(row[header.name]);
579 |               self.tableValidate(header.name, value, colIndex, index, 0);
580 |             } else if (header.editType == "dateMonthRange" || header.editType == "dateRange") {
581 |               if (row[header.name] && row[header.name] !== null && row[header.name].length > 1) {
582 |                 row[header.name].forEach(x => {
583 |                   value = self.dateTimeChang(x);
584 |                   self.tableValidate(header.name, value, colIndex, index, 0);
585 |                 });
586 |               } else {
587 |                 value = "";
588 |                 self.tableValidate(header.name, value, colIndex, index, 0);
589 |               }
590 |             } else if (header.editType == "selectPerson") {
591 |               value = row[header.name] ? row[header.name].id : "";
592 |               self.tableValidate(header.name, value, colIndex, index, 0);
593 |             } else {
594 |               value = row[header.name];
595 |               self.tableValidate(header.name, value, colIndex, index, 0);
596 |             }
597 |           });
598 |           // });
599 |         }
600 |       }
601 |       if (self.errArr.length > 0) {
602 |         self.errDetail = self.errArr[0].errors[0].message;
603 |         return false;
604 |       } else {
605 |         return true;
606 |       }
607 |     }
608 |   }
609 | };
610 | </script>
611 | <style lang="scss">
612 | * {
613 |   margin: 0;
614 |   padding: 0;
615 |   box-sizing: border-box;
616 | }
617 | ul {
618 |   list-style: none;
619 | }
620 | body {
621 |   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
622 |     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
623 |   font-weight: normal;
624 |   font-size: 14px;
625 |   -webkit-font-smoothing: antialiased;
626 | }
627 | 
628 | 
629 | .scroll-div::-webkit-scrollbar {
630 |   width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
631 |   height: 1px;
632 | }
633 | .scroll-div::-webkit-scrollbar-thumb {
634 |   border-radius: 6px;
635 |   // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
636 |   background: rgba(144, 147, 153, 0.5);
637 | }
638 | .scroll-div::-webkit-scrollbar-track {
639 |   // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
640 |   border-radius: 5px;
641 |   background: transparent;
642 | }
643 | .editTableWrapper {
644 |   position: relative;
645 |   -webkit-user-select: none;
646 |   -moz-user-select: none;
647 |   -ms-user-select: none;
648 |   user-select: none;
649 | 
650 |   .err-div {
651 |     position: absolute;
652 |     top: 10px;
653 |     height: 20px !important;
654 |     line-height: 20px !important;
655 |     background: rgba(245, 108, 108, 0.1);
656 |     border: 1px solid rgba(245, 108, 108, 0.4);
657 |     font-size: 12px;
658 |     color: #f56c6c;
659 |     z-index: 1000;
660 |     overflow: hidden;
661 |     text-overflow: ellipsis;
662 |     white-space: nowrap;
663 |   }
664 |   table {
665 |     table-layout: fixed;
666 |   }
667 | }
668 | 
669 | .editTable {
670 |   position: relative;
671 |   overflow: hidden;
672 |   width: 100%;
673 |   height: -webkit-calc(100% - 50px);
674 |   height: -moz-calc(100% - 50px);
675 |   height: calc(100% - 50px);
676 |   border: 1px solid #dcdfe6;
677 |   border-top: 0;
678 |   background: #fff;
679 |   .th-div {
680 |     -webkit-user-select: none;
681 |     -moz-user-select: none;
682 |     -ms-user-select: none;
683 |     user-select: none;
684 |     div {
685 |       height: 100%;
686 |       .el-input {
687 |         height: 100%;
688 |         width: 100%;
689 |       }
690 |       .el-select {
691 |         width: 100%;
692 |       }
693 |     }
694 |     .el-input__inner {
695 |       height: 100%;
696 |       line-height: 100%;
697 |       border: 0;
698 |       outline: 0;
699 |       background: transparent;
700 |     }
701 |     .el-range-separator {
702 |       visibility: hidden;
703 |     }
704 |     .el-range-input {
705 |       background: transparent;
706 |     }
707 |   }
708 | }
709 | .edit-table-add {
710 |   width: 100%;
711 |   height: 40px;
712 |   text-align: center;
713 |   line-height: 40px;
714 |   font-size: 14px;
715 |   border: 1px dashed #dcdfe6;
716 |   color: #303133;
717 |   margin-top: 10px;
718 |   cursor: pointer;
719 |   svg {
720 |     fill: #333333;
721 |     vertical-align: middle;
722 |     margin-right: 6px;
723 |   }
724 | }
725 | .north__west {
726 |   left: 0px;
727 |   top: 0px;
728 |   background: #f0f2f5;
729 |   font-size: 14px;
730 |   color: #606266;
731 |   z-index: 113;
732 | }
733 | .south__west {
734 |   background: #f0f2f5;
735 |   z-index: 111;
736 |   left: 0px;
737 |   th {
738 |     background: #f0f2f5;
739 |     font-size: 14px;
740 |     color: #606266;
741 |     z-index: 112;
742 |   }
743 |   td {
744 |     font-size: 12px;
745 |     color: #606266;
746 |     // white-space: nowrap;
747 |     // overflow: hidden;
748 |     // text-overflow: ellipsis;
749 |     // font-size: 11px;
750 |     color: #6a6a6a;
751 |     svg {
752 |       width: 20px;
753 |       height: 20px;
754 |       vertical-align: middle;
755 |     }
756 |   }
757 | }
758 | .north__east {
759 |   top: 0px;
760 |   min-width: 100%;
761 |   background: #f0f2f5;
762 |   z-index: 110;
763 |   font-size: 14px;
764 |   color: #606266;
765 |   th {
766 |     background: #f0f2f5;
767 |     font-size: 14px;
768 |     color: #606266;
769 |   }
770 | }
771 | .activity__table {
772 |   min-width: 100%;
773 |   th {
774 |     background: #f0f2f5;
775 |     font-size: 14px;
776 |     color: #606266;
777 |   }
778 |   td {
779 |     font-size: 12px;
780 |     // white-space: nowrap;
781 |     // overflow: hidden;
782 |     // text-overflow: ellipsis;
783 |     // font-size: 11px;
784 |     color: #6a6a6a;
785 |   }
786 | }
787 | 
788 | .editTable__block {
789 |   user-select: none;
790 |   position: absolute;
791 |   border-collapse: collapse;
792 |   padding: 0;
793 | 
794 |   & th,
795 |   td {
796 |     box-sizing: border-box;
797 |     border: 1px solid #dcdfe6;
798 |     // white-space: nowrap;
799 |     // overflow: hidden;
800 |     // text-overflow: ellipsis;
801 |     font-size: 11px;
802 |     color: #6a6a6a;
803 |   }
804 | }
805 | .editTableWrapper {
806 |   .el-input--small {
807 |     .el-input__inner {
808 |       border-color: transparent;
809 |       background: transparent;
810 |       font-size: 12px;
811 |       color: #606266;
812 |       outline: 0;
813 |     }
814 |   }
815 | }
816 | 
817 | .icon-ser {
818 |   cursor: pointer;
819 | }
820 | .editTableWrapper .editTable .el-form-item--mini.el-form-item,
821 | .el-form-item--small.el-form-item {
822 |   margin-bottom: 0;
823 | }
824 | .editTableWrapper .el-form-item--small .el-form-item__error {
825 |   z-index: 100;
826 | }
827 | </style>
828 | 


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