1 | # Table 表格
|
2 |
|
3 | 基于Element 的 Table 进行二次封装,用于展示多条结构类似的数据,可根据配置文件作自定义展示。
|
4 |
|
5 | ## 代码演示
|
6 |
|
7 | ### 基础用法
|
8 | :::kview
|
9 |
|
10 | ```html
|
11 | <template>
|
12 | <k-table :height="contentHeight" :header-data="headerData" :table-data="tableData" @act="clickAct" @sort-change="sortChange"
|
13 | @selection-change="selectChange" />
|
14 | </template>
|
15 |
|
16 | <script>
|
17 |
|
18 | const getPermissionByKey = key => {
|
19 | return {
|
20 | PERMISSION_VOICE_LIB_DETAIL: {
|
21 | label: '查看',
|
22 | has: true
|
23 | },
|
24 | PERMISSION_VOICE_LIB_DEL: {
|
25 | label: '删除',
|
26 | has: false
|
27 | },
|
28 | PERMISSION_VOICE_LIB_DL_VP:{
|
29 | label:'下载',
|
30 | has:true
|
31 | },
|
32 | PERMISSION_VOICE_LIB_DEL_VP:{
|
33 | label:'删除声纹',
|
34 | has:true
|
35 | }
|
36 | } [key]
|
37 | }
|
38 | export default {
|
39 | data() {
|
40 | return {
|
41 | contentHeight: 300,
|
42 | headerData: [{
|
43 | type: "selection",
|
44 | width: 55,
|
45 | fixed: "left",
|
46 | showRules: () => {
|
47 | const {
|
48 | has: PERMISSION_VOICE_LIB_DL_VP
|
49 | } = getPermissionByKey("PERMISSION_VOICE_LIB_DL_VP"), {
|
50 | has: PERMISSION_VOICE_LIB_DEL_VP
|
51 | } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL_VP");
|
52 | return PERMISSION_VOICE_LIB_DL_VP || PERMISSION_VOICE_LIB_DEL_VP;
|
53 | },
|
54 | },
|
55 | {
|
56 | label: "编号",
|
57 | prop: "id",
|
58 | },
|
59 | {
|
60 | label: "声纹库名",
|
61 | prop: "name",
|
62 | },
|
63 | {
|
64 | label: "声纹总量/条",
|
65 | prop: "count",
|
66 | },
|
67 | {
|
68 | label: "建库时间",
|
69 | prop: "created_at",
|
70 | sortable:true,
|
71 | formatType: "time", //全局注册的Vue.filter
|
72 | },
|
73 | {
|
74 | label: "操作",
|
75 | fixed: "right",
|
76 | width: 240,
|
77 | comps: [{
|
78 | label: "查看详情",
|
79 | comp: "ElButton", //全局注册的组件
|
80 | event: "detail",
|
81 | props: {
|
82 | style: "margin-right:10px;",
|
83 | size: "mini",
|
84 | },
|
85 | // showRules: () => {
|
86 | // const { has } = getPermissionByKey("PERMISSION_VOICE_LIB_DETAIL");
|
87 | // return has;
|
88 | // },
|
89 | disableRules: () => {
|
90 | const {
|
91 | has
|
92 | } = getPermissionByKey("PERMISSION_VOICE_LIB_DETAIL");
|
93 | return !has;
|
94 | },
|
95 | },
|
96 | {
|
97 | label: "删除",
|
98 | comp: "ElButton",
|
99 | event: "delete",
|
100 | props: {
|
101 | type: "danger",
|
102 | style: "margin-right:10px;",
|
103 | size: "mini",
|
104 | },
|
105 | // showRules: () => {
|
106 | // const { has } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL");
|
107 | // return has;
|
108 | // },
|
109 | disableRules: () => {
|
110 | const {
|
111 | has
|
112 | } = getPermissionByKey("PERMISSION_VOICE_LIB_DEL");
|
113 | return !has;
|
114 | },
|
115 | },
|
116 | ],
|
117 | },
|
118 | ],
|
119 | tableData: [{
|
120 | "id": 36,
|
121 | "branch_id": 28,
|
122 | "name": "速度发送方发送刚刚",
|
123 | "is_deleted": 0,
|
124 | "count": 0,
|
125 | "voice_group_id": "6ec878df4f2311ea8cb20233488cb340",
|
126 | "created_at": 1581682418,
|
127 | "updated_at": 1582882719
|
128 | }, {
|
129 | "id": 35,
|
130 | "branch_id": 20,
|
131 | "name": "测试库",
|
132 | "is_deleted": 0,
|
133 | "count": 0,
|
134 | "voice_group_id": "9f1533814eff11ea8bf10233484e9886",
|
135 | "created_at": 1581667038,
|
136 | "updated_at": 1581667038
|
137 | }, {
|
138 | "id": 32,
|
139 | "branch_id": 10,
|
140 | "name": "测试",
|
141 | "is_deleted": 0,
|
142 | "count": 0,
|
143 | "voice_group_id": "db49acac4ef611ea8bf10233484e9886",
|
144 | "created_at": 1581663273,
|
145 | "updated_at": 1581663273
|
146 | }],
|
147 | }
|
148 | },
|
149 | methods: {
|
150 | clickAct(event, rowIndex, tableData, ) {
|
151 | console.log(event, rowIndex, tableData);
|
152 | },
|
153 | selectChange(multipleData){
|
154 | console.log(multipleData);
|
155 | },
|
156 | sortChange(column, prop, order) {
|
157 | const propSort = Object.prototype.toString.call(order).includes("String");
|
158 | const order_by = propSort ? prop : "";
|
159 | const desc = propSort ? {
|
160 | descending: true,
|
161 | ascending: false,
|
162 | } [order] :
|
163 | "";
|
164 | this.requestParam = {
|
165 | ...this.requestParam,
|
166 | order_by,
|
167 | desc,
|
168 | };
|
169 | },
|
170 |
|
171 | }
|
172 | }
|
173 | </script>
|
174 | ```
|
175 |
|
176 | :::
|
177 |
|
178 | ## Props
|
179 |
|
180 | <div class="markdown-table">
|
181 |
|
182 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
183 | |-------|---------|------|--------|----------|
|
184 | |tableData|数据|Array|[]|-
|
185 | |height|表格高度|Number|-|是
|
186 | |headerData|表头配置(详见下方HeaderData)|Array|[]|是
|
187 |
|
188 | </div>
|
189 |
|
190 | ## HeaderData
|
191 | <div class="markdown-table">
|
192 |
|
193 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
194 | |-------|---------|------|--------|----------|
|
195 | |label|表头文本|String|-|是|
|
196 | |prop|数据项展示key|String|-|是|
|
197 | |width|列宽|Number|-|-|
|
198 | |formatType|格式化类型|String|-|-|
|
199 | |fixed|定位|String|-|-|
|
200 | |showRules|展示规则|Function类型,返回值为Boolean|-|-|
|
201 | |disableRules|禁用规则|Function类型,返回值为Boolean|-|-|
|
202 | |type|表头类型|String|-|-|
|
203 | |sortable|是否可排序|Boolean|-|-|
|
204 | |comps|操作项配置(详见下方HeaderData-Comps)|Array|-|-|
|
205 |
|
206 | </div>
|
207 |
|
208 | ## HeaderData-Comps
|
209 | <div class="markdown-table">
|
210 |
|
211 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
212 | |-------|---------|------|--------|----------|
|
213 | |label|填充文本|String|-|是|
|
214 | |comp|全局绑定的组件key|String|-|是|
|
215 | |event|触发的事件key|String|-|是|
|
216 | |props|当前操作comp接收的额外属性|Object|-|-|
|
217 | |showRules|展示规则|Function类型,返回值为Boolean|-|-|
|
218 | |disableRules|禁用规则|Function类型,返回值为Boolean|-|-|
|
219 |
|
220 | </div>
|
221 |
|
222 | ## Events
|
223 |
|
224 | <div class="markdown-table">
|
225 |
|
226 | | 方法名 | 说明 | 参数|
|
227 | | ------ |----- | ---- |
|
228 | |row-click|行点击事件|传递row, col, event|
|
229 | |cell-click|行点击事件|传递cell, row, col, event|
|
230 | |selection-change|headerData含多选操作配置,表格项被点选的时触发|传递 `tableData` 属性的数组中所选中的对象 |
|
231 | |sort-change|headerData含排序配置(sortable),排序按钮点击时出发|传递 column, prop, order |
|
232 |
|
233 | </div>
|
234 |
|