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 |
|