You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-table.vue 2.2 KiB

3 jaren geleden
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="u-table" :style="[tableStyle]">
  3. <slot />
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * table 表格
  9. * @description 表格组件一般用于展示大量结构化数据的场景
  10. * @tutorial https://www.uviewui.com/components/table.html
  11. * @property {String} border-color 表格边框的颜色(默认#e4e7ed)
  12. * @property {String} bg-color 表格的背景颜色(默认#ffffff)
  13. * @property {String} align 单元格的内容对齐方式,作用类似css的text-align(默认center)
  14. * @property {String} padding 单元格的内边距,同css的padding写法(默认10rpx 0)
  15. * @property {String Number} font-size 单元格字体大小,单位rpx(默认28)
  16. * @property {String} color 单元格字体颜色(默认#606266)
  17. * @property {Object} th-style th单元格的样式,对象形式(将th所需参数放在table组件,是为了避免每一个th组件要写一遍)
  18. * @event {Function} click 点击组件时触发
  19. * @event {Function} close 点击关闭按钮时触发
  20. * @example <u-table></u-table>
  21. */
  22. export default {
  23. name: "u-table",
  24. props: {
  25. borderColor: {
  26. type: String,
  27. default: '#e4e7ed'
  28. },
  29. align: {
  30. type: String,
  31. default: 'center'
  32. },
  33. // td的内边距
  34. padding: {
  35. type: String,
  36. default: '10rpx 6rpx'
  37. },
  38. // 字体大小
  39. fontSize: {
  40. type: [String, Number],
  41. default: 28
  42. },
  43. // 字体颜色
  44. color: {
  45. type: String,
  46. default: '#606266'
  47. },
  48. // th的自定义样式
  49. thStyle: {
  50. type: Object,
  51. default () {
  52. return {}
  53. }
  54. },
  55. // table的背景颜色
  56. bgColor: {
  57. type: String,
  58. default: '#ffffff'
  59. }
  60. },
  61. provide() {
  62. return {
  63. uTable: this,
  64. };
  65. },
  66. data() {
  67. return {}
  68. },
  69. computed: {
  70. tableStyle() {
  71. let style = {};
  72. style.borderLeft = `solid 1px ${this.borderColor}`;
  73. style.borderTop = `solid 1px ${this.borderColor}`;
  74. style.backgroundColor = this.bgColor;;
  75. return style;
  76. }
  77. }
  78. }
  79. </script>
  80. <style lang="scss" scoped>
  81. @import "../../libs/css/style.components.scss";
  82. .u-table {
  83. width: 100%;
  84. box-sizing: border-box;
  85. }
  86. /* #ifdef MP */
  87. .u-table /deep/ t-tr {
  88. display: flex;
  89. }
  90. /* #endif */
  91. </style>