table2.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <el-table class="custom-table" stripe :data="data.data" :height="height" style="width: 100%" @cell-click="onClick">
  3. <el-table-column
  4. v-for="col in data.column"
  5. :key="col"
  6. :prop="col.field"
  7. :label="col.name"
  8. :width="col.width"
  9. :sortable="col.sortable"
  10. :show-overflow-tooltip="!col.slot"
  11. :fixed="col.fixed"
  12. :align="'center'"
  13. :resizable="col.resizable"
  14. :header-align="'center'"
  15. >
  16. <template v-if="col.slot == true" #default="item">
  17. <slot :name="col.field" :column="col" :row="item.row" :all="item" :data="item.row[col.field]"></slot>
  18. </template>
  19. </el-table-column>
  20. </el-table>
  21. <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" :total="data.total" v-bind="elPaggingProps"> </el-pagination>
  22. </template>
  23. <script>
  24. export default {
  25. // 名称
  26. name: "ComTable",
  27. // 使用组件
  28. components: {},
  29. // 传入参数
  30. props: {
  31. /**
  32. * {
  33. column: [{
  34. name: "风机名称",
  35. field: "name",
  36. width:'', // 宽度
  37. click:function(){} // 点击事件
  38. sortable:fasle,
  39. slot:false,
  40. fixed:false,
  41. align:'center',
  42. resizable :false,
  43. }],
  44. total:200
  45. }
  46. */
  47. data: Object,
  48. height: {
  49. type: String,
  50. default: "",
  51. },
  52. pageSize: {
  53. type: Number,
  54. default: 0,
  55. },
  56. elPaggingProps: {
  57. type: Object,
  58. default: () => {
  59. return {
  60. layout: "total, sizes, prev, pager, next, jumper",
  61. // "page-sizes": [100, 200, 300, 400],
  62. };
  63. },
  64. },
  65. },
  66. // 自定义事件
  67. emits: {
  68. // 分页事件
  69. onPagging: null,
  70. },
  71. // 数据
  72. data() {
  73. return {
  74. currentPage: 1,
  75. };
  76. },
  77. computed: {
  78. tableData() {
  79. let that = this;
  80. if (this.sortCol == "") {
  81. return this.data.data;
  82. } else {
  83. let data = this.data.data;
  84. data.sort((a, b) => {
  85. let rev = 1;
  86. if (that.sortType == "ASC") rev = 1;
  87. else if (that.sortType == "DESC") rev = -1;
  88. if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
  89. if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
  90. return 0;
  91. });
  92. return data;
  93. }
  94. },
  95. pageable() {
  96. return this.pageSize != 0;
  97. },
  98. pages() {
  99. if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
  100. else return 0;
  101. },
  102. startRow() {
  103. if (this.pageable) return (this.currentPage - 1) * this.pageSize;
  104. else return 0;
  105. },
  106. endRow() {
  107. if (this.pageable) return this.currentPage * this.pageSize;
  108. else return this.data.data.length;
  109. },
  110. },
  111. // 函数
  112. methods: {
  113. onClick(row, column, cell, event) {
  114. if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
  115. },
  116. handleCurrentChange(val) {
  117. this.currentPage = val;
  118. this.$emit("onPagging", {
  119. pageIndex: this.currentPage,
  120. pageSize: this.pageSize,
  121. start: this.startRow,
  122. end: this.endRow,
  123. });
  124. },
  125. },
  126. // 生命周期钩子
  127. beforeCreate() {
  128. // 创建前
  129. },
  130. created() {
  131. // 创建后
  132. },
  133. beforeMount() {
  134. // 渲染前
  135. },
  136. mounted() {
  137. // 渲染后
  138. },
  139. beforeUpdate() {},
  140. updated() {},
  141. };
  142. </script>
  143. <style lang="less">
  144. @titleGray: #9ca5a8;
  145. @rowGray: #606769;
  146. @darkBack: #536268;
  147. .com-table {
  148. width: 100%;
  149. border-collapse: collapse;
  150. thead {
  151. tr {
  152. display: table;
  153. table-layout: fixed;
  154. width: 100%;
  155. th {
  156. background-color: fade(@darkBack, 20%);
  157. height: 30px;
  158. line-height: 30px;
  159. color: @titleGray;
  160. font-weight: 400;
  161. font-size: @fontsize-s;
  162. position: sticky;
  163. top: 0;
  164. cursor: pointer;
  165. &.light,
  166. &.always-light {
  167. color: @green;
  168. }
  169. }
  170. }
  171. }
  172. tbody {
  173. display: block;
  174. tr {
  175. display: table;
  176. table-layout: fixed;
  177. width: 100%;
  178. &:nth-child(2n) {
  179. background-color: fade(@rowGray, 20%);
  180. }
  181. td {
  182. padding: 0.556vh 0;
  183. color: @rowGray;
  184. text-align: center;
  185. font-size: @fontsize-s;
  186. white-space: nowrap;
  187. overflow: hidden;
  188. text-overflow: ellipsis;
  189. &.light,
  190. &.always-light {
  191. color: @green !important;
  192. }
  193. &.num {
  194. font-family: "Bicubik";
  195. font-weight: 400;
  196. }
  197. }
  198. }
  199. }
  200. .el-pagination {
  201. color: @gray;
  202. .el-pagination__total {
  203. color: @gray;
  204. }
  205. button {
  206. &.btn-next,
  207. &.btn-prev {
  208. background: center center no-repeat fade(@gray, 20);
  209. color: @gray-l;
  210. }
  211. &:disabled {
  212. color: @gray-l;
  213. background-color: fade(@gray, 20);
  214. cursor: not-allowed;
  215. }
  216. }
  217. .el-pager li {
  218. color: @gray-l;
  219. background: fade(@gray, 20);
  220. &.active {
  221. color: @green;
  222. }
  223. }
  224. .el-input__inner {
  225. color: @gray-l;
  226. background: fade(@gray, 20);
  227. border: 1px solid fade(@gray, 20);
  228. }
  229. }
  230. }
  231. </style>