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.

84 lines
2.1 KiB

3 years ago
  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>