gyyg-components 0.1.13 → 0.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -24
- package/babel.config.js +12 -12
- package/jsconfig.json +19 -19
- package/lib/demo.html +8 -8
- package/lib/gyyg-components.common.js +2044 -2044
- package/lib/gyyg-components.umd.js +2054 -2054
- package/lib/gyyg-components.umd.min.js +2054 -2054
- package/package.json +50 -50
- package/public/index.html +17 -17
- package/src/App.vue +46 -46
- package/src/components/EmcTable/EmcTable.js +5 -0
- package/src/components/EmcTable/EmcTable.vue +246 -0
- package/src/components/EmcTable/btnClick.vue +52 -0
- package/src/components/EmcTable/iconButton.vue +82 -0
- package/src/components/EmcTable/methods.js +59 -0
- package/src/components/EmcTable/styleText.vue +51 -0
- package/src/components/GyygModal/GyygModal.vue +333 -332
- package/src/components/GyygTable/GyygTable.vue +82 -82
- package/src/main.js +21 -17
- package/vue.config.js +24 -24
package/package.json
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "gyyg-components",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"private": false,
|
|
5
|
-
"main": "lib/gyyg-components.umd.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"serve": "vue-cli-service serve",
|
|
8
|
-
"start": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js --watch",
|
|
9
|
-
"build": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js",
|
|
10
|
-
"lint": "vue-cli-service lint"
|
|
11
|
-
},
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"babel-plugin-component": "^1.1.1",
|
|
14
|
-
"core-js": "^3.6.5",
|
|
15
|
-
"element-resize-detector": "^1.2.4",
|
|
16
|
-
"element-ui": "2.15.6",
|
|
17
|
-
"vue": "^2.6.11"
|
|
18
|
-
},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"@vue/cli-plugin-babel": "~4.5.15",
|
|
21
|
-
"@vue/cli-plugin-eslint": "~4.5.15",
|
|
22
|
-
"@vue/cli-service": "~4.5.15",
|
|
23
|
-
"babel-eslint": "^10.1.0",
|
|
24
|
-
"eslint": "^6.7.2",
|
|
25
|
-
"eslint-plugin-vue": "^6.2.2",
|
|
26
|
-
"less": "^4.2.1",
|
|
27
|
-
"less-loader": "^7.3.0",
|
|
28
|
-
"svg-sprite-loader": "^4.1.3",
|
|
29
|
-
"vue-template-compiler": "^2.6.11"
|
|
30
|
-
},
|
|
31
|
-
"eslintConfig": {
|
|
32
|
-
"root": true,
|
|
33
|
-
"env": {
|
|
34
|
-
"node": true
|
|
35
|
-
},
|
|
36
|
-
"extends": [
|
|
37
|
-
"plugin:vue/essential",
|
|
38
|
-
"eslint:recommended"
|
|
39
|
-
],
|
|
40
|
-
"parserOptions": {
|
|
41
|
-
"parser": "babel-eslint"
|
|
42
|
-
},
|
|
43
|
-
"rules": {}
|
|
44
|
-
},
|
|
45
|
-
"browserslist": [
|
|
46
|
-
"> 1%",
|
|
47
|
-
"last 2 versions",
|
|
48
|
-
"not dead"
|
|
49
|
-
]
|
|
50
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "gyyg-components",
|
|
3
|
+
"version": "0.1.15",
|
|
4
|
+
"private": false,
|
|
5
|
+
"main": "lib/gyyg-components.umd.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"serve": "vue-cli-service serve",
|
|
8
|
+
"start": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js --watch",
|
|
9
|
+
"build": "vue-cli-service build --target lib --name gyyg-components --dest lib src/index.js",
|
|
10
|
+
"lint": "vue-cli-service lint"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"babel-plugin-component": "^1.1.1",
|
|
14
|
+
"core-js": "^3.6.5",
|
|
15
|
+
"element-resize-detector": "^1.2.4",
|
|
16
|
+
"element-ui": "2.15.6",
|
|
17
|
+
"vue": "^2.6.11"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"@vue/cli-plugin-babel": "~4.5.15",
|
|
21
|
+
"@vue/cli-plugin-eslint": "~4.5.15",
|
|
22
|
+
"@vue/cli-service": "~4.5.15",
|
|
23
|
+
"babel-eslint": "^10.1.0",
|
|
24
|
+
"eslint": "^6.7.2",
|
|
25
|
+
"eslint-plugin-vue": "^6.2.2",
|
|
26
|
+
"less": "^4.2.1",
|
|
27
|
+
"less-loader": "^7.3.0",
|
|
28
|
+
"svg-sprite-loader": "^4.1.3",
|
|
29
|
+
"vue-template-compiler": "^2.6.11"
|
|
30
|
+
},
|
|
31
|
+
"eslintConfig": {
|
|
32
|
+
"root": true,
|
|
33
|
+
"env": {
|
|
34
|
+
"node": true
|
|
35
|
+
},
|
|
36
|
+
"extends": [
|
|
37
|
+
"plugin:vue/essential",
|
|
38
|
+
"eslint:recommended"
|
|
39
|
+
],
|
|
40
|
+
"parserOptions": {
|
|
41
|
+
"parser": "babel-eslint"
|
|
42
|
+
},
|
|
43
|
+
"rules": {}
|
|
44
|
+
},
|
|
45
|
+
"browserslist": [
|
|
46
|
+
"> 1%",
|
|
47
|
+
"last 2 versions",
|
|
48
|
+
"not dead"
|
|
49
|
+
]
|
|
50
|
+
}
|
package/public/index.html
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
8
|
-
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
9
|
-
</head>
|
|
10
|
-
<body>
|
|
11
|
-
<noscript>
|
|
12
|
-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
-
</noscript>
|
|
14
|
-
<div id="app"></div>
|
|
15
|
-
<!-- built files will be auto injected -->
|
|
16
|
-
</body>
|
|
17
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
7
|
+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
8
|
+
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<noscript>
|
|
12
|
+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
13
|
+
</noscript>
|
|
14
|
+
<div id="app"></div>
|
|
15
|
+
<!-- built files will be auto injected -->
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
package/src/App.vue
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div id="app">
|
|
3
|
-
<!-- <gyyg-layout>
|
|
4
|
-
<template slot="table">
|
|
5
|
-
<gyyg-table :data='data' @selection-change="change" >
|
|
6
|
-
<template slot='content'>
|
|
7
|
-
<el-table-column type="selection" width="55"> </el-table-column>
|
|
8
|
-
<el-table-column prop='a'></el-table-column>
|
|
9
|
-
</template>
|
|
10
|
-
</gyyg-table>
|
|
11
|
-
</template>
|
|
12
|
-
</gyyg-layout> -->
|
|
13
|
-
</div>
|
|
14
|
-
</template>
|
|
15
|
-
|
|
16
|
-
<script>
|
|
17
|
-
export default {
|
|
18
|
-
name: 'App',
|
|
19
|
-
data(){
|
|
20
|
-
return{
|
|
21
|
-
// text:'',
|
|
22
|
-
// data:[
|
|
23
|
-
// {
|
|
24
|
-
// a:'1322'
|
|
25
|
-
// }
|
|
26
|
-
// ]
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
methods:{
|
|
30
|
-
change(val){
|
|
31
|
-
console.log(val)
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
</script>
|
|
36
|
-
|
|
37
|
-
<style>
|
|
38
|
-
#app {
|
|
39
|
-
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
40
|
-
-webkit-font-smoothing: antialiased;
|
|
41
|
-
-moz-osx-font-smoothing: grayscale;
|
|
42
|
-
text-align: center;
|
|
43
|
-
color: #2c3e50;
|
|
44
|
-
margin-top: 60px;
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div id="app">
|
|
3
|
+
<!-- <gyyg-layout>
|
|
4
|
+
<template slot="table">
|
|
5
|
+
<gyyg-table :data='data' @selection-change="change" >
|
|
6
|
+
<template slot='content'>
|
|
7
|
+
<el-table-column type="selection" width="55"> </el-table-column>
|
|
8
|
+
<el-table-column prop='a'></el-table-column>
|
|
9
|
+
</template>
|
|
10
|
+
</gyyg-table>
|
|
11
|
+
</template>
|
|
12
|
+
</gyyg-layout> -->
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
export default {
|
|
18
|
+
name: 'App',
|
|
19
|
+
data(){
|
|
20
|
+
return{
|
|
21
|
+
// text:'',
|
|
22
|
+
// data:[
|
|
23
|
+
// {
|
|
24
|
+
// a:'1322'
|
|
25
|
+
// }
|
|
26
|
+
// ]
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
methods:{
|
|
30
|
+
change(val){
|
|
31
|
+
console.log(val)
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<style>
|
|
38
|
+
#app {
|
|
39
|
+
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
40
|
+
-webkit-font-smoothing: antialiased;
|
|
41
|
+
-moz-osx-font-smoothing: grayscale;
|
|
42
|
+
text-align: center;
|
|
43
|
+
color: #2c3e50;
|
|
44
|
+
margin-top: 60px;
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="table-container">
|
|
3
|
+
<el-table
|
|
4
|
+
:data="tableData"
|
|
5
|
+
ref='table'
|
|
6
|
+
:height="height"
|
|
7
|
+
:max-height="maxHeight"
|
|
8
|
+
:highlight-current-row="highlightCurrentRow"
|
|
9
|
+
:row-class-name="tableRowClassName"
|
|
10
|
+
:header-cell-style="headerCellStyle"
|
|
11
|
+
:row-key="rowKey"
|
|
12
|
+
:expand-row-keys="expandRowKeys"
|
|
13
|
+
:tree-props="treeProps"
|
|
14
|
+
@current-change="currentChange"
|
|
15
|
+
@sort-change="sortChange"
|
|
16
|
+
@selection-change="selectionChange"
|
|
17
|
+
@select="select"
|
|
18
|
+
:row-style="selectedRowStyle"
|
|
19
|
+
:default-expand-all="defaultExpandAll"
|
|
20
|
+
>
|
|
21
|
+
<!-- 多选框 -->
|
|
22
|
+
<el-table-column
|
|
23
|
+
type="selection"
|
|
24
|
+
width="55"
|
|
25
|
+
align="center"
|
|
26
|
+
:reserve-selection="reserveSelection"
|
|
27
|
+
v-if="selection"
|
|
28
|
+
></el-table-column>
|
|
29
|
+
<template v-for="(col, index) in column">
|
|
30
|
+
<el-table-column
|
|
31
|
+
v-if="!col['type']"
|
|
32
|
+
:label="col.label"
|
|
33
|
+
:align="col.align"
|
|
34
|
+
:min-width="col.minWidth"
|
|
35
|
+
:max-width="col.maxWidth"
|
|
36
|
+
:width="col.width"
|
|
37
|
+
:sortable="col.sortable"
|
|
38
|
+
:show-overflow-tooltip="col.showOverflowTooltip"
|
|
39
|
+
:key="index"
|
|
40
|
+
:fixed="col.fixed"
|
|
41
|
+
:prop="col.bind"
|
|
42
|
+
>
|
|
43
|
+
<template slot="header" v-if="col.header == 'custom'">
|
|
44
|
+
<span>{{ col.label }}
|
|
45
|
+
<el-tooltip class="item" effect="dark" :content="col.message" placement="top">
|
|
46
|
+
<i :class="col.headerIcon || 'el-icon-question'"></i>
|
|
47
|
+
</el-tooltip>
|
|
48
|
+
</span>
|
|
49
|
+
</template>
|
|
50
|
+
</el-table-column>
|
|
51
|
+
<el-table-column
|
|
52
|
+
v-else
|
|
53
|
+
:label="col.label"
|
|
54
|
+
:align="col.align"
|
|
55
|
+
:min-width="col.minWidth"
|
|
56
|
+
:max-width="col.maxWidth"
|
|
57
|
+
:width="col.width"
|
|
58
|
+
:sortable="col.sortable"
|
|
59
|
+
:show-overflow-tooltip="col.showOverflowTooltip"
|
|
60
|
+
:key="index + col.type"
|
|
61
|
+
:fixed="col.fixed"
|
|
62
|
+
>
|
|
63
|
+
<template slot-scope="scope">
|
|
64
|
+
<component
|
|
65
|
+
:key="index"
|
|
66
|
+
:is="col['type']"
|
|
67
|
+
:scope="scope"
|
|
68
|
+
:tableData="col"
|
|
69
|
+
v-model="scope.row[col.bind]"
|
|
70
|
+
v-bind="col.componentProps || {}"
|
|
71
|
+
v-on="col.componentListeners || {}"
|
|
72
|
+
></component>
|
|
73
|
+
</template>
|
|
74
|
+
<template slot="header" v-if="col.header == 'custom'">
|
|
75
|
+
<span>{{ col.label }}
|
|
76
|
+
<el-tooltip class="item" effect="dark" :content="col.message" placement="top">
|
|
77
|
+
<i :class="col.headerIcon || 'el-icon-question'"></i>
|
|
78
|
+
</el-tooltip>
|
|
79
|
+
</span>
|
|
80
|
+
</template>
|
|
81
|
+
</el-table-column>
|
|
82
|
+
</template>
|
|
83
|
+
|
|
84
|
+
</el-table>
|
|
85
|
+
<!-- 分页 -->
|
|
86
|
+
<div class="pagination-layout">
|
|
87
|
+
<el-pagination
|
|
88
|
+
v-if="page"
|
|
89
|
+
@size-change="handleSizeChange"
|
|
90
|
+
@current-change="handleCurrentChange"
|
|
91
|
+
:page-sizes="[10, 20, 30, 50]"
|
|
92
|
+
:page-size="page.pageSize"
|
|
93
|
+
:current-page="page.currentPage"
|
|
94
|
+
layout="total, sizes, prev, pager, next, jumper"
|
|
95
|
+
:total="page.totalRecords"
|
|
96
|
+
></el-pagination>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
100
|
+
<script>
|
|
101
|
+
import deepCopy from './methods'
|
|
102
|
+
import styleText from './styleText.vue'
|
|
103
|
+
import btnClick from './btnClick.vue'
|
|
104
|
+
import iconButton from './iconButton.vue';
|
|
105
|
+
export default {
|
|
106
|
+
name: 'emc-table',
|
|
107
|
+
components: {
|
|
108
|
+
styleText,
|
|
109
|
+
btnClick,
|
|
110
|
+
iconButton,
|
|
111
|
+
},
|
|
112
|
+
props: {
|
|
113
|
+
// 表格数据
|
|
114
|
+
tableData: {
|
|
115
|
+
reauried: true,
|
|
116
|
+
},
|
|
117
|
+
// 表格列
|
|
118
|
+
columns: {
|
|
119
|
+
required: true,
|
|
120
|
+
},
|
|
121
|
+
// 表格高度
|
|
122
|
+
height: {
|
|
123
|
+
required: false
|
|
124
|
+
},
|
|
125
|
+
// 表格最大高度
|
|
126
|
+
maxHeight: {
|
|
127
|
+
required: false,
|
|
128
|
+
},
|
|
129
|
+
// 是否显示多选框
|
|
130
|
+
selection: {
|
|
131
|
+
required: false,
|
|
132
|
+
},
|
|
133
|
+
// 是否保留多选框
|
|
134
|
+
reserveSelection: {
|
|
135
|
+
type: Boolean,
|
|
136
|
+
default: false
|
|
137
|
+
},
|
|
138
|
+
// 分页
|
|
139
|
+
page: {
|
|
140
|
+
// 分页
|
|
141
|
+
required: false,
|
|
142
|
+
},
|
|
143
|
+
// 是否高亮当前行
|
|
144
|
+
highlightCurrentRow: {
|
|
145
|
+
required: false,
|
|
146
|
+
},
|
|
147
|
+
// 表头样式
|
|
148
|
+
headerCellStyle:{
|
|
149
|
+
required: false,
|
|
150
|
+
default: () => {
|
|
151
|
+
return {
|
|
152
|
+
backgroundColor: "#fff",
|
|
153
|
+
textAlign: "center",
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
// 行数据的key
|
|
158
|
+
rowKey: {
|
|
159
|
+
type: [String,Number],
|
|
160
|
+
default: 'id',
|
|
161
|
+
},
|
|
162
|
+
// 行className回调
|
|
163
|
+
tableRowClassName:{
|
|
164
|
+
type: [Function, String],
|
|
165
|
+
required: false,
|
|
166
|
+
},
|
|
167
|
+
// 展开行的key
|
|
168
|
+
expandRowKeys: {
|
|
169
|
+
type: Array,
|
|
170
|
+
required: false,
|
|
171
|
+
},
|
|
172
|
+
// 嵌套数据的配置选项
|
|
173
|
+
treeProps: {
|
|
174
|
+
type: Object,
|
|
175
|
+
default: () => {
|
|
176
|
+
return {};
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
// 是否默认展开所有行
|
|
180
|
+
defaultExpandAll: {
|
|
181
|
+
default: false,
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
data() {
|
|
185
|
+
return {
|
|
186
|
+
multipleSelection: [],
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
methods: {
|
|
190
|
+
// 列表选中当前行字体加粗
|
|
191
|
+
selectedRowStyle({ row }) {
|
|
192
|
+
const idArr = this.multipleSelection.map(row => row[this.rowKey])
|
|
193
|
+
if (idArr.includes(row[this.rowKey])) {
|
|
194
|
+
return { 'font-weight': '700' }
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
// pageSize 改变时会触发
|
|
198
|
+
handleSizeChange(val) {
|
|
199
|
+
this.$emit('page-size-change', val);
|
|
200
|
+
},
|
|
201
|
+
// // currentPage 改变时会触发
|
|
202
|
+
handleCurrentChange(val) {
|
|
203
|
+
this.$emit('page-change', val);
|
|
204
|
+
},
|
|
205
|
+
// 表格属性回调
|
|
206
|
+
currentChange(val) {
|
|
207
|
+
this.$emit('current-change', val);
|
|
208
|
+
},
|
|
209
|
+
// 排序规则发生变化时会触发
|
|
210
|
+
sortChange(column, prop, order) {
|
|
211
|
+
this.$emit('sort-change', column, prop, order);
|
|
212
|
+
},
|
|
213
|
+
// 手动勾选数据行的checkbox时触发的事件
|
|
214
|
+
select(column, row) {
|
|
215
|
+
let refs = this.$refs.table;
|
|
216
|
+
this.$emit('select', column, row, refs);
|
|
217
|
+
},
|
|
218
|
+
// 选择项发生变化时会触发
|
|
219
|
+
selectionChange(column) {
|
|
220
|
+
this.multipleSelection = column
|
|
221
|
+
this.$emit('selection-change', column);
|
|
222
|
+
},
|
|
223
|
+
|
|
224
|
+
},
|
|
225
|
+
watch: {
|
|
226
|
+
columns: {
|
|
227
|
+
handler: function (val) {
|
|
228
|
+
console.log(this.selection);
|
|
229
|
+
|
|
230
|
+
this.column = deepCopy(val);
|
|
231
|
+
},
|
|
232
|
+
immediate: true,
|
|
233
|
+
deep: true,
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
}
|
|
237
|
+
</script>
|
|
238
|
+
<style lang="less" scoped>
|
|
239
|
+
.table-container {
|
|
240
|
+
background-color: #fff;
|
|
241
|
+
}
|
|
242
|
+
.pagination-layout {
|
|
243
|
+
text-align: right;
|
|
244
|
+
height: 35px;
|
|
245
|
+
}
|
|
246
|
+
</style>
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div style="text-align: left;">
|
|
4
|
+
<el-button
|
|
5
|
+
v-for="btn in btnClickEvent"
|
|
6
|
+
:key="btn.index"
|
|
7
|
+
@click="btnClick(btn, scope.row)"
|
|
8
|
+
:type="btn.type"
|
|
9
|
+
:style="[btn.style]"
|
|
10
|
+
:icon="btn.icon"
|
|
11
|
+
:size="btn.size"
|
|
12
|
+
v-bind="btn"
|
|
13
|
+
>{{ btn.text }}
|
|
14
|
+
</el-button>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: 'btn-click',
|
|
21
|
+
props: ['tableData', 'scope'],
|
|
22
|
+
computed: {
|
|
23
|
+
btnClickEvent() {
|
|
24
|
+
let btnList = []
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
if (typeof this.tableData.bind === 'function') {
|
|
28
|
+
btnList = this.tableData.bind(this.scope.row)
|
|
29
|
+
} else {
|
|
30
|
+
btnList = this.tableData.bind || []
|
|
31
|
+
}
|
|
32
|
+
return btnList.filter(item => !item.showButton || item.showButton(this.scope.row))
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
methods:{
|
|
36
|
+
btnClick(btn, row) {
|
|
37
|
+
if(btn.trigger){
|
|
38
|
+
btn.trigger(Object.assign({}, row), this)
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
</script>
|
|
44
|
+
<style lang="less" scoped>
|
|
45
|
+
.btn-click {
|
|
46
|
+
display: flex;
|
|
47
|
+
// justify-content: space-around;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.br {
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="icon-btn">
|
|
3
|
+
|
|
4
|
+
<div
|
|
5
|
+
v-for="item in iconlist"
|
|
6
|
+
:key="item.id"
|
|
7
|
+
@click="item.callback ? item.callback(scope.row) : null"
|
|
8
|
+
class="icon"
|
|
9
|
+
>
|
|
10
|
+
<el-tooltip class="item" effect="dark" :content="item.tooltipText" placement="top" v-if="item.isTooltip">
|
|
11
|
+
<el-icon :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
|
|
12
|
+
</el-tooltip>
|
|
13
|
+
<el-icon v-else :class="item.isHover ? item.class + ' view-btn' : item.class" :style="[item.style ? setStyle(item.style) : {}]"></el-icon>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
name: 'iconbutton',
|
|
21
|
+
props: {
|
|
22
|
+
tableData: Object,
|
|
23
|
+
scope: Object,
|
|
24
|
+
},
|
|
25
|
+
watch: {
|
|
26
|
+
'scope.row': {
|
|
27
|
+
handler() {
|
|
28
|
+
let that = this;
|
|
29
|
+
let arr = [];
|
|
30
|
+
this.tableData.iconList.forEach((item, index) => {
|
|
31
|
+
if (typeof item.show == 'boolean') {
|
|
32
|
+
if (item.show) {
|
|
33
|
+
arr.push(item);
|
|
34
|
+
}
|
|
35
|
+
} else if (typeof item.show == 'function') {
|
|
36
|
+
if (that.tableData.iconList[index].show(that.scope.row)) {
|
|
37
|
+
arr.push(item);
|
|
38
|
+
}
|
|
39
|
+
} else {
|
|
40
|
+
arr.push(item);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
this.iconlist = arr.filter(item => !item.showButton || item.showButton(that.scope.row)) || [];
|
|
44
|
+
},
|
|
45
|
+
immediate: true,
|
|
46
|
+
deep: true,
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
data() {
|
|
50
|
+
return {
|
|
51
|
+
iconlist: [],
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
methods: {
|
|
55
|
+
setStyle(style) {
|
|
56
|
+
if (typeof style == 'function') return style(this.scope.row);
|
|
57
|
+
else return style;
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
components: {},
|
|
61
|
+
};
|
|
62
|
+
</script>
|
|
63
|
+
|
|
64
|
+
<style lang="less" scoped>
|
|
65
|
+
.icon-btn {
|
|
66
|
+
display: flex;
|
|
67
|
+
justify-content: space-around;
|
|
68
|
+
align-items: center;
|
|
69
|
+
}
|
|
70
|
+
.icon-btn /deep/.icon {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
user-select: none;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
padding: 5px;
|
|
76
|
+
}
|
|
77
|
+
.view-btn {
|
|
78
|
+
&:hover {
|
|
79
|
+
color: #409eff !important;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// 深拷贝
|
|
2
|
+
export default function deepCopy(obj, hash = new WeakMap()) {
|
|
3
|
+
// 处理 null、undefined 和非对象类型（如数字、字符串、布尔值等）
|
|
4
|
+
if (obj === null || typeof obj !== 'object') {
|
|
5
|
+
return obj;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
// 处理循环引用
|
|
9
|
+
if (hash.has(obj)) {
|
|
10
|
+
return hash.get(obj);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// 处理 Date 对象
|
|
14
|
+
if (obj instanceof Date) {
|
|
15
|
+
return new Date(obj);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// 处理 Array 对象
|
|
19
|
+
if (Array.isArray(obj)) {
|
|
20
|
+
const copy = [];
|
|
21
|
+
hash.set(obj, copy);
|
|
22
|
+
for (let i = 0; i < obj.length; i++) {
|
|
23
|
+
copy[i] = deepCopy(obj[i], hash);
|
|
24
|
+
}
|
|
25
|
+
return copy;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// 处理普通对象
|
|
29
|
+
const copy = {};
|
|
30
|
+
hash.set(obj, copy);
|
|
31
|
+
for (const key in obj) {
|
|
32
|
+
if (obj.hasOwnProperty(key)) {
|
|
33
|
+
copy[key] = deepCopy(obj[key], hash);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// 处理 Map 和 Set 对象（可选）
|
|
38
|
+
if (obj instanceof Map) {
|
|
39
|
+
const copy = new Map();
|
|
40
|
+
hash.set(obj, copy);
|
|
41
|
+
obj.forEach((value, key) => {
|
|
42
|
+
copy.set(deepCopy(key, hash), deepCopy(value, hash));
|
|
43
|
+
});
|
|
44
|
+
return copy;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
if (obj instanceof Set) {
|
|
48
|
+
const copy = new Set();
|
|
49
|
+
hash.set(obj, copy);
|
|
50
|
+
obj.forEach(value => {
|
|
51
|
+
copy.add(deepCopy(value, hash));
|
|
52
|
+
});
|
|
53
|
+
return copy;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// 处理其他类型的对象（如自定义对象、TypedArray 等）可能需要额外的逻辑
|
|
57
|
+
// 这里默认返回空对象或基本类型的值（如果上述条件都不满足）
|
|
58
|
+
return copy;
|
|
59
|
+
}
|