Fix table row paddings

src/components/Table/STable.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Provide } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
@@ -353,5 +353,7 @@ export default class STable extends Mixins(SizeMixin) {
   sort (prop: string, order: SortDirection): void {
     this.table.sort(prop, order)
   }
+
+  @Provide('sTable') sTable = this
 }
 </script>

src/components/Table/STableColumn.vue

@@ -5,7 +5,7 @@
     :label="label"
     :column-key="columnKey"
     :prop="prop"
-    :width="width"
+    :width="computedWidth"
     :min-width="minWidth"
     :fixed="fixedPosition || false"
     :render-header="renderHeader"
@@ -18,7 +18,7 @@
     :show-overflow-tooltip="showOverflowTooltip"
     :align="align"
     :header-align="headerAlign"
-    :class-name="headerAlign"
+    :class-name="className"
     :label-class-name="labelClassName"
     :selectable="selectable"
     :reserve-selection="reserveSelection"
@@ -34,9 +34,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
 
-import { ColumnFixedPosition, SortDirection, ColumnAlignment } from './consts'
+import { Size } from '@/types'
+
+import { SortDirection, ColumnAlignment } from './consts'
 
 @Component
 export default class STableColumn extends Vue {
@@ -143,7 +145,7 @@ export default class STableColumn extends Vue {
   /**
    * Class name of cells in the column
    */
-  @Prop({ default: '', type: String }) readonly className!: string
+  @Prop({ type: String }) readonly className!: string
   /**
    * Class name of the label of this column
    */
@@ -182,5 +184,17 @@ export default class STableColumn extends Vue {
    * TODO: comment it when it'll be implemented
    */
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Inject({ default: '', from: 'sTable' }) sTable
+
+  get computedWidth () {
+    const tableBorder = (this.sTable || {}).border
+    const size = (this.sTable || {}).size
+    return !this.width && this.type === 'selection' && !tableBorder && size ? ({
+      [Size.SMALL]: '30px',
+      [Size.MEDIUM]: '32px',
+      [Size.BIG]: '36px'
+    }[size]) : this.width
+  }
 }
 </script>

src/styles/table.scss

@@ -22,6 +22,14 @@
     }
   }
 }
+.el-table:not(.el-table--border) th > .cell,
+.el-table:not(.el-table--border) td > .cell {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.el-table:not(.el-table--border) .el-table-column--selection > .cell {
+  padding-right: 0;
+}
 .el-table--border th:first-child .cell,
 .el-table--border td:first-child .cell {
   padding-left: 13px;