u-table.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. data() {
  62. return {}
  63. },
  64. computed: {
  65. tableStyle() {
  66. let style = {};
  67. style.borderLeft = `solid 1px ${this.borderColor}`;
  68. style.borderTop = `solid 1px ${this.borderColor}`;
  69. style.backgroundColor = this.bgColor;;
  70. return style;
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss" scoped>
  76. @import "../../libs/css/style.components.scss";
  77. .u-table {
  78. width: 100%;
  79. box-sizing: border-box;
  80. }
  81. </style>