@timus-networks/theme 1.0.89 → 1.0.91
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/components-js/ThemeForm.vue +70 -28
- package/components-js/ThemeTable.vue +35 -36
- package/components-ts/ThemeForm.vue +71 -28
- package/components-ts/ThemeTable.vue +35 -36
- package/output/main.css +1 -1
- package/package.json +1 -1
|
@@ -19,46 +19,60 @@
|
|
|
19
19
|
</p>
|
|
20
20
|
</div>
|
|
21
21
|
<div class="grid grid-flow-col">
|
|
22
|
-
<el-form ref="
|
|
23
|
-
<el-form-item
|
|
24
|
-
<el-
|
|
25
|
-
<el-input-number size="mini" class="grow" controls-position="right" :min="8" :max="10" v-model="count"> </el-input-number>
|
|
22
|
+
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" :label-position="labelPosition">
|
|
23
|
+
<el-form-item label="Activity name" prop="name">
|
|
24
|
+
<el-input v-model="ruleForm.name" />
|
|
26
25
|
</el-form-item>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<el-form-item label="Aktivite Bölgesi">
|
|
33
|
-
<el-select v-model="form.region" placeholder="Lütfen bölgenizi seçin" class="w-full">
|
|
34
|
-
<el-option label="Bölge Bir" value="shanghai"></el-option>
|
|
35
|
-
<el-option label="Bölge İki" value="beijing"></el-option>
|
|
26
|
+
<el-form-item label="Activity zone" prop="region">
|
|
27
|
+
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
|
28
|
+
<el-option label="Zone one" value="shanghai" />
|
|
29
|
+
<el-option label="Zone two" value="beijing" />
|
|
36
30
|
</el-select>
|
|
37
31
|
</el-form-item>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
<el-form-item label="Activity time" required>
|
|
33
|
+
<el-col :span="11">
|
|
34
|
+
<el-form-item prop="date1">
|
|
35
|
+
<el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
|
36
|
+
</el-form-item>
|
|
37
|
+
</el-col>
|
|
38
|
+
<el-col class="line" :span="2">-</el-col>
|
|
39
|
+
<el-col :span="11">
|
|
40
|
+
<el-form-item prop="date2">
|
|
41
|
+
<el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
|
|
42
|
+
</el-form-item>
|
|
43
|
+
</el-col>
|
|
42
44
|
</el-form-item>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
<el-form-item label="Instant delivery" prop="delivery">
|
|
46
|
+
<el-switch v-model="ruleForm.delivery" />
|
|
47
|
+
</el-form-item>
|
|
48
|
+
<el-form-item label="Activity type" prop="type">
|
|
49
|
+
<el-checkbox-group v-model="ruleForm.type">
|
|
50
|
+
<el-checkbox label="Online activities" name="type" />
|
|
51
|
+
<el-checkbox label="Promotion activities" name="type" />
|
|
52
|
+
<el-checkbox label="Offline activities" name="type" />
|
|
53
|
+
<el-checkbox label="Simple brand exposure" name="type" />
|
|
54
|
+
</el-checkbox-group>
|
|
55
|
+
</el-form-item>
|
|
56
|
+
<el-form-item label="Resources" prop="resource">
|
|
57
|
+
<el-radio-group v-model="ruleForm.resource">
|
|
58
|
+
<el-radio label="Sponsorship" />
|
|
59
|
+
<el-radio label="Venue" />
|
|
48
60
|
</el-radio-group>
|
|
49
61
|
</el-form-item>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
<el-form-item label="Activity form" prop="desc">
|
|
63
|
+
<el-input v-model="ruleForm.desc" type="textarea" />
|
|
64
|
+
</el-form-item>
|
|
65
|
+
<el-form-item>
|
|
66
|
+
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
|
|
67
|
+
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
|
54
68
|
</el-form-item>
|
|
55
69
|
</el-form>
|
|
56
70
|
</div>
|
|
57
71
|
</section>
|
|
58
72
|
|
|
59
73
|
<el-descriptions title="User Info" :column="4" colon="false">
|
|
60
|
-
<el-description-item label="Username"
|
|
61
|
-
<el-description-item label="Username"
|
|
74
|
+
<el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
|
|
75
|
+
<el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
|
|
62
76
|
</el-descriptions>
|
|
63
77
|
</div>
|
|
64
78
|
</template>
|
|
@@ -78,6 +92,28 @@ export default Vue.extend({
|
|
|
78
92
|
type: [],
|
|
79
93
|
resource: '',
|
|
80
94
|
},
|
|
95
|
+
ruleForm: {
|
|
96
|
+
name: '',
|
|
97
|
+
region: '',
|
|
98
|
+
date1: '',
|
|
99
|
+
date2: '',
|
|
100
|
+
delivery: false,
|
|
101
|
+
type: [],
|
|
102
|
+
resource: '',
|
|
103
|
+
desc: '',
|
|
104
|
+
},
|
|
105
|
+
rules: {
|
|
106
|
+
name: [
|
|
107
|
+
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
108
|
+
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
109
|
+
],
|
|
110
|
+
region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
|
|
111
|
+
date1: [{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }],
|
|
112
|
+
date2: [{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }],
|
|
113
|
+
type: [{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }],
|
|
114
|
+
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
|
115
|
+
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
|
|
116
|
+
},
|
|
81
117
|
};
|
|
82
118
|
},
|
|
83
119
|
methods: {
|
|
@@ -88,6 +124,12 @@ export default Vue.extend({
|
|
|
88
124
|
onSubmit() {
|
|
89
125
|
console.log('submit!');
|
|
90
126
|
},
|
|
127
|
+
submitForm(formName) {
|
|
128
|
+
console.log('submit');
|
|
129
|
+
},
|
|
130
|
+
resetForm(formName) {
|
|
131
|
+
console.log('reset');
|
|
132
|
+
},
|
|
91
133
|
},
|
|
92
134
|
});
|
|
93
135
|
</script>
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
<div class="grid flex-column">
|
|
10
10
|
<div class="table-container mb-4">
|
|
11
11
|
<el-table
|
|
12
|
+
ref="multipleTable"
|
|
12
13
|
:data="tableData"
|
|
13
14
|
:default-sort="{ prop: 'date', order: 'descending' }"
|
|
14
|
-
@selection-change="handleSelectionChange"
|
|
15
|
-
ref="multipleTable"
|
|
16
15
|
height="360px"
|
|
17
16
|
style="width: 100%"
|
|
17
|
+
@selection-change="handleSelectionChange"
|
|
18
18
|
>
|
|
19
|
-
<el-table-column type="selection" width="
|
|
19
|
+
<el-table-column type="selection" width="16" />
|
|
20
20
|
<el-table-column
|
|
21
21
|
fixed
|
|
22
22
|
prop="date"
|
|
@@ -30,10 +30,9 @@
|
|
|
30
30
|
{ text: '2016-05-04', value: '2016-05-04' },
|
|
31
31
|
]"
|
|
32
32
|
:filter-method="filterHandler"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<el-table-column prop="
|
|
36
|
-
<el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
|
|
33
|
+
/>
|
|
34
|
+
<el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
|
|
35
|
+
<el-table-column prop="address" label="Address" :formatter="formatter" />
|
|
37
36
|
<el-table-column
|
|
38
37
|
prop="tag"
|
|
39
38
|
label="Tag"
|
|
@@ -44,30 +43,28 @@
|
|
|
44
43
|
]"
|
|
45
44
|
:filter-method="filterTag"
|
|
46
45
|
filter-placement="top-start"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<el-table-column prop="
|
|
50
|
-
<el-table-column prop="
|
|
51
|
-
<el-table-column prop="
|
|
52
|
-
<el-table-column prop="
|
|
53
|
-
<el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
|
|
46
|
+
/>
|
|
47
|
+
<el-table-column prop="name" label="Name" width="120" />
|
|
48
|
+
<el-table-column prop="state" label="State" width="120" />
|
|
49
|
+
<el-table-column prop="city" label="City" width="120" />
|
|
50
|
+
<el-table-column prop="address" label="Address" width="300" />
|
|
51
|
+
<el-table-column prop="zip" label="Zip" width="120" />
|
|
54
52
|
<el-table-column fixed="right" label="Operations" width="120">
|
|
55
|
-
<template
|
|
56
|
-
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
|
|
53
|
+
<template #default="scope">
|
|
54
|
+
<el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
|
|
57
55
|
</template>
|
|
58
56
|
</el-table-column>
|
|
59
57
|
</el-table>
|
|
60
58
|
</div>
|
|
61
59
|
<el-pagination
|
|
62
|
-
|
|
63
|
-
@current-change="handleCurrentChange"
|
|
64
|
-
:current-page.sync="currentPage4"
|
|
60
|
+
v-model:current-page="currentPage4"
|
|
65
61
|
:page-sizes="[100, 200, 300, 400]"
|
|
66
62
|
:page-size="100"
|
|
67
63
|
layout="total, prev, pager, next, jumper, sizes"
|
|
68
64
|
:total="400"
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
@size-change="handleSizeChange"
|
|
66
|
+
@current-change="handleCurrentChange"
|
|
67
|
+
/>
|
|
71
68
|
</div>
|
|
72
69
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
73
70
|
<p class="text-xs">
|
|
@@ -90,15 +87,15 @@
|
|
|
90
87
|
<div class="table-container mb-4">
|
|
91
88
|
<el-table :data="tableData" style="width: 100%">
|
|
92
89
|
<el-table-column type="expand">
|
|
93
|
-
<template
|
|
90
|
+
<template #default="props">
|
|
94
91
|
<p>State: {{ props.row.state }}</p>
|
|
95
92
|
<p>City: {{ props.row.city }}</p>
|
|
96
93
|
<p>Address: {{ props.row.address }}</p>
|
|
97
94
|
<p>Zip: {{ props.row.zip }}</p>
|
|
98
95
|
</template>
|
|
99
96
|
</el-table-column>
|
|
100
|
-
<el-table-column label="Date" prop="date"
|
|
101
|
-
<el-table-column label="Name" prop="name"
|
|
97
|
+
<el-table-column label="Date" prop="date" />
|
|
98
|
+
<el-table-column label="Name" prop="name" />
|
|
102
99
|
</el-table>
|
|
103
100
|
</div>
|
|
104
101
|
</div>
|
|
@@ -119,17 +116,6 @@ import Vue from 'vue';
|
|
|
119
116
|
|
|
120
117
|
export default Vue.extend({
|
|
121
118
|
name: 'ThemeTable',
|
|
122
|
-
computed: {
|
|
123
|
-
gridSize() {
|
|
124
|
-
const grids = {
|
|
125
|
-
5: 'grid-cols-5',
|
|
126
|
-
6: 'grid-cols-6',
|
|
127
|
-
7: 'grid-cols-7',
|
|
128
|
-
8: 'grid-cols-8',
|
|
129
|
-
};
|
|
130
|
-
return grids;
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
119
|
data() {
|
|
134
120
|
return {
|
|
135
121
|
multipleSelection: [],
|
|
@@ -204,6 +190,18 @@ export default Vue.extend({
|
|
|
204
190
|
],
|
|
205
191
|
};
|
|
206
192
|
},
|
|
193
|
+
computed: {
|
|
194
|
+
gridSize() {
|
|
195
|
+
const grids = {
|
|
196
|
+
5: 'grid-cols-5',
|
|
197
|
+
6: 'grid-cols-6',
|
|
198
|
+
7: 'grid-cols-7',
|
|
199
|
+
8: 'grid-cols-8',
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
return grids;
|
|
203
|
+
},
|
|
204
|
+
},
|
|
207
205
|
methods: {
|
|
208
206
|
toggleSelection(rows) {
|
|
209
207
|
if (rows) {
|
|
@@ -231,7 +229,8 @@ export default Vue.extend({
|
|
|
231
229
|
},
|
|
232
230
|
filterHandler(value, row, column) {
|
|
233
231
|
console.log(row, column, value);
|
|
234
|
-
const property = column
|
|
232
|
+
const { property } = column;
|
|
233
|
+
|
|
235
234
|
return row[property] === value;
|
|
236
235
|
},
|
|
237
236
|
handleSizeChange(val) {
|
|
@@ -19,51 +19,66 @@
|
|
|
19
19
|
</p>
|
|
20
20
|
</div>
|
|
21
21
|
<div class="grid grid-flow-col">
|
|
22
|
-
<el-form ref="
|
|
23
|
-
<el-form-item
|
|
24
|
-
<el-
|
|
25
|
-
<el-input-number size="mini" class="grow" controls-position="right" :min="8" :max="10" v-model="count"> </el-input-number>
|
|
22
|
+
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" :label-position="labelPosition">
|
|
23
|
+
<el-form-item label="Activity name" prop="name">
|
|
24
|
+
<el-input v-model="ruleForm.name" />
|
|
26
25
|
</el-form-item>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<el-form-item label="Aktivite Bölgesi">
|
|
33
|
-
<el-select v-model="form.region" placeholder="Lütfen bölgenizi seçin" class="w-full">
|
|
34
|
-
<el-option label="Bölge Bir" value="shanghai"></el-option>
|
|
35
|
-
<el-option label="Bölge İki" value="beijing"></el-option>
|
|
26
|
+
<el-form-item label="Activity zone" prop="region">
|
|
27
|
+
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
|
28
|
+
<el-option label="Zone one" value="shanghai" />
|
|
29
|
+
<el-option label="Zone two" value="beijing" />
|
|
36
30
|
</el-select>
|
|
37
31
|
</el-form-item>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
32
|
+
<el-form-item label="Activity time" required>
|
|
33
|
+
<el-col :span="11">
|
|
34
|
+
<el-form-item prop="date1">
|
|
35
|
+
<el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date" style="width: 100%" />
|
|
36
|
+
</el-form-item>
|
|
37
|
+
</el-col>
|
|
38
|
+
<el-col class="line" :span="2">-</el-col>
|
|
39
|
+
<el-col :span="11">
|
|
40
|
+
<el-form-item prop="date2">
|
|
41
|
+
<el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%" />
|
|
42
|
+
</el-form-item>
|
|
43
|
+
</el-col>
|
|
42
44
|
</el-form-item>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
<el-form-item label="Instant delivery" prop="delivery">
|
|
46
|
+
<el-switch v-model="ruleForm.delivery" />
|
|
47
|
+
</el-form-item>
|
|
48
|
+
<el-form-item label="Activity type" prop="type">
|
|
49
|
+
<el-checkbox-group v-model="ruleForm.type">
|
|
50
|
+
<el-checkbox label="Online activities" name="type" />
|
|
51
|
+
<el-checkbox label="Promotion activities" name="type" />
|
|
52
|
+
<el-checkbox label="Offline activities" name="type" />
|
|
53
|
+
<el-checkbox label="Simple brand exposure" name="type" />
|
|
54
|
+
</el-checkbox-group>
|
|
55
|
+
</el-form-item>
|
|
56
|
+
<el-form-item label="Resources" prop="resource">
|
|
57
|
+
<el-radio-group v-model="ruleForm.resource">
|
|
58
|
+
<el-radio label="Sponsorship" />
|
|
59
|
+
<el-radio label="Venue" />
|
|
48
60
|
</el-radio-group>
|
|
49
61
|
</el-form-item>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
<el-form-item label="Activity form" prop="desc">
|
|
63
|
+
<el-input v-model="ruleForm.desc" type="textarea" />
|
|
64
|
+
</el-form-item>
|
|
65
|
+
<el-form-item>
|
|
66
|
+
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
|
|
67
|
+
<el-button @click="resetForm('ruleForm')">Reset</el-button>
|
|
54
68
|
</el-form-item>
|
|
55
69
|
</el-form>
|
|
56
70
|
</div>
|
|
57
71
|
</section>
|
|
58
72
|
|
|
59
73
|
<el-descriptions title="User Info" :column="4" colon="false">
|
|
60
|
-
<el-description-item label="Username"
|
|
61
|
-
<el-description-item label="Username"
|
|
74
|
+
<el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
|
|
75
|
+
<el-description-item label="Username" label-class-name="w-28"> Ahmet Polat MacBook Pro, Ahmet Fatih Sez...</el-description-item>
|
|
62
76
|
</el-descriptions>
|
|
63
77
|
</div>
|
|
64
78
|
</template>
|
|
65
79
|
<script lang="ts">
|
|
66
80
|
import Vue from 'vue';
|
|
81
|
+
|
|
67
82
|
const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
|
|
68
83
|
|
|
69
84
|
export default Vue.extend({
|
|
@@ -80,6 +95,28 @@ export default Vue.extend({
|
|
|
80
95
|
type: [],
|
|
81
96
|
resource: '',
|
|
82
97
|
},
|
|
98
|
+
ruleForm: {
|
|
99
|
+
name: '',
|
|
100
|
+
region: '',
|
|
101
|
+
date1: '',
|
|
102
|
+
date2: '',
|
|
103
|
+
delivery: false,
|
|
104
|
+
type: [],
|
|
105
|
+
resource: '',
|
|
106
|
+
desc: '',
|
|
107
|
+
},
|
|
108
|
+
rules: {
|
|
109
|
+
name: [
|
|
110
|
+
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
|
111
|
+
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
|
112
|
+
],
|
|
113
|
+
region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
|
|
114
|
+
date1: [{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }],
|
|
115
|
+
date2: [{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }],
|
|
116
|
+
type: [{ type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }],
|
|
117
|
+
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
|
|
118
|
+
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
|
|
119
|
+
},
|
|
83
120
|
};
|
|
84
121
|
},
|
|
85
122
|
methods: {
|
|
@@ -90,6 +127,12 @@ export default Vue.extend({
|
|
|
90
127
|
onSubmit() {
|
|
91
128
|
console.log('submit!');
|
|
92
129
|
},
|
|
130
|
+
submitForm(formName: any) {
|
|
131
|
+
console.log('submit');
|
|
132
|
+
},
|
|
133
|
+
resetForm(formName: any): void {
|
|
134
|
+
console.log('reset');
|
|
135
|
+
},
|
|
93
136
|
},
|
|
94
137
|
});
|
|
95
138
|
</script>
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
<div class="grid flex-column">
|
|
10
10
|
<div class="table-container mb-4">
|
|
11
11
|
<el-table
|
|
12
|
+
ref="multipleTable"
|
|
12
13
|
:data="tableData"
|
|
13
14
|
:default-sort="{ prop: 'date', order: 'descending' }"
|
|
14
|
-
@selection-change="handleSelectionChange"
|
|
15
|
-
ref="multipleTable"
|
|
16
15
|
height="360px"
|
|
17
16
|
style="width: 100%"
|
|
17
|
+
@selection-change="handleSelectionChange"
|
|
18
18
|
>
|
|
19
|
-
<el-table-column type="selection" width="
|
|
19
|
+
<el-table-column type="selection" width="16" />
|
|
20
20
|
<el-table-column
|
|
21
21
|
fixed
|
|
22
22
|
prop="date"
|
|
@@ -30,10 +30,9 @@
|
|
|
30
30
|
{ text: '2016-05-04', value: '2016-05-04' },
|
|
31
31
|
]"
|
|
32
32
|
:filter-method="filterHandler"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<el-table-column prop="
|
|
36
|
-
<el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
|
|
33
|
+
/>
|
|
34
|
+
<el-table-column prop="name" label="Name" width="60" :show-overflow-tooltip="true" />
|
|
35
|
+
<el-table-column prop="address" label="Address" :formatter="formatter" />
|
|
37
36
|
<el-table-column
|
|
38
37
|
prop="tag"
|
|
39
38
|
label="Tag"
|
|
@@ -44,30 +43,28 @@
|
|
|
44
43
|
]"
|
|
45
44
|
:filter-method="filterTag"
|
|
46
45
|
filter-placement="top-start"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<el-table-column prop="
|
|
50
|
-
<el-table-column prop="
|
|
51
|
-
<el-table-column prop="
|
|
52
|
-
<el-table-column prop="
|
|
53
|
-
<el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
|
|
46
|
+
/>
|
|
47
|
+
<el-table-column prop="name" label="Name" width="120" />
|
|
48
|
+
<el-table-column prop="state" label="State" width="120" />
|
|
49
|
+
<el-table-column prop="city" label="City" width="120" />
|
|
50
|
+
<el-table-column prop="address" label="Address" width="300" />
|
|
51
|
+
<el-table-column prop="zip" label="Zip" width="120" />
|
|
54
52
|
<el-table-column fixed="right" label="Operations" width="120">
|
|
55
|
-
<template
|
|
56
|
-
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
|
|
53
|
+
<template #default="scope">
|
|
54
|
+
<el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)"> Remove </el-button>
|
|
57
55
|
</template>
|
|
58
56
|
</el-table-column>
|
|
59
57
|
</el-table>
|
|
60
58
|
</div>
|
|
61
59
|
<el-pagination
|
|
62
|
-
|
|
63
|
-
@current-change="handleCurrentChange"
|
|
64
|
-
:current-page.sync="currentPage4"
|
|
60
|
+
v-model:current-page="currentPage4"
|
|
65
61
|
:page-sizes="[100, 200, 300, 400]"
|
|
66
62
|
:page-size="100"
|
|
67
63
|
layout="total, prev, pager, next, jumper, sizes"
|
|
68
64
|
:total="400"
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
@size-change="handleSizeChange"
|
|
66
|
+
@current-change="handleCurrentChange"
|
|
67
|
+
/>
|
|
71
68
|
</div>
|
|
72
69
|
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
73
70
|
<p class="text-xs">
|
|
@@ -90,15 +87,15 @@
|
|
|
90
87
|
<div class="table-container mb-4">
|
|
91
88
|
<el-table :data="tableData" style="width: 100%">
|
|
92
89
|
<el-table-column type="expand">
|
|
93
|
-
<template
|
|
90
|
+
<template #default="props">
|
|
94
91
|
<p>State: {{ props.row.state }}</p>
|
|
95
92
|
<p>City: {{ props.row.city }}</p>
|
|
96
93
|
<p>Address: {{ props.row.address }}</p>
|
|
97
94
|
<p>Zip: {{ props.row.zip }}</p>
|
|
98
95
|
</template>
|
|
99
96
|
</el-table-column>
|
|
100
|
-
<el-table-column label="Date" prop="date"
|
|
101
|
-
<el-table-column label="Name" prop="name"
|
|
97
|
+
<el-table-column label="Date" prop="date" />
|
|
98
|
+
<el-table-column label="Name" prop="name" />
|
|
102
99
|
</el-table>
|
|
103
100
|
</div>
|
|
104
101
|
</div>
|
|
@@ -119,17 +116,6 @@ import Vue from 'vue';
|
|
|
119
116
|
|
|
120
117
|
export default Vue.extend({
|
|
121
118
|
name: 'ThemeTable',
|
|
122
|
-
computed: {
|
|
123
|
-
gridSize() {
|
|
124
|
-
const grids = {
|
|
125
|
-
5: 'grid-cols-5',
|
|
126
|
-
6: 'grid-cols-6',
|
|
127
|
-
7: 'grid-cols-7',
|
|
128
|
-
8: 'grid-cols-8',
|
|
129
|
-
};
|
|
130
|
-
return grids;
|
|
131
|
-
},
|
|
132
|
-
},
|
|
133
119
|
data() {
|
|
134
120
|
return {
|
|
135
121
|
multipleSelection: [],
|
|
@@ -204,6 +190,18 @@ export default Vue.extend({
|
|
|
204
190
|
],
|
|
205
191
|
};
|
|
206
192
|
},
|
|
193
|
+
computed: {
|
|
194
|
+
gridSize() {
|
|
195
|
+
const grids = {
|
|
196
|
+
5: 'grid-cols-5',
|
|
197
|
+
6: 'grid-cols-6',
|
|
198
|
+
7: 'grid-cols-7',
|
|
199
|
+
8: 'grid-cols-8',
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
return grids;
|
|
203
|
+
},
|
|
204
|
+
},
|
|
207
205
|
methods: {
|
|
208
206
|
toggleSelection(rows) {
|
|
209
207
|
if (rows) {
|
|
@@ -231,7 +229,8 @@ export default Vue.extend({
|
|
|
231
229
|
},
|
|
232
230
|
filterHandler(value, row, column) {
|
|
233
231
|
console.log(row, column, value);
|
|
234
|
-
const property = column
|
|
232
|
+
const { property } = column;
|
|
233
|
+
|
|
235
234
|
return row[property] === value;
|
|
236
235
|
},
|
|
237
236
|
handleSizeChange(val) {
|