fd_dwgz_zhyw_nx/src/views/SandTable/component/rank-table.vue

<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, height: '4vh' }" @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" :class="rankSty(row)"
                    @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: {
            /**
                *   {
                        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: {
            rankSty(row) {
                if (row.operation === '不可运行') {
                    return 'rank0'
                }
            },
            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">
    .rank-table {
        thead tr th {
            color: #ffffff;
        }

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

            td {
                height: 4.5vh;
                line-height: 4.5vh;
                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.rank0 td {
            color: #ffa025;

            &.rank-index span {
                background: #ffa025;
                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>