@timus-networks/theme 1.0.23 → 1.0.24
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/ThemeAlert.vue +76 -0
- package/components-js/ThemeAvatar.vue +55 -0
- package/components-js/ThemeBadge.vue +86 -0
- package/components-js/ThemeCascader.vue +337 -0
- package/components-js/ThemeLink.vue +30 -100
- package/components-js/ThemeLogo.vue +57 -0
- package/components-js/ThemeRadio.vue +20 -41
- package/components-js/ThemeTable.vue +228 -194
- package/components-js/TimusSamples.vue +33 -28
- package/components-js/exporter.js +5 -5
- package/components-ts/ThemeAlert.vue +76 -0
- package/components-ts/ThemeAvatar.vue +55 -0
- package/components-ts/ThemeBadge.vue +86 -0
- package/components-ts/ThemeCascader.vue +337 -0
- package/components-ts/ThemeLink.vue +30 -100
- package/components-ts/ThemeLogo.vue +57 -0
- package/components-ts/ThemeRadio.vue +20 -41
- package/components-ts/ThemeTable.vue +228 -194
- package/components-ts/TimusSamples.vue +33 -28
- package/components-ts/exporter.js +5 -5
- package/logo/timus-icon.svg +17 -0
- package/logo/timus-logo.svg +22 -0
- package/module.js +6 -2
- package/output/main.css +1 -1
- package/package.json +40 -40
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Sizes</h1>
|
|
5
|
+
<p class="p-md-c my-6">
|
|
6
|
+
Our logos are available in three sizes: small, medium, and large. To tailor your choice, use the size tags
|
|
7
|
+
<b>'small', 'medium', 'large'</b> to determine the appropriate size for your needs.
|
|
8
|
+
</p>
|
|
9
|
+
<div class="grid grid-flow-col auto-cols-max gap-6 items-center">
|
|
10
|
+
<div class="logo-icon-small"></div>
|
|
11
|
+
<div class="logo-icon-medium"></div>
|
|
12
|
+
<div class="logo-icon-large"></div>
|
|
13
|
+
<el-divider direction="vertical" content-position="center"></el-divider>
|
|
14
|
+
<div class="logo-small"></div>
|
|
15
|
+
<div class="logo-medium"></div>
|
|
16
|
+
<div class="logo-large"></div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
19
|
+
<p class="text-xs">
|
|
20
|
+
<code><div class="logo-medium"></div></code>
|
|
21
|
+
</p>
|
|
22
|
+
</div>
|
|
23
|
+
</section>
|
|
24
|
+
|
|
25
|
+
<section>
|
|
26
|
+
<h1>Types</h1>
|
|
27
|
+
<p class="p-md-c my-6">
|
|
28
|
+
There are two different types of logo usage available: <b>"icon"</b> or <b>"logo"</b>. When used as a <b>"logo"</b>, an additional
|
|
29
|
+
icon along with the word <b>"timus"</b> will be displayed.
|
|
30
|
+
</p>
|
|
31
|
+
<div class="grid grid-flow-col auto-cols-max gap-6 items-center">
|
|
32
|
+
<div class="logo-icon-small"></div>
|
|
33
|
+
<el-divider direction="vertical" content-position="center"></el-divider>
|
|
34
|
+
<div class="logo-small"></div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
37
|
+
<p class="text-xs">
|
|
38
|
+
<code><div class="logo-icon-medium"></div> | <div class="logo-medium"></div></code>
|
|
39
|
+
</p>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
44
|
+
|
|
45
|
+
<script>
|
|
46
|
+
import Vue from 'vue';
|
|
47
|
+
|
|
48
|
+
export default Vue.extend({
|
|
49
|
+
name: 'TimusCascader',
|
|
50
|
+
data() {
|
|
51
|
+
return {
|
|
52
|
+
url: 'https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Princess',
|
|
53
|
+
sizeList: ['xlarge', 'large', 'medium', 'small', 'xsmall'],
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
</script>
|
|
@@ -3,63 +3,42 @@
|
|
|
3
3
|
<h1>Radio</h1>
|
|
4
4
|
|
|
5
5
|
<section>
|
|
6
|
-
<h2>
|
|
7
|
-
<p class="p-lg-c my-6">
|
|
6
|
+
<h2>Temel Kullanım</h2>
|
|
7
|
+
<p class="p-lg-c my-6">El Radio, çok fazla seçeneğe sahip olmamalıdır. Aksi takdirde, Select bileşenini kullanmalısınız.</p>
|
|
8
8
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
9
|
-
<el-radio v-model="radio" :label="0">
|
|
10
|
-
<el-radio v-model="radio" :label="1">
|
|
11
|
-
<el-radio v-model="radio" :label="2" disabled>
|
|
12
|
-
<el-radio :value="false" disabled>
|
|
9
|
+
<el-radio v-model="radio" :label="0">Seçenek A</el-radio>
|
|
10
|
+
<el-radio v-model="radio" :label="1">Seçenek B</el-radio>
|
|
11
|
+
<el-radio v-model="radio" :label="2" disabled>Seçenek C (Devre Dışı)</el-radio>
|
|
12
|
+
<el-radio :value="false" disabled>Seçili Olmayan ve Devre Dışı</el-radio>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
15
15
|
<p class="text-xs">
|
|
16
|
-
|
|
16
|
+
Örnek Kullanım:
|
|
17
|
+
<code> <el-radio :value="true" disabled>Seçili & Devre Dışı</el-radio> </code>
|
|
17
18
|
</p>
|
|
18
19
|
</div>
|
|
19
20
|
</section>
|
|
20
21
|
|
|
21
22
|
<section>
|
|
22
|
-
<h2>
|
|
23
|
+
<h2>Radio group</h2>
|
|
23
24
|
<p class="p-lg-c my-6">
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
`el-radio-group` ile `el-radio` bileşenini bir araya getirerek bir radyo grubu görüntüleyebilirsiniz. el-radio-group elementinin v-model ile
|
|
26
|
+
bağlı olduğu bir değişkeni belirleyin ve el-radio içindeki etiket değerini ayarlayın. Ayrıca, mevcut değeri parametre olarak alan bir
|
|
27
|
+
değişiklik olayı sağlar.
|
|
26
28
|
</p>
|
|
27
29
|
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
28
|
-
<el-
|
|
29
|
-
<el-
|
|
30
|
-
<el-
|
|
31
|
-
<el-
|
|
32
|
-
|
|
33
|
-
<el-checkbox label="selected and disabled" disabled></el-checkbox>
|
|
34
|
-
</el-checkbox-group>
|
|
30
|
+
<el-radio-group v-model="radio">
|
|
31
|
+
<el-radio :label="3">Seçenek A</el-radio>
|
|
32
|
+
<el-radio :label="6">Seçenek B</el-radio>
|
|
33
|
+
<el-radio :label="9">Seçenek C</el-radio>
|
|
34
|
+
</el-radio-group>
|
|
35
35
|
</div>
|
|
36
36
|
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
37
37
|
<p class="text-xs">
|
|
38
|
+
Örnek Kullanım:
|
|
38
39
|
<code>
|
|
39
|
-
<el-
|
|
40
|
-
B
|
|
41
|
-
</code>
|
|
42
|
-
</p>
|
|
43
|
-
</div>
|
|
44
|
-
</section>
|
|
45
|
-
|
|
46
|
-
<section>
|
|
47
|
-
<h2>Indeterminate</h2>
|
|
48
|
-
<p class="p-lg-c my-6">
|
|
49
|
-
Belirsiz durum (indeterminate) checkbox, tüm seçeneklerin seçili olup olmadığını belirsiz bırakır. Bu durum, özellikle kullanıcının bir grup
|
|
50
|
-
içerisindeki tüm seçenekleri aynı anda kontrol etmesini sağlamak için kullanışlıdır.
|
|
51
|
-
</p>
|
|
52
|
-
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
53
|
-
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Check all</el-checkbox>
|
|
54
|
-
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
55
|
-
<el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
|
|
56
|
-
</el-checkbox-group>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="my-4 p-4 border-l-4 border-info-600 bg-info-100">
|
|
59
|
-
<p class="text-xs">
|
|
60
|
-
<code>
|
|
61
|
-
<el-date-picker v-model="input" type="daterange" align="left" start-placeholder="Start" end-placeholder="End"
|
|
62
|
-
default-value=""></el-date-picker>
|
|
40
|
+
<el-radio-group v-model="radio"> <el-radio :label="3">Seçenek A</el-radio> <el-radio :label="6">Seçenek
|
|
41
|
+
B</el-radio> </el-radio-group>
|
|
63
42
|
</code>
|
|
64
43
|
</p>
|
|
65
44
|
</div>
|
|
@@ -1,211 +1,245 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
2
|
+
<div class="pt-8 pb-16 flex gap-12 flex-col">
|
|
3
|
+
<section>
|
|
4
|
+
<h1>Fixed Height</h1>
|
|
5
|
+
<p class="p-md-c my-6">
|
|
6
|
+
This example demonstrates the basic usage of creating a data table using the `el-table` component provided by Element UI. Please note
|
|
7
|
+
that the outer border is applied with `table-container`.
|
|
8
|
+
</p>
|
|
9
|
+
<div class="grid flex-column">
|
|
10
|
+
<div class="table-container mb-4">
|
|
11
|
+
<el-table
|
|
12
|
+
:data="tableData"
|
|
13
|
+
:default-sort="{ prop: 'date', order: 'descending' }"
|
|
14
|
+
@selection-change="handleSelectionChange"
|
|
15
|
+
ref="multipleTable"
|
|
16
|
+
height="360px"
|
|
17
|
+
style="width: 100%"
|
|
18
|
+
>
|
|
19
|
+
<el-table-column type="selection" width="55"> </el-table-column>
|
|
20
|
+
<el-table-column
|
|
21
|
+
fixed
|
|
22
|
+
prop="date"
|
|
23
|
+
label="Date"
|
|
24
|
+
sortable
|
|
25
|
+
column-key="date"
|
|
26
|
+
:filters="[
|
|
27
|
+
{ text: '2016-05-01', value: '2016-05-01' },
|
|
28
|
+
{ text: '2016-05-02', value: '2016-05-02' },
|
|
29
|
+
{ text: '2016-05-03', value: '2016-05-03' },
|
|
30
|
+
{ text: '2016-05-04', value: '2016-05-04' },
|
|
31
|
+
]"
|
|
32
|
+
:filter-method="filterHandler"
|
|
33
|
+
>
|
|
34
|
+
</el-table-column>
|
|
35
|
+
<el-table-column prop="name" label="Name" width="180"> </el-table-column>
|
|
36
|
+
<el-table-column prop="address" label="Address" :formatter="formatter"> </el-table-column>
|
|
37
|
+
<el-table-column
|
|
38
|
+
prop="tag"
|
|
39
|
+
label="Tag"
|
|
40
|
+
:filters="[
|
|
41
|
+
{ text: 'Home', value: 'Home' },
|
|
42
|
+
{ text: 'Office', value: 'Office' },
|
|
43
|
+
{ text: 'Potato', value: 'Potato' },
|
|
44
|
+
]"
|
|
45
|
+
:filter-method="filterTag"
|
|
46
|
+
filter-placement="top-start"
|
|
47
|
+
>
|
|
48
|
+
</el-table-column>
|
|
49
|
+
<el-table-column prop="name" label="Name" width="120"> </el-table-column>
|
|
50
|
+
<el-table-column prop="state" label="State" width="120"> </el-table-column>
|
|
51
|
+
<el-table-column prop="city" label="City" width="120"> </el-table-column>
|
|
52
|
+
<el-table-column prop="address" label="Address" width="300"> </el-table-column>
|
|
53
|
+
<el-table-column prop="zip" label="Zip" width="120"> </el-table-column>
|
|
54
|
+
<el-table-column fixed="right" label="Operations" width="120">
|
|
55
|
+
<template slot-scope="scope">
|
|
56
|
+
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> Remove </el-button>
|
|
57
|
+
</template>
|
|
58
|
+
</el-table-column>
|
|
59
|
+
</el-table>
|
|
60
|
+
</div>
|
|
61
|
+
<el-pagination
|
|
62
|
+
@size-change="handleSizeChange"
|
|
63
|
+
@current-change="handleCurrentChange"
|
|
64
|
+
:current-page.sync="currentPage4"
|
|
65
|
+
:page-sizes="[100, 200, 300, 400]"
|
|
66
|
+
:page-size="100"
|
|
67
|
+
layout="total, prev, pager, next, jumper, sizes"
|
|
68
|
+
:total="400"
|
|
69
|
+
>
|
|
70
|
+
</el-pagination>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
73
|
+
<p class="text-xs">
|
|
74
|
+
<code>
|
|
75
|
+
<div class="table-container"><el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending'
|
|
76
|
+
}"></el-table></div>
|
|
77
|
+
</code>
|
|
78
|
+
</p>
|
|
79
|
+
</div>
|
|
80
|
+
</section>
|
|
81
|
+
|
|
82
|
+
<section>
|
|
83
|
+
<h1>Expandable Row</h1>
|
|
84
|
+
<p class="p-md-c my-6">
|
|
85
|
+
When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.
|
|
86
|
+
Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of
|
|
87
|
+
the expanded row, and you can access the same attributes as when you are using Scoped slot in custom column templates.
|
|
88
|
+
</p>
|
|
89
|
+
<div class="grid grid-flow-col auto-cols-max gap-4">
|
|
90
|
+
<div class="table-container mb-4">
|
|
91
|
+
<el-table :data="tableData" style="width: 100%">
|
|
92
|
+
<el-table-column type="expand">
|
|
93
|
+
<template slot-scope="props">
|
|
94
|
+
<p>State: {{ props.row.state }}</p>
|
|
95
|
+
<p>City: {{ props.row.city }}</p>
|
|
96
|
+
<p>Address: {{ props.row.address }}</p>
|
|
97
|
+
<p>Zip: {{ props.row.zip }}</p>
|
|
98
|
+
</template>
|
|
99
|
+
</el-table-column>
|
|
100
|
+
<el-table-column label="Date" prop="date"> </el-table-column>
|
|
101
|
+
<el-table-column label="Name" prop="name"> </el-table-column>
|
|
102
|
+
</el-table>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="my-4 p-4 border-l-4 border-blue-600 bg-blue-100">
|
|
106
|
+
<p class="text-xs">
|
|
107
|
+
<code>
|
|
108
|
+
<el-table :data="tableData"> <el-table-column type="expand"> <template v-slot="props"> <p>State: {
|
|
109
|
+
props.row.state } </p> </template> </el-table-column> </el-table>
|
|
110
|
+
</code>
|
|
111
|
+
</p>
|
|
112
|
+
</div>
|
|
113
|
+
</section>
|
|
114
|
+
</div>
|
|
82
115
|
</template>
|
|
116
|
+
|
|
83
117
|
<script>
|
|
84
118
|
import Vue from 'vue';
|
|
85
119
|
|
|
86
120
|
export default Vue.extend({
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
121
|
+
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
|
+
data() {
|
|
134
|
+
return {
|
|
135
|
+
multipleSelection: [],
|
|
136
|
+
currentPage1: 5,
|
|
137
|
+
currentPage2: 5,
|
|
138
|
+
currentPage3: 5,
|
|
139
|
+
currentPage4: 4,
|
|
140
|
+
tableData: [
|
|
141
|
+
{
|
|
142
|
+
date: '2016-05-03',
|
|
143
|
+
name: 'Tom',
|
|
144
|
+
state: 'California',
|
|
145
|
+
city: 'Los Angeles',
|
|
146
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
147
|
+
zip: 'CA 90036',
|
|
148
|
+
tag: 'Home',
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
date: '2016-05-02',
|
|
152
|
+
name: 'Tom',
|
|
153
|
+
state: 'California',
|
|
154
|
+
city: 'Los Angeles',
|
|
155
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
156
|
+
zip: 'CA 90036',
|
|
157
|
+
tag: 'Office',
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
date: '2016-05-04',
|
|
161
|
+
name: 'Tom',
|
|
162
|
+
state: 'California',
|
|
163
|
+
city: 'Los Angeles',
|
|
164
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
165
|
+
zip: 'CA 90036',
|
|
166
|
+
tag: 'Home',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
date: '2016-05-01',
|
|
170
|
+
name: 'Tom',
|
|
171
|
+
state: 'California',
|
|
172
|
+
city: 'Los Angeles',
|
|
173
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
174
|
+
zip: 'CA 90036',
|
|
175
|
+
tag: 'Office',
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
date: '2016-05-08',
|
|
179
|
+
name: 'Tom',
|
|
180
|
+
state: 'California',
|
|
181
|
+
city: 'Los Angeles',
|
|
182
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
183
|
+
zip: 'CA 90036',
|
|
184
|
+
tag: 'Office',
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
date: '2016-05-06',
|
|
188
|
+
name: 'Tom',
|
|
189
|
+
state: 'California',
|
|
190
|
+
city: 'Los Angeles',
|
|
191
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
192
|
+
zip: 'CA 90036',
|
|
193
|
+
tag: 'Home',
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
date: '2016-05-07',
|
|
197
|
+
name: 'Tom',
|
|
198
|
+
state: 'California',
|
|
199
|
+
city: 'Los Angeles',
|
|
200
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
201
|
+
zip: 'CA 90036',
|
|
202
|
+
tag: 'Office',
|
|
203
|
+
},
|
|
204
|
+
],
|
|
205
|
+
};
|
|
97
206
|
},
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
{
|
|
108
|
-
date: '2016-05-03',
|
|
109
|
-
name: 'Tom',
|
|
110
|
-
state: 'California',
|
|
111
|
-
city: 'Los Angeles',
|
|
112
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
113
|
-
zip: 'CA 90036',
|
|
114
|
-
tag: 'Home',
|
|
207
|
+
methods: {
|
|
208
|
+
toggleSelection(rows) {
|
|
209
|
+
if (rows) {
|
|
210
|
+
rows.forEach((row) => {
|
|
211
|
+
this.$refs.multipleTable.toggleRowSelection(row);
|
|
212
|
+
});
|
|
213
|
+
} else {
|
|
214
|
+
this.$refs.multipleTable.clearSelection();
|
|
215
|
+
}
|
|
115
216
|
},
|
|
116
|
-
{
|
|
117
|
-
|
|
118
|
-
name: 'Tom',
|
|
119
|
-
state: 'California',
|
|
120
|
-
city: 'Los Angeles',
|
|
121
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
122
|
-
zip: 'CA 90036',
|
|
123
|
-
tag: 'Office',
|
|
217
|
+
handleSelectionChange(val) {
|
|
218
|
+
this.multipleSelection = val;
|
|
124
219
|
},
|
|
125
|
-
{
|
|
126
|
-
|
|
127
|
-
name: 'Tom',
|
|
128
|
-
state: 'California',
|
|
129
|
-
city: 'Los Angeles',
|
|
130
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
131
|
-
zip: 'CA 90036',
|
|
132
|
-
tag: 'Home',
|
|
220
|
+
resetDateFilter() {
|
|
221
|
+
this.$refs.filterTable.clearFilter('date');
|
|
133
222
|
},
|
|
134
|
-
{
|
|
135
|
-
|
|
136
|
-
name: 'Tom',
|
|
137
|
-
state: 'California',
|
|
138
|
-
city: 'Los Angeles',
|
|
139
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
140
|
-
zip: 'CA 90036',
|
|
141
|
-
tag: 'Office',
|
|
223
|
+
clearFilter() {
|
|
224
|
+
this.$refs.filterTable.clearFilter();
|
|
142
225
|
},
|
|
143
|
-
{
|
|
144
|
-
|
|
145
|
-
name: 'Tom',
|
|
146
|
-
state: 'California',
|
|
147
|
-
city: 'Los Angeles',
|
|
148
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
149
|
-
zip: 'CA 90036',
|
|
150
|
-
tag: 'Office',
|
|
226
|
+
formatter(row, column) {
|
|
227
|
+
return row.address;
|
|
151
228
|
},
|
|
152
|
-
{
|
|
153
|
-
|
|
154
|
-
name: 'Tom',
|
|
155
|
-
state: 'California',
|
|
156
|
-
city: 'Los Angeles',
|
|
157
|
-
address: 'No. 189, Grove St, Los Angeles',
|
|
158
|
-
zip: 'CA 90036',
|
|
159
|
-
tag: 'Home',
|
|
229
|
+
filterTag(value, row) {
|
|
230
|
+
return row.tag === value;
|
|
160
231
|
},
|
|
161
|
-
{
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
232
|
+
filterHandler(value, row, column) {
|
|
233
|
+
console.log(row, column, value);
|
|
234
|
+
const property = column['property'];
|
|
235
|
+
return row[property] === value;
|
|
236
|
+
},
|
|
237
|
+
handleSizeChange(val) {
|
|
238
|
+
console.log(`${val} items per page`);
|
|
239
|
+
},
|
|
240
|
+
handleCurrentChange(val) {
|
|
241
|
+
console.log(`current page: ${val}`);
|
|
169
242
|
},
|
|
170
|
-
],
|
|
171
|
-
};
|
|
172
|
-
},
|
|
173
|
-
methods: {
|
|
174
|
-
toggleSelection(rows) {
|
|
175
|
-
if (rows) {
|
|
176
|
-
rows.forEach((row) => {
|
|
177
|
-
this.$refs.multipleTable.toggleRowSelection(row);
|
|
178
|
-
});
|
|
179
|
-
} else {
|
|
180
|
-
this.$refs.multipleTable.clearSelection();
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
handleSelectionChange(val) {
|
|
184
|
-
this.multipleSelection = val;
|
|
185
|
-
},
|
|
186
|
-
resetDateFilter() {
|
|
187
|
-
this.$refs.filterTable.clearFilter('date');
|
|
188
|
-
},
|
|
189
|
-
clearFilter() {
|
|
190
|
-
this.$refs.filterTable.clearFilter();
|
|
191
|
-
},
|
|
192
|
-
formatter(row, column) {
|
|
193
|
-
return row.address;
|
|
194
|
-
},
|
|
195
|
-
filterTag(value, row) {
|
|
196
|
-
return row.tag === value;
|
|
197
|
-
},
|
|
198
|
-
filterHandler(value, row, column) {
|
|
199
|
-
console.log(row, column, value);
|
|
200
|
-
const property = column['property'];
|
|
201
|
-
return row[property] === value;
|
|
202
|
-
},
|
|
203
|
-
handleSizeChange(val) {
|
|
204
|
-
console.log(`${val} items per page`);
|
|
205
|
-
},
|
|
206
|
-
handleCurrentChange(val) {
|
|
207
|
-
console.log(`current page: ${val}`);
|
|
208
243
|
},
|
|
209
|
-
},
|
|
210
244
|
});
|
|
211
245
|
</script>
|