mali-applet-ui 0.0.11 → 0.0.12

package/components/ml-table/ml-table.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="ml-table" :style="{height}">
+  <view class="ml-table" :style="{height: height ? (isNaN(height) ? height : `${height}rpx`) : ''}">
     <view class="table-header">
       <view class="table-column-header">
         <view class="table-tr">
-          <view v-for="(column, columnIndex) in tableColumn" :key="columnIndex" class="table-th" :style="{width: column.width || '30vw'}" @click="chickThEvent({ column, columnIndex })">
+          <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 })">
             <view class="th-title">{{column.title}}</view>
             <view class="th-sort" v-if="column.sortable">
               <view class="asc-btn" :class="{active: column.order === 'asc'}" @click.stop="sortEvent({column, columnIndex}, 'asc')">
@@ -18,7 +18,7 @@
       </view>
       <view v-if="headerData && headerData.length" class="table-body-top">
         <view class="table-tr" v-for="(row, rowIndex) in headerData" :key="rowIndex">
-          <view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: column.width || '30vw'}" @click="cellHeaderTdClick({ type: 'header', row, rowIndex, column, columnIndex })">
+          <view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellHeaderTdClick({ type: 'header', row, rowIndex, column, columnIndex })">
             <view :class="['table-cell', column.align ? `align-${column.align}` : '', getHeaderCellClass({ type: 'header', row, rowIndex, column, columnIndex })]">
               <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>
               <text v-else>{{ getHeaderCellValue({ type: 'header', row, rowIndex, column, columnIndex }) }}</text>
@@ -29,7 +29,7 @@
     </view>
     <view class="table-body-contnet">
       <view class="table-tr" v-for="(row, rowIndex) in tableData" :key="rowIndex">
-        <view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: column.width || '30vw'}" @click="cellTdClick({ type: 'body', row, rowIndex, column, columnIndex })">
+        <view class="table-td" v-for="(column, columnIndex) in tableColumn" :key="columnIndex" :style="{width: getColWidth(column)}" @click="cellTdClick({ type: 'body', row, rowIndex, column, columnIndex })">
           <view :class="['table-cell', column.align ? `align-${column.align}` : '', getCellClass({ type: 'body', row, rowIndex, column, columnIndex })]">
             <text v-if="column.type === 'seq'">{{ rowIndex + 1 }}</text>
             <text v-else-if="column.cellRender && column.cellRender.name === 'Underline'" class="underline">{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
@@ -40,6 +40,7 @@
               :title="row[column.cellRender.titleField] || ''"
               :titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
               :showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
+              :max="column.cellRender.props && column.cellRender.props.max ? column.cellRender.props.max : 100"
               :activeColor="barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : column.cellRender.props ? column.cellRender.props.activeColor : ''"
               :backgroundColor="column.cellRender.props ? column.cellRender.props.backgroundColor : ''">
             </ml-progress-bar>
@@ -50,8 +51,8 @@
               :max="row[column.cellRender.maxField] || ''"
               :titleUnderline="column.cellRender.props ? column.cellRender.props.titleUnderline : false"
               :showNum="column.cellRender.props ? column.cellRender.props.showNum : false"
-              :activeColor="barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : column.cellRender.props ? column.cellRender.props.activeColor : ''"
-              :backgroundColor="column.cellRender.props ? column.cellRender.props.backgroundColor : ''">
+              :activeColor="(barActiveColor ? barActiveColor({ type: 'body', row, rowIndex, column, columnIndex }) : (column.cellRender.props ? column.cellRender.props.activeColor : '')) || '#FA8C16'"
+              :backgroundColor="(column.cellRender.props ? column.cellRender.props.backgroundColor : '') || '#1890FF'">
             </ml-progress-bar>
             <text v-else>{{ getCellValue({ type: 'body', row, rowIndex, column, columnIndex }) }}</text>
           </view>
@@ -71,7 +72,7 @@ export default {
   name: 'ml-table',
   props: {
     loading: Boolean,
-    height: String,
+    height: [Number, String],
     headerData: Array,
     data: Array,
     columns: Array,
@@ -139,9 +140,11 @@ export default {
       return XEUtils.eqNull(cellValue) ? '' : cellValue
     },
     getCellClass(params) {
+      const { row, column } = params
+      const cellValue = row[column.field]
       if (this.cellClass) {
         if (XEUtils.isFunction(this.cellClass)) {
-          return this.cellClass(params)
+          return this.cellClass({ ...params, cellValue })
         }
         return `${this.cellClass}`
       }
@@ -155,6 +158,24 @@ export default {
       }
       return XEUtils.eqNull(cellValue) ? '' : cellValue
     },
+    getColWidth (column) {
+      if (column.width) {
+        if (isNaN(column.width)) {
+          return column.width
+        }
+        return `${column.width}rpx`
+      }
+      return '30vw'
+    },
+    getTableHeight () {
+      if (this.height) {
+        if (isNaN(height)) {
+          return height
+        }
+        return `${height}rpx`
+      }
+      return ''
+    },
     sort (fieldOrColumn, order) {
       const column = fieldOrColumn ? this.tableColumn.find(item => item.colid === fieldOrColumn.colid || item.field === fieldOrColumn) : null
       if (column) {
@@ -236,11 +257,16 @@ export default {
     border-radius: 8rpx 8rpx 0 0;
     background: rgba(240, 249, 255, 1);
     border-bottom: 1rpx solid rgba(39, 42, 48, 0.05);
+    box-sizing: border-box;
+    &.is-sort {
+      .th-title {
+        padding-right: 26rpx;
+      }
+    }
     .th-title {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      padding-right: 26rpx;
     }
   }
 
@@ -290,6 +316,7 @@ export default {
     text-align: center;
     color: rgba(39, 42, 48, 0.65);
     border-bottom: 1rpx solid rgba(39, 42, 48, 0.05);
+    box-sizing: border-box;
   }
 
   .table-cell {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "码里云小程序组件库",
   "files": [
     "components",