mali-applet-ui 0.0.77 → 0.0.78
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/ml-table/ml-table.vue +59 -48
- package/package.json +1 -1
|
@@ -1,64 +1,72 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<view class="ml-table" :class="className"
|
|
3
|
-
<view class="table-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
</view>
|
|
12
|
-
<view class="
|
|
13
|
-
<
|
|
2
|
+
<view class="ml-table" :class="className">
|
|
3
|
+
<view class="ml-table-top-warpper">
|
|
4
|
+
<slot name="top"></slot>
|
|
5
|
+
</view>
|
|
6
|
+
<view class="ml-table-warpper" :style="tableStyle">
|
|
7
|
+
<view class="table-header">
|
|
8
|
+
<view class="table-column-header">
|
|
9
|
+
<view class="table-tr">
|
|
10
|
+
<view v-for="(column, columnIndex) in tableColumn" :key="columnIndex" class="table-th" :class="{'is-sort': !!column.sortable}" :style="{width: getColWidth(column)}" @click="chickThEvent({ column, columnIndex })">
|
|
11
|
+
<view class="th-title">{{column.title}}</view>
|
|
12
|
+
<view class="th-sort" v-if="column.sortable">
|
|
13
|
+
<view class="asc-btn" :class="{active: column.order === 'asc'}" @click.stop="sortEvent({column, columnIndex}, 'asc')">
|
|
14
|
+
<ml-icon name="arrow-up-filling"></ml-icon>
|
|
15
|
+
</view>
|
|
16
|
+
<view class="desc-btn" :class="{active: column.order === 'desc'}" @click.stop="sortEvent({column, columnIndex}, 'desc')">
|
|
17
|
+
<ml-icon name="arrow-down-filling"></ml-icon>
|
|
18
|
+
</view>
|
|
14
19
|
</view>
|
|
15
20
|
</view>
|
|
16
21
|
</view>
|
|
17
22
|
</view>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
<view v-if="headerData && headerData.length" class="table-body-top">
|
|
24
|
+
<view class="table-tr" v-for="(row, rowIndex) in headerData" :key="rowIndex">
|
|
25
|
+
<view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellHeaderTdClick({ type: 'header', row, rowIndex, column, columnIndex })">
|
|
26
|
+
<view :class="['table-cell', column.align ? `align-${column.align}` : '', getHeaderCellClass({ type: 'header', row, rowIndex, column, columnIndex })]">
|
|
27
|
+
<ml-amount-text v-if="column.cellRender && column.cellRender.name === 'MlAmountText'" :value="row[column.field]" :simplify="column.cellRender.props ? column.cellRender.props.simplify : false"></ml-amount-text>
|
|
28
|
+
<text v-else>{{ getHeaderCellValue({ type: 'header', row, rowIndex, column, columnIndex }) }}</text>
|
|
29
|
+
</view>
|
|
25
30
|
</view>
|
|
26
31
|
</view>
|
|
27
32
|
</view>
|
|
28
33
|
</view>
|
|
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
|
-
|
|
34
|
+
<view class="table-body-contnet">
|
|
35
|
+
<view class="table-tr" v-for="(row, rowIndex) in tableData" :key="rowIndex">
|
|
36
|
+
<view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellTdClick({ type: 'body', row, rowIndex, column, columnIndex })">
|
|
37
|
+
<view :class="['table-cell', column.align ? `align-${column.align}` : '', getCellClass({ type: 'body', row, rowIndex, column, columnIndex })]">
|
|
38
|
+
<text v-if="column.type === 'seq'">{{ rowIndex + 1 }}</text>
|
|
39
|
+
<text v-else-if="column.cellRender && column.cellRender.name === 'Underline'" class="underline">{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
|
|
40
|
+
<ml-amount-text v-else-if="column.cellRender && column.cellRender.name === 'MlAmountText'" :value="row[column.field]" :simplify="column.cellRender.props ? column.cellRender.props.simplify : false"></ml-amount-text>
|
|
41
|
+
<ml-progress-bar
|
|
42
|
+
v-else-if="column.cellRender && column.cellRender.name === 'MlProgressBar'"
|
|
43
|
+
:value="row[column.cellRender.field || column.field]"
|
|
44
|
+
:title="row[column.cellRender.titleField] || ''"
|
|
45
|
+
:titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
|
|
46
|
+
:showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
|
|
47
|
+
:max="column.cellRender.props && column.cellRender.props.max ? column.cellRender.props.max : 100"
|
|
48
|
+
:activeColor="barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : column.cellRender.props ? column.cellRender.props.activeColor : ''"
|
|
49
|
+
:backgroundColor="column.cellRender.props ? column.cellRender.props.backgroundColor : ''">
|
|
50
|
+
</ml-progress-bar>
|
|
51
|
+
<ml-progress-bar
|
|
52
|
+
v-else-if="column.cellRender && column.cellRender.name === 'MlProgressDiffBar'"
|
|
53
|
+
:value="row[column.cellRender.field || column.field]"
|
|
54
|
+
:title="row[column.cellRender.titleField] || ''"
|
|
55
|
+
:max="row[column.cellRender.maxField] || ''"
|
|
56
|
+
:titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
|
|
57
|
+
:showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
|
|
58
|
+
:activeColor="(barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : (column.cellRender.props ? column.cellRender.props.activeColor : '')) || '#FA8C16'"
|
|
59
|
+
:backgroundColor="(column.cellRender.props ? column.cellRender.props.backgroundColor : '') || '#1890FF'">
|
|
60
|
+
</ml-progress-bar>
|
|
61
|
+
<text v-else>{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
|
|
62
|
+
</view>
|
|
58
63
|
</view>
|
|
59
64
|
</view>
|
|
60
65
|
</view>
|
|
61
66
|
</view>
|
|
67
|
+
<view class="ml-table-bottom-warpper">
|
|
68
|
+
<slot name="bottom"></slot>
|
|
69
|
+
</view>
|
|
62
70
|
</view>
|
|
63
71
|
</template>
|
|
64
72
|
|
|
@@ -96,6 +104,9 @@ export default {
|
|
|
96
104
|
computed: {
|
|
97
105
|
sortOpts () {
|
|
98
106
|
return this.sortConfig ? { ...this.sortConfig } : {}
|
|
107
|
+
},
|
|
108
|
+
tableStyle () {
|
|
109
|
+
return `height:${this.height ? (isNaN(this.height) ? this.height : `${this.height}rpx`) : ''}`
|
|
99
110
|
}
|
|
100
111
|
},
|
|
101
112
|
watch: {
|