platform_largeScreen/src/views/economicsOperation/nxfHomePage/component/operationTable.vue

<template>
    <table class="com-table rank-table operationTable" :data-type="$store.state.moreSty">
        <thead>
            <tr>
                <!-- <th>排名</th> -->
                <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }"
                    :style="{ width: col.width, height: '45px' }" @click="onSort(col)">
                    {{ col.name }}
                </th>
            </tr>
        </thead>
        <!-- <tbody :style="{ height: height, 'overflow-y': 'auto' }">
            <tr v-for="(row, index) of tableData" :key="index" class="rank rank' + index" @click="clickRow(row)">
                <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> -->
        <tbody :style="{ height: height, 'overflow-y': 'auto' }">
            <tr v-for="(row, index) of tableData" :key="index" class="rank">
                <td v-for="(col, i) of data.column" :key="i">
                    <span :class="tdColor(col.name, index, row[col.field])">
                        <span>{{row[col.field]}}</span></span>
                </td>
            </tr>
        </tbody>
        <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: {
            /**
                *   {
                        column: [{
                            name: "风机名称",
                            field: "name",
                            type:'div',
                            width:'', // 宽度
                            is_num: false, // 是否为数字
                            is_light: false, // 是否高亮
                            template:function(){ }
                            click:function(){} //点击事件
                            sortable:fasle // 排序
                            // 新增用于在表格中使用动态三方组件
                            type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
                            props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
                        },{
                            name: "冷却风温度",
                            field: "lqf",
                            is_num: true,
                            is_light: false
                        }],
                        data: [{
                            name: "1E01",
                            lqf: 15.78,
                            is_light: false
                        }],
                        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],
                    };
                },
            },
        },
        // 自定义事件
        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;

                        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;
            },
        },
        // 函数
        methods: {
            tdColor(name, index, data) {
                let str = ''
                if (name === '排名') {
                    if (index === 0) {
                        str = 'tdindex tdIndex0'
                    } else if (index === 1) {
                        str = 'tdindex tdIndex1'
                    } else if (index === 2) {
                        str = 'tdindex tdIndex2'
                    }
                } else if (name === '涨跌%') {
                    if (data < 0) {
                        str = 'tdzd1'
                    } else {
                        str = 'tdzd2'
                    }
                }
                return str
            },
            clickRow(row) {
                this.$emit("rowClick", row);
            },
            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,
                });
            },
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {},
        updated() {},
    };
</script>

<style lang="less">
    .operationTable {
        height: 100%;
    }

    .operationTable[data-type~="greenSty"] {}

    .operationTable[data-type~="blueSty"] {
        thead tr th {
            background: #23396f !important;
        }
    }

    .rank-table {
        thead tr th {
            color: #bcd2ff;
        }

        .rank {
            background: transparent !important;
            border-bottom: 1px solid #5362684d;
            cursor: pointer;

            td {
                height: 4.5vh;
                line-height: 4.5vh;
                padding: 0;
                // color: #ffffff;
                color: #c2e1ff;

                &.rank-index {
                    span {
                        width: 1.852vh;
                        height: 1.852vh;
                        display: flex;
                        margin: 0.37vh auto;
                        background: #414e64;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }

            .tdindex {
                width: 25px;
                height: 25px;
                display: inline-block;
                color: #fff;
                position: relative;
                top: 6px;
                border-radius: 5px;

                span {
                    position: absolute;
                    top: -10px;
                    left: 9px;
                }
            }

            .tdIndex0 {
                background: #2169c3;
            }

            .tdIndex1 {
                background: #2999a0;
            }

            .tdIndex2 {
                background: #67b9ff;
            }

            .tdzd1 {
                color: #ff6271;
            }

            .tdzd2 {
                color: #2999a0;
            }
        }

        .rank.rank0 td {
            color: #edb32f;

            &.rank-index span {
                background: #edb32f;
                color: #ffffff;
            }
        }

        .rank.rank1 td {
            color: #05bb4c;

            &.rank-index span {
                background: #05bb4c;
                color: #ffffff;
            }
        }

        .rank.rank2 td {
            color: #4b55ae;

            &.rank-index span {
                background: #4b55ae;
                color: #ffffff;
            }
        }
    }
</style>