UNPKG

8.29 kBMarkdownView Raw
1# Table
2
3### Basic usage
4:::kview
5
6```html
7<template>
8 <k-table :height="contentHeight" :header-data="headerData" :table-data="tableData" @act="clickAct" @sort-change="sortChange"
9 @selection-change="selectChange" />
10</template>
11
12<script>
13
14 const getPermissionByKey = key => {
15 return {
16 PERMISSION_VOICE_LIB_DETAIL: {
17 label: 'More Detail',
18 has: true
19 },
20 PERMISSION_VOICE_LIB_DEL: {
21 label: 'Delete Voice Library',
22 has: false
23 },
24 PERMISSION_VOICE_LIB_DL_VP:{
25 label:'Download',
26 has:true
27 },
28 PERMISSION_VOICE_LIB_DEL_VP:{
29 label:'Delete Voice',
30 has:true
31 }
32 } [key]
33 }
34 export default {
35 data() {
36 return {
37 contentHeight: 300,
38 headerData: [{
39 type: "selection",
40 width: 55,
41 fixed: "left",
42 showRules: () => {
43 const {
44 has: PERMISSION_VOICE_LIB_DL_VP
45 } = getPermissionByKey("PERMISSION_VOICE_LIB_DL_VP"), {
46 has: PERMISSION_VOICE_LIB_DEL_VP
47 } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL_VP");
48 return PERMISSION_VOICE_LIB_DL_VP || PERMISSION_VOICE_LIB_DEL_VP;
49 },
50 },
51 {
52 label: "ID",
53 prop: "id",
54 },
55 {
56 label: "Voice Library",
57 prop: "name",
58 },
59 {
60 label: "Voice Count",
61 prop: "count",
62 },
63 {
64 label: "Created At",
65 prop: "created_at",
66 sortable:true,
67 formatType: "time", //global Vue.filter
68 },
69 {
70 label: "Actions",
71 fixed: "right",
72 width: 240,
73 comps: [{
74 label: "More Detail",
75 comp: "ElButton", //global component
76 event: "detail",
77 props: {
78 style: "margin-right:10px;",
79 size: "mini",
80 },
81 // showRules: () => {
82 // const { has } = getPermissionByKey("PERMISSION_VOICE_LIB_DETAIL");
83 // return has;
84 // },
85 disableRules: () => {
86 const {
87 has
88 } = getPermissionByKey("PERMISSION_VOICE_LIB_DETAIL");
89 return !has;
90 },
91 },
92 {
93 label: "Delete",
94 comp: "ElButton",
95 event: "delete",
96 props: {
97 type: "danger",
98 style: "margin-right:10px;",
99 size: "mini",
100 },
101 // showRules: () => {
102 // const { has } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL");
103 // return has;
104 // },
105 disableRules: () => {
106 const {
107 has
108 } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL");
109 return !has;
110 },
111 },
112 ],
113 },
114 ],
115 tableData: [{
116 "id": 36,
117 "branch_id": 28,
118 "name": "Library One",
119 "is_deleted": 0,
120 "count": 0,
121 "voice_group_id": "6ec878df4f2311ea8cb20233488cb340",
122 "created_at": 1581682418,
123 "updated_at": 1582882719
124 }, {
125 "id": 35,
126 "branch_id": 20,
127 "name": "Library Two",
128 "is_deleted": 0,
129 "count": 0,
130 "voice_group_id": "9f1533814eff11ea8bf10233484e9886",
131 "created_at": 1581667038,
132 "updated_at": 1581667038
133 }, {
134 "id": 32,
135 "branch_id": 10,
136 "name": "Library Three",
137 "is_deleted": 0,
138 "count": 0,
139 "voice_group_id": "db49acac4ef611ea8bf10233484e9886",
140 "created_at": 1581663273,
141 "updated_at": 1581663273
142 }],
143 }
144 },
145 methods: {
146 clickAct(event, rowIndex, tableData, ) {
147 console.log(event, rowIndex, tableData);
148 },
149 selectChange(multipleData){
150 console.log(multipleData);
151 },
152 sortChange(column, prop, order) {
153 const propSort = Object.prototype.toString.call(order).includes("String");
154 const order_by = propSort ? prop : "";
155 const desc = propSort ? {
156 descending: true,
157 ascending: false,
158 } [order] :
159 "";
160 this.requestParam = {
161 ...this.requestParam,
162 order_by,
163 desc,
164 };
165 },
166
167 }
168 }
169</script>
170```
171
172:::
173
174## Props
175
176<div class="markdown-table">
177
178| Attribute | Description | Type | Default| Require|
179|-------|---------|------|--------|----------|
180|tableData|data|Array|[]|-
181|height|Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels;|Number|-|true
182|headerData|configuration dataSource of Columns , see the following table|Array|[]|true
183
184</div>
185
186## HeaderData
187<div class="markdown-table">
188
189| Attribute | Description | Type | Default| Require|
190|-------|---------|------|--------|----------|
191|label|Column label|String|-|true|
192|prop|Column field|String|-|true|
193|width|Column width|Number|-|-|
194|formatType|function key that formats cell content|String|-|-|
195|fixed||String|-|-|
196|showRules|display rule|Function return Boolean|-|-|
197|disableRules|disabled rule|Function return Boolean|-|-|
198|type|Column type|String|-|-|
199|sortable|whether column can be sorted|Boolean|-|-|
200|comps|configuration dataSource of actions（see the following table - HeaderData-Comps）|Array|-|-|
201
202</div>
203
204## HeaderData-Comps
205<div class="markdown-table">
206
207| Attribute | Description | Type | Default| Require|
208|-------|---------|------|--------|----------|
209|label|component label|String|-|true|
210|comp|the component name|String|-|true|
211|event|trigger event type|String|-|true|
212|props|the component's props|Object|-|-|
213|showRules|display rule|Function return Boolean|-|-|
214|disableRules|disabled rule|Function return Boolean|-|-|
215
216</div>
217
218## Events
219
220<div class="markdown-table">
221
222| Event Name | Description | Attribute|
223| ------ |----- | ---- |
224|row-click|triggers when clicking a row|paramters: row, col, event|
225|cell-click|triggers when clicking a cell|paramters: cell, row, col, event|
226|selection-change|triggers when selection changes|returns the currently selected array of rows |
227|sort-change|triggers when Table's sorting changes|paramters: column, prop, order |
228
229</div>
230