table2.vue 5.4 KB

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