|
|
@@ -1,54 +1,74 @@
|
|
|
<template>
|
|
|
- <table class="com-table rank-table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>排名</th>
|
|
|
- <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" :style="{ width: col.width }" @click="onSort(col)">
|
|
|
- {{ col.name }}
|
|
|
- </th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <el-scrollbar>
|
|
|
- <tbody :style="{ height: height }">
|
|
|
- <tr v-for="(row, index) of tableData" :key="index" :class="'rank rank' + index">
|
|
|
- <td class="rank-index">
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
- </td>
|
|
|
- <td
|
|
|
- v-for="(col, i) of data.column"
|
|
|
- :key="i"
|
|
|
- :style="{ width: col.width }"
|
|
|
- :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
|
|
|
- @mouseleave="leave()"
|
|
|
- >
|
|
|
- <component :is="col.type ? col.type : 'span'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)">
|
|
|
- </component>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </el-scrollbar>
|
|
|
- <el-pagination
|
|
|
- class="mg-t-8"
|
|
|
- v-if="pageable"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-size="pageSize"
|
|
|
- :total="data.total"
|
|
|
- v-bind="elPaggingProps"
|
|
|
+ <table class="com-table rank-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <!-- <th>排名</th> -->
|
|
|
+ <th
|
|
|
+ v-for="(col, index) of data.column"
|
|
|
+ :key="index"
|
|
|
+ :class="{ light: col.is_light }"
|
|
|
+ :style="{ width: col.width }"
|
|
|
+ @click="onSort(col)"
|
|
|
>
|
|
|
- </el-pagination>
|
|
|
- </table>
|
|
|
+ {{ col.name }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <el-scrollbar>
|
|
|
+ <tbody :style="{ height: height }">
|
|
|
+ <tr
|
|
|
+ v-for="(row, index) of tableData"
|
|
|
+ :key="index"
|
|
|
+ :class="'rank rank' + index"
|
|
|
+ @click="clickRow(row)"
|
|
|
+ >
|
|
|
+ <!-- <td class="rank-index">
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
+ </td> -->
|
|
|
+ <td
|
|
|
+ v-for="(col, i) of data.column"
|
|
|
+ :key="i"
|
|
|
+ :style="{ width: col.width }"
|
|
|
+ :class="{
|
|
|
+ light: hoverRow == row || hoverCol == col,
|
|
|
+ num: col.is_num,
|
|
|
+ 'always-light': col.is_light || row.is_light,
|
|
|
+ }"
|
|
|
+ @mouseleave="leave()"
|
|
|
+ >
|
|
|
+ <component
|
|
|
+ :is="col.type ? col.type : 'span'"
|
|
|
+ v-bind="col.props"
|
|
|
+ v-html="template(col, row[col.field])"
|
|
|
+ @click="onClick(col, row)"
|
|
|
+ >
|
|
|
+ </component>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </el-scrollbar>
|
|
|
+ <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>
|
|
|
+ </table>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- // 名称
|
|
|
- name: "ComTable",
|
|
|
- // 使用组件
|
|
|
- components: {},
|
|
|
- // 传入参数
|
|
|
- props: {
|
|
|
- /**
|
|
|
+ // 名称
|
|
|
+ name: "ComTable",
|
|
|
+ // 使用组件
|
|
|
+ components: {},
|
|
|
+ // 传入参数
|
|
|
+ props: {
|
|
|
+ /**
|
|
|
* {
|
|
|
column: [{
|
|
|
name: "风机名称",
|
|
|
@@ -77,209 +97,213 @@ export default {
|
|
|
total:200
|
|
|
}
|
|
|
*/
|
|
|
- data: Object,
|
|
|
- // hover 样式
|
|
|
- showHover: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- // 列高亮
|
|
|
- showColHover: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- canScroll: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- pageSize: {
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
- },
|
|
|
- height: {
|
|
|
- type: String,
|
|
|
- default: "",
|
|
|
- },
|
|
|
- // 新增 支持 pagging 组件
|
|
|
- elPaggingProps: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- layout: "total, sizes, prev, pager, next, jumper",
|
|
|
- // "page-sizes": [100, 200, 300, 400],
|
|
|
- };
|
|
|
- },
|
|
|
- },
|
|
|
+ data: Object,
|
|
|
+ // hover 样式
|
|
|
+ showHover: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ // 列高亮
|
|
|
+ showColHover: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ canScroll: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
},
|
|
|
- // 自定义事件
|
|
|
- emits: {
|
|
|
- // 分页事件
|
|
|
- onPagging: null,
|
|
|
+ pageSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
},
|
|
|
- // 数据
|
|
|
- data() {
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ // 新增 支持 pagging 组件
|
|
|
+ elPaggingProps: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
return {
|
|
|
- hoverRow: -1,
|
|
|
- hoverCol: -1,
|
|
|
- sortCol: "",
|
|
|
- sortType: "",
|
|
|
- currentPage: 1,
|
|
|
+ layout: "total, sizes, prev, pager, next, jumper",
|
|
|
+ // "page-sizes": [100, 200, 300, 400],
|
|
|
};
|
|
|
+ },
|
|
|
},
|
|
|
- computed: {
|
|
|
- tableData() {
|
|
|
- let that = this;
|
|
|
- if (this.sortCol == "") {
|
|
|
- return this.data.data;
|
|
|
- } else {
|
|
|
- let data = this.data.data;
|
|
|
+ },
|
|
|
+ // 自定义事件
|
|
|
+ emits: {
|
|
|
+ // 分页事件
|
|
|
+ onPagging: null,
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hoverRow: -1,
|
|
|
+ hoverCol: -1,
|
|
|
+ sortCol: "",
|
|
|
+ sortType: "",
|
|
|
+ currentPage: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tableData() {
|
|
|
+ let that = this;
|
|
|
+ if (this.sortCol == "") {
|
|
|
+ return this.data.data;
|
|
|
+ } else {
|
|
|
+ let data = this.data.data;
|
|
|
|
|
|
- data.sort((a, b) => {
|
|
|
- let rev = 1;
|
|
|
- if (that.sortType == "ASC") rev = 1;
|
|
|
- else if (that.sortType == "DESC") rev = -1;
|
|
|
+ data.sort((a, b) => {
|
|
|
+ let rev = 1;
|
|
|
+ if (that.sortType == "ASC") rev = 1;
|
|
|
+ else if (that.sortType == "DESC") rev = -1;
|
|
|
|
|
|
- if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
|
|
|
- if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
|
|
|
- return 0;
|
|
|
- });
|
|
|
- return data;
|
|
|
- }
|
|
|
- },
|
|
|
- pageable() {
|
|
|
- return this.pageSize != 0;
|
|
|
- },
|
|
|
- pages() {
|
|
|
- if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
|
|
|
- else return 0;
|
|
|
- },
|
|
|
- startRow() {
|
|
|
- if (this.pageable) return (this.currentPage - 1) * this.pageSize;
|
|
|
- else return 0;
|
|
|
- },
|
|
|
- endRow() {
|
|
|
- if (this.pageable) return this.currentPage * this.pageSize;
|
|
|
- else return this.data.data.length;
|
|
|
- },
|
|
|
+ if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
|
|
|
+ if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
|
|
|
+ return 0;
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ }
|
|
|
},
|
|
|
- // 函数
|
|
|
- methods: {
|
|
|
- onClick(col, data) {
|
|
|
- if (col.click) col.click(event, data);
|
|
|
- },
|
|
|
- onSort(col) {
|
|
|
- if (col.sortable == true) {
|
|
|
- this.sortCol = col.field;
|
|
|
- switch (this.sortType) {
|
|
|
- case "":
|
|
|
- this.sortType = "DESC";
|
|
|
- break;
|
|
|
- case "DESC":
|
|
|
- this.sortType = "ASC";
|
|
|
- break;
|
|
|
- case "ASC":
|
|
|
- this.sortType = "";
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- template(col, data) {
|
|
|
- if (!col.template) return data;
|
|
|
- else return col.template(data);
|
|
|
- },
|
|
|
- hover(row, col) {
|
|
|
- if (this.showHover) {
|
|
|
- this.hoverRow = row;
|
|
|
- if (this.showColHover) this.hoverCol = col;
|
|
|
- }
|
|
|
- },
|
|
|
- leave() {
|
|
|
- this.hoverRow = -1;
|
|
|
- this.hoverCol = -1;
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.currentPage = val;
|
|
|
- this.$emit("onPagging", {
|
|
|
- pageIndex: this.currentPage,
|
|
|
- pageSize: this.pageSize,
|
|
|
- start: this.startRow,
|
|
|
- end: this.endRow,
|
|
|
- });
|
|
|
- },
|
|
|
+ pageable() {
|
|
|
+ return this.pageSize != 0;
|
|
|
+ },
|
|
|
+ pages() {
|
|
|
+ if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
|
|
|
+ else return 0;
|
|
|
},
|
|
|
- // 生命周期钩子
|
|
|
- beforeCreate() {
|
|
|
- // 创建前
|
|
|
+ startRow() {
|
|
|
+ if (this.pageable) return (this.currentPage - 1) * this.pageSize;
|
|
|
+ else return 0;
|
|
|
},
|
|
|
- created() {
|
|
|
- // 创建后
|
|
|
+ endRow() {
|
|
|
+ if (this.pageable) return this.currentPage * this.pageSize;
|
|
|
+ else return this.data.data.length;
|
|
|
},
|
|
|
- beforeMount() {
|
|
|
- // 渲染前
|
|
|
+ },
|
|
|
+ // 函数
|
|
|
+ methods: {
|
|
|
+ clickRow(row) {
|
|
|
+ this.$emit("rowClick", row);
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // 渲染后
|
|
|
+ onClick(col, data) {
|
|
|
+ if (col.click) col.click(event, data);
|
|
|
+ },
|
|
|
+ onSort(col) {
|
|
|
+ if (col.sortable == true) {
|
|
|
+ this.sortCol = col.field;
|
|
|
+ switch (this.sortType) {
|
|
|
+ case "":
|
|
|
+ this.sortType = "DESC";
|
|
|
+ break;
|
|
|
+ case "DESC":
|
|
|
+ this.sortType = "ASC";
|
|
|
+ break;
|
|
|
+ case "ASC":
|
|
|
+ this.sortType = "";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- beforeUpdate() {},
|
|
|
- updated() {},
|
|
|
+ template(col, data) {
|
|
|
+ if (!col.template) return data;
|
|
|
+ else return col.template(data);
|
|
|
+ },
|
|
|
+ hover(row, col) {
|
|
|
+ if (this.showHover) {
|
|
|
+ this.hoverRow = row;
|
|
|
+ if (this.showColHover) this.hoverCol = col;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ leave() {
|
|
|
+ this.hoverRow = -1;
|
|
|
+ this.hoverCol = -1;
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.$emit("onPagging", {
|
|
|
+ pageIndex: this.currentPage,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ start: this.startRow,
|
|
|
+ end: this.endRow,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生命周期钩子
|
|
|
+ beforeCreate() {
|
|
|
+ // 创建前
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 创建后
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ // 渲染前
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 渲染后
|
|
|
+ },
|
|
|
+ beforeUpdate() {},
|
|
|
+ updated() {},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.rank-table {
|
|
|
- thead tr th {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+ thead tr th {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
- .rank {
|
|
|
- background: transparent !important;
|
|
|
- border-bottom: 1px solid #5362684d;
|
|
|
+ .rank {
|
|
|
+ background: transparent !important;
|
|
|
+ border-bottom: 1px solid #5362684d;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- td {
|
|
|
- height: 2.593vh;
|
|
|
- line-height: 2.593vh;
|
|
|
- padding: 0;
|
|
|
- color: #ffffff;
|
|
|
+ td {
|
|
|
+ height: 2.593vh;
|
|
|
+ line-height: 2.593vh;
|
|
|
+ padding: 0;
|
|
|
+ color: #ffffff;
|
|
|
|
|
|
- &.rank-index {
|
|
|
- span {
|
|
|
- width: 1.852vh;
|
|
|
- height: 1.852vh;
|
|
|
- display: flex;
|
|
|
- margin: 0.37vh auto;
|
|
|
- background: #414E64;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.rank-index {
|
|
|
+ span {
|
|
|
+ width: 1.852vh;
|
|
|
+ height: 1.852vh;
|
|
|
+ display: flex;
|
|
|
+ margin: 0.37vh auto;
|
|
|
+ background: #414e64;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .rank.rank0 td {
|
|
|
- color: #EDB32F;
|
|
|
+ .rank.rank0 td {
|
|
|
+ color: #edb32f;
|
|
|
|
|
|
- &.rank-index span {
|
|
|
- background: #EDB32F;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ &.rank-index span {
|
|
|
+ background: #edb32f;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .rank.rank1 td {
|
|
|
- color: #05BB4C;
|
|
|
+ .rank.rank1 td {
|
|
|
+ color: #05bb4c;
|
|
|
|
|
|
- &.rank-index span {
|
|
|
- background: #05BB4C;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ &.rank-index span {
|
|
|
+ background: #05bb4c;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .rank.rank2 td {
|
|
|
- color: #4B55AE;
|
|
|
+ .rank.rank2 td {
|
|
|
+ color: #4b55ae;
|
|
|
|
|
|
- &.rank-index span {
|
|
|
- background: #4B55AE;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ &.rank-index span {
|
|
|
+ background: #4b55ae;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
Koishi