gyyg-components 0.1.13 → 0.1.14
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/GyygModal/GyygModal.vue +333 -332
- package/src/components/GyygTable/GyygTable.vue +82 -82
- package/src/main.js +17 -17
- package/vue.config.js +24 -24
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
/** el-table组件 */
|
|
2
|
-
<template>
|
|
3
|
-
<el-table class='simpleTableClass' ref="simpleTableRef" :data="data" :row-key="rowKey" :row-style="selectedRowStyle" highlight-current-row element-loading-text="加载中" @selection-change="handleSelectionChange" :height='height' @row-click="clickOne" border style="width: 100%">
|
|
4
|
-
<slot name="content" />
|
|
5
|
-
</el-table>
|
|
6
|
-
</template>
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
export default {
|
|
10
|
-
name:'GyygTable',
|
|
11
|
-
data() {
|
|
12
|
-
return {
|
|
13
|
-
simpleMultipleSelection:this.multipleSelection
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
props: {
|
|
17
|
-
//列表数据
|
|
18
|
-
data: {
|
|
19
|
-
type: Array,
|
|
20
|
-
default: () =>{
|
|
21
|
-
return []
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
//行的唯一标识
|
|
25
|
-
rowKey: {
|
|
26
|
-
type: [String,Number],
|
|
27
|
-
default: 'id',
|
|
28
|
-
},
|
|
29
|
-
//选择的行
|
|
30
|
-
multipleSelection: {
|
|
31
|
-
type: Array,
|
|
32
|
-
default: () =>{
|
|
33
|
-
return []
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
// 高度
|
|
37
|
-
height: {
|
|
38
|
-
type: [String,Number],
|
|
39
|
-
default: '100%',
|
|
40
|
-
},
|
|
41
|
-
// 点击单行,是否只选中当前行
|
|
42
|
-
toggleRow: {
|
|
43
|
-
type: Boolean,
|
|
44
|
-
default: true,
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
methods: {
|
|
48
|
-
// 列表选中加粗
|
|
49
|
-
selectedRowStyle({ row }) {
|
|
50
|
-
const idArr = this.simpleMultipleSelection.map(row => row[this.rowKey])
|
|
51
|
-
if (idArr.includes(row[this.rowKey])) {
|
|
52
|
-
return { 'font-weight': '700' }
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
// 列表选中的当前行
|
|
56
|
-
handleSelectionChange(row) {
|
|
57
|
-
this.simpleMultipleSelection = row
|
|
58
|
-
this.$emit('update:multipleSelection',this.simpleMultipleSelection)
|
|
59
|
-
this.$emit('selectionChange',row)
|
|
60
|
-
this.$emit('selection-change',row)
|
|
61
|
-
},
|
|
62
|
-
// 选中单条数据
|
|
63
|
-
clickOne(row) {
|
|
64
|
-
if(this.toggleRow){
|
|
65
|
-
this.$refs.simpleTableRef.clearSelection()
|
|
66
|
-
this.$refs.simpleTableRef.toggleRowSelection(row)
|
|
67
|
-
this.$emit('rowClick',row)
|
|
68
|
-
this.$emit('row-click',row)
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
}
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
<style>
|
|
76
|
-
.simpleTableClass thead tr th {
|
|
77
|
-
background-color:#F5F7FA !important;
|
|
78
|
-
}
|
|
79
|
-
.simpleTableClass td.el-table__cell{
|
|
80
|
-
border-right:none;
|
|
81
|
-
}
|
|
82
|
-
</style>
|
|
1
|
+
/** el-table组件 */
|
|
2
|
+
<template>
|
|
3
|
+
<el-table class='simpleTableClass' ref="simpleTableRef" :data="data" :row-key="rowKey" :row-style="selectedRowStyle" highlight-current-row element-loading-text="加载中" @selection-change="handleSelectionChange" :height='height' @row-click="clickOne" border style="width: 100%">
|
|
4
|
+
<slot name="content" />
|
|
5
|
+
</el-table>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
export default {
|
|
10
|
+
name:'GyygTable',
|
|
11
|
+
data() {
|
|
12
|
+
return {
|
|
13
|
+
simpleMultipleSelection:this.multipleSelection
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
props: {
|
|
17
|
+
//列表数据
|
|
18
|
+
data: {
|
|
19
|
+
type: Array,
|
|
20
|
+
default: () =>{
|
|
21
|
+
return []
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
//行的唯一标识
|
|
25
|
+
rowKey: {
|
|
26
|
+
type: [String,Number],
|
|
27
|
+
default: 'id',
|
|
28
|
+
},
|
|
29
|
+
//选择的行
|
|
30
|
+
multipleSelection: {
|
|
31
|
+
type: Array,
|
|
32
|
+
default: () =>{
|
|
33
|
+
return []
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
// 高度
|
|
37
|
+
height: {
|
|
38
|
+
type: [String,Number],
|
|
39
|
+
default: '100%',
|
|
40
|
+
},
|
|
41
|
+
// 点击单行,是否只选中当前行
|
|
42
|
+
toggleRow: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: true,
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
methods: {
|
|
48
|
+
// 列表选中加粗
|
|
49
|
+
selectedRowStyle({ row }) {
|
|
50
|
+
const idArr = this.simpleMultipleSelection.map(row => row[this.rowKey])
|
|
51
|
+
if (idArr.includes(row[this.rowKey])) {
|
|
52
|
+
return { 'font-weight': '700' }
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
// 列表选中的当前行
|
|
56
|
+
handleSelectionChange(row) {
|
|
57
|
+
this.simpleMultipleSelection = row
|
|
58
|
+
this.$emit('update:multipleSelection',this.simpleMultipleSelection)
|
|
59
|
+
this.$emit('selectionChange',row)
|
|
60
|
+
this.$emit('selection-change',row)
|
|
61
|
+
},
|
|
62
|
+
// 选中单条数据
|
|
63
|
+
clickOne(row) {
|
|
64
|
+
if(this.toggleRow){
|
|
65
|
+
this.$refs.simpleTableRef.clearSelection()
|
|
66
|
+
this.$refs.simpleTableRef.toggleRowSelection(row)
|
|
67
|
+
this.$emit('rowClick',row)
|
|
68
|
+
this.$emit('row-click',row)
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
}
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
<style>
|
|
76
|
+
.simpleTableClass thead tr th {
|
|
77
|
+
background-color:#F5F7FA !important;
|
|
78
|
+
}
|
|
79
|
+
.simpleTableClass td.el-table__cell{
|
|
80
|
+
border-right:none;
|
|
81
|
+
}
|
|
82
|
+
</style>
|
package/src/main.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import Vue from 'vue'
|
|
2
|
-
import App from './App.vue'
|
|
3
|
-
|
|
4
|
-
Vue.config.productionTip = false
|
|
5
|
-
import { Dialog,Button,Pagination,Input,Table,TableColumn } from 'element-ui';
|
|
6
|
-
Vue.use(Dialog)
|
|
7
|
-
Vue.use(Button)
|
|
8
|
-
Vue.use(Pagination)
|
|
9
|
-
Vue.use(Input)
|
|
10
|
-
Vue.use(Table)
|
|
11
|
-
Vue.use(TableColumn)
|
|
12
|
-
import zj from '@/index.js'
|
|
13
|
-
Vue.use(zj)
|
|
14
|
-
import "./icons"; // icon
|
|
15
|
-
new Vue({
|
|
16
|
-
render: h => h(App),
|
|
17
|
-
}).$mount('#app')
|
|
1
|
+
import Vue from 'vue'
|
|
2
|
+
import App from './App.vue'
|
|
3
|
+
|
|
4
|
+
Vue.config.productionTip = false
|
|
5
|
+
import { Dialog,Button,Pagination,Input,Table,TableColumn } from 'element-ui';
|
|
6
|
+
Vue.use(Dialog)
|
|
7
|
+
Vue.use(Button)
|
|
8
|
+
Vue.use(Pagination)
|
|
9
|
+
Vue.use(Input)
|
|
10
|
+
Vue.use(Table)
|
|
11
|
+
Vue.use(TableColumn)
|
|
12
|
+
import zj from '@/index.js'
|
|
13
|
+
Vue.use(zj)
|
|
14
|
+
import "./icons"; // icon
|
|
15
|
+
new Vue({
|
|
16
|
+
render: h => h(App),
|
|
17
|
+
}).$mount('#app')
|
package/vue.config.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
const path = require("path");
|
|
2
|
-
function resolve(dir) {
|
|
3
|
-
return path.join(__dirname, dir);
|
|
4
|
-
}
|
|
5
|
-
module.exports = {
|
|
6
|
-
lintOnSave: false,
|
|
7
|
-
chainWebpack: (config) => {
|
|
8
|
-
config.module
|
|
9
|
-
.rule('svg')
|
|
10
|
-
.exclude.add(resolve('src/icons'))
|
|
11
|
-
.end();
|
|
12
|
-
config.module
|
|
13
|
-
.rule('icons')
|
|
14
|
-
.test(/\.svg$/)
|
|
15
|
-
.include.add(resolve('src/icons'))
|
|
16
|
-
.end()
|
|
17
|
-
.use('svg-sprite-loader')
|
|
18
|
-
.loader('svg-sprite-loader')
|
|
19
|
-
.options({
|
|
20
|
-
symbolId: 'icon-[name]'
|
|
21
|
-
})
|
|
22
|
-
.end();
|
|
23
|
-
},
|
|
24
|
-
};
|
|
1
|
+
const path = require("path");
|
|
2
|
+
function resolve(dir) {
|
|
3
|
+
return path.join(__dirname, dir);
|
|
4
|
+
}
|
|
5
|
+
module.exports = {
|
|
6
|
+
lintOnSave: false,
|
|
7
|
+
chainWebpack: (config) => {
|
|
8
|
+
config.module
|
|
9
|
+
.rule('svg')
|
|
10
|
+
.exclude.add(resolve('src/icons'))
|
|
11
|
+
.end();
|
|
12
|
+
config.module
|
|
13
|
+
.rule('icons')
|
|
14
|
+
.test(/\.svg$/)
|
|
15
|
+
.include.add(resolve('src/icons'))
|
|
16
|
+
.end()
|
|
17
|
+
.use('svg-sprite-loader')
|
|
18
|
+
.loader('svg-sprite-loader')
|
|
19
|
+
.options({
|
|
20
|
+
symbolId: 'icon-[name]'
|
|
21
|
+
})
|
|
22
|
+
.end();
|
|
23
|
+
},
|
|
24
|
+
};
|